/* ═══════════════════════════════════════════════════════════════════════
   Arpentiq — Reglages de page (kit Margot « handoff-reglages-page »).
   ═══════════════════════════════════════════════════════════════════════
   [b2336] UNE SEULE ADAPTATION, et c'est la bonne nouvelle : ses classes
   sont toutes prefixees `aqs-` et sa feuille ne porte AUCUNE regle
   `body`/`:root` — les deux pieges qui m'ont coute b2323 et b2335 ne se
   presentent pas ici. Elle n'est donc pas scopee : rien ne peut fuir.

   Ce qui EST adapte : son echelle de z-index (60 / 70 / 75) supposait une
   page vierge. Le CRM empile jusqu'a 100095 (bande documentee dans
   style.css) : a 60, son popover serait passe DERRIERE le calendrier, ses
   modales et ses toasts — donc invisible. Remappe sur la bande reelle :
   popover 100093 · palette de couleurs 100094 · barre d'enregistrement
   100095.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   arpe-settings.css — Arpentiq · réglages d'une page
   Deux surfaces :  .aqs-pv    popover d'affichage (appliqué en direct)
                    .aqs-page  page de paramètres (enregistrement explicite)
   Namespace unique .aqs-* · charge après tes tokens globaux.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens (retire ce bloc si tes tokens sont déjà globaux) ─────── */
.aqs,[data-theme="light"] .aqs{
  --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;--froid:#3d7fc2;--green:#22a06b;
  --r:8px;--r-lg:12px;--r-xl:14px;
  --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,.24);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="noir"] .aqs,[data-theme="donna"] .aqs,[data-theme="ardoise"] .aqs{
  --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;--froid:#5ca8ff;--green:#4fd49a;
  --r:6px;--r-lg:10px;--r-xl:12px;
  --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);
}
.aqs{font-family:var(--sans);color:var(--text)}
.aqs *{box-sizing:border-box}
.aqs button{font-family:inherit;cursor:pointer}

/* ── bouton déclencheur ⚙ ───────────────────────────────────────── */
.aqs-anchor{position:relative;display:inline-flex}

/* ═══ 1. POPOVER D'AFFICHAGE ═══════════════════════════════════════
   Pas de voile : la page reste lisible derrière, l'effet est visible.
   ═════════════════════════════════════════════════════════════════ */
.aqs-pv{position:absolute;top:calc(100% + 9px);right:0;z-index:100093;width:392px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  opacity:0;transform:translateY(-6px) scale(.99);pointer-events:none;
  transition:opacity .16s,transform .18s cubic-bezier(.2,.75,.2,1)}
.aqs-pv.aqs-on{opacity:1;transform:none;pointer-events:auto}
.aqs-pv::before{content:"";position:absolute;top:-5px;right:12px;width:9px;height:9px;background:var(--surface);
  border-left:1px solid var(--border-hi);border-top:1px solid var(--border-hi);transform:rotate(45deg)}
/* si le popover doit s'ouvrir à gauche de l'ancre */
.aqs-pv[data-side="left"]{right:auto;left:0}
.aqs-pv[data-side="left"]::before{right:auto;left:12px}

.aqs-pv-h{display:flex;align-items:flex-start;gap:9px;padding:13px 15px 11px}
.aqs-pv-t{font-size:13.5px;font-weight:700;letter-spacing:-.015em}
/* dit explicitement qu'il n'y a rien à enregistrer */
.aqs-pv-live{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px}
.aqs-pv-live i{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0}
.aqs-pv-x{width:24px;height:24px;margin-left:auto;flex-shrink:0;border:0;border-radius:6px;background:transparent;color:var(--muted);display:grid;place-items:center;transition:.14s}
.aqs-pv-x:hover{background:var(--s2);color:var(--text)}
.aqs-pv-x svg{width:14px;height:14px}

.aqs-sec{border-top:1px solid var(--border);padding:11px 15px}
.aqs-sl{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.aqs-reset{border:0;background:transparent;margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);transition:color .15s}
.aqs-reset:hover{color:var(--accent)}

/* ligne « libellé ⇄ contrôle » : 2× plus compact que des labels empilés */
.aqs-row{display:flex;align-items:center;gap:12px;min-height:34px}
.aqs-row+.aqs-row{margin-top:7px}
.aqs-k{flex:1;min-width:0;font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--text-dim)}

/* contrôle : champ horaire (valeur en mono tabulaire) */
.aqs-time{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r);padding:5px 9px}
.aqs-time input{width:44px;border:0;outline:0;background:transparent;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;text-align:center}
.aqs-time svg{width:13px;height:13px;color:var(--muted)}
.aqs-arrow{color:var(--muted);font-size:12px}

/* contrôle : segment court (valeurs numériques — jamais un select pour 4 chiffres) */
.aqs-seg{display:flex;gap:3px}
.aqs-seg button{border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--mono);
  font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;transition:.15s}
.aqs-seg button:hover{border-color:var(--border-hi);color:var(--text)}
.aqs-seg button.aqs-on{background:var(--accent-dim);border-color:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--accent)}

/* contrôle : select compact */
.aqs-sel{position:relative;display:inline-flex;align-items:center}
.aqs-sel select{appearance:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);
  background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r);padding:6px 28px 6px 10px;outline:0}
.aqs-sel select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.aqs-sel svg{position:absolute;right:9px;width:13px;height:13px;color:var(--muted);pointer-events:none}

/* contrôle : bascule */
.aqs-tgl{width:36px;height:21px;flex-shrink:0;border-radius:99px;border:1px solid var(--border-hi);background:var(--s2);position:relative;transition:.18s}
.aqs-tgl::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-sm);transition:transform .18s}
.aqs-tgl.aqs-on{background:var(--accent);border-color:var(--accent)}
.aqs-tgl.aqs-on::after{transform:translateX(15px)}

/* couleurs de types */
.aqs-cols{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.aqs-col{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px;cursor:pointer;transition:background .13s}
.aqs-col:hover{background:var(--s2)}
.aqs-sw{width:15px;height:15px;border-radius:5px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.aqs-cn{font-size:12.5px;font-weight:500;letter-spacing:-.01em}
.aqs-chv{margin-left:auto;color:var(--muted);opacity:0;transition:opacity .13s}
.aqs-col:hover .aqs-chv{opacity:1}
.aqs-chv svg{width:12px;height:12px}
/* palette (portée sur <body>, positionnée en JS) */
.aqs-pal{position:absolute;z-index:100094;background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:8px;display:none;grid-template-columns:repeat(6,1fr);gap:5px}
.aqs-pal.aqs-on{display:grid}
.aqs-pal span{width:20px;height:20px;border-radius:6px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .12s}
.aqs-pal span:hover{transform:scale(1.14)}

.aqs-pv-f{border-top:1px solid var(--border);padding:9px 15px;display:flex;align-items:center;gap:8px}
.aqs-lk{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;font-size:12.5px;font-weight:600;color:var(--text-dim);transition:color .15s}
.aqs-lk:hover{color:var(--text)}
.aqs-lk svg{width:13px;height:13px}
.aqs-kbd{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ═══ 2. PAGE DE PARAMÈTRES ══════════════════════════════════════ */
@media(max-width:820px){}

/* ligne de réglage AVEC explication — c'est ce qu'un popover ne peut pas faire */

/* compte connecté / intégration */
/* état déconnecté */

/* destructif : texte rouge sur fond neutre, jamais un bouton rouge plein */


/* barre d'enregistrement — n'apparaît QUE si un champ a changé */
.aqs-dirty{position:fixed;left:50%;bottom:20px;z-index:100095;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;background:var(--text);color:var(--surface);border-radius:var(--r-lg);
  padding:9px 10px 9px 16px;box-shadow:var(--sh-lg);transition:opacity .22s,transform .26s cubic-bezier(.2,.75,.2,1)}
.aqs-dirty.aqs-on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.aqs-dirty-t{font-size:12.5px;font-weight:600}
.aqs-dirty-gho{border:0;background:transparent;color:color-mix(in srgb,var(--surface) 72%,transparent);font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:7px}
.aqs-dirty-gho:hover{background:rgba(255,255,255,.12);color:var(--surface)}
.aqs-dirty-sv{border:0;background:var(--surface);color:var(--text);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:7px}
.aqs-dirty-sv:disabled{opacity:.5;cursor:default}

@media(max-width:640px){
  .aqs-pv{position:fixed;left:10px;right:10px;top:auto;bottom:10px;width:auto;max-width:none}
  .aqs-pv::before{display:none}
}
@media(prefers-reduced-motion:reduce){.aqs *,.aqs-pv,.aqs-dirty,.aqs-tgl,.aqs-tgl::after{transition:none!important}}


/* [b2339] La fleche du kit est calee a droite (`right:12px`). Comme le
   popover est desormais place en position:fixed depuis l'ancre, elle doit
   se realigner sur le centre du ⚙ : le JS pose --aqs-arrow. */
.aqs-pv::before{ right:auto; left:var(--aqs-arrow,12px); }
.aqs-pv[data-side="left"]::before{ right:auto; left:var(--aqs-arrow,12px); }