/* ══════════════════════════════════════════════════════════════════════════
   ui-2026.css — socle visuel « 2026 » partagé par braquage et ses iframes

   POURQUOI UN <link> EN FIN DE <body> ET PAS DANS LE <head> ?
   braquage.html porte 4 blocs <style> inline (l.13, 3536, 12770, 13873) et
   js/braquage-yousign-send.js en injecte un 5e dans le <head> à l'exécution.
   À spécificité égale, c'est la dernière règle du document qui gagne : depuis
   le <head>, ce fichier perdrait contre tous. Il est donc chargé en fin de
   <body>. Le <link rel="preload"> du <head> ne sert qu'à démarrer le
   téléchargement tôt (évite un flash de page non stylée).

   RÈGLES DU FICHIER — à respecter pour toute évolution :
   1. Jamais de sélecteur d'élément nu (input, button, select, table…).
      Toujours ancré sur une classe. C'est ce qui protège les micro-champs
      des tableaux (.pct-input-pct 60px, .adminv3beta-input 44px) qui sont
      nus dans des <td> et doivent le rester.
   2. Nouvelles classes préfixées .ui-, nouveaux tokens --ui-.
   3. Un « adaptateur » REPEINT une classe existante (couleurs, rayons,
      ombres, transitions). Il ne change jamais display, grid-template-columns,
      position d'un conteneur de mise en page, ni l'ordre du DOM.
   4. !important uniquement face à un !important legacy ou à un style="…"
      inline posé en JS — avec un commentaire disant lequel.

   Référence visuelle : la fiche collaborateur (.eqm2-* dans braquage.html).
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. TOKENS ══════════════════════════════════════════════════════════
   Dérivés des tokens existants (:root de chaque page), jamais de hex quand
   une variable existe déjà. */

:root {
  /* Rayons — plus généreux que le legacy, c'est la signature du style 2026 */
  --ui-radius-field: 13px;
  --ui-radius-btn:   11px;
  --ui-radius-modal: 22px;

  /* Champs : fond doux au repos, blanc au focus */
  --ui-field-bg:    var(--bg-hover, #faf9f7);
  --ui-field-bg-on: var(--bg-card, #fff);
  --ui-field-bd:    var(--border-light, #f0eeea);
  --ui-halo:        0 0 0 3.5px rgba(91, 91, 246, .13);

  /* Micro-label des champs */
  --ui-label-size:  9.5px;
  --ui-label-track: .07em;
  --ui-pad-top:     24px;   /* place réservée au label dans le champ */

  /* Élévations */
  --ui-shadow-modal: 0 0 0 1px rgba(26, 26, 46, .05), 0 32px 90px rgba(26, 26, 46, .28);
  --ui-shadow-soft:  0 1px 3px rgba(26, 26, 46, .14);
  --ui-shadow-btn:   0 4px 12px rgba(91, 91, 246, .25);

  /* Motion */
  --ui-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ui-out:    cubic-bezier(.22, 1, .36, 1);
}


/* ═══ 2. PRIMITIVES .ui-* ════════════════════════════════════════════════
   (ajoutées au fil des étapes : hero, onglets, champ, segment, timeline) */


/* Hero : bandeau d'identite en tete d'un ecran ou d'une modale. Reprend le
   principe de la fiche collaborateur — avatar, titre, pastilles d'info — avec
   une couleur d'accent posee par le JS via --ui-accent. */
.ui-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  margin-bottom: 14px;
  border-radius: 16px;
  background:
    radial-gradient(130% 160% at 0% 0%, var(--ui-tint, var(--primary-light, #eeefff)) 0%, rgba(255,255,255,0) 62%),
    var(--bg-card, #fff);
  box-shadow: inset 0 0 0 1px var(--border-light, #f0eeea);
  overflow: hidden;
}
.ui-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ui-accent, var(--primary, #5b5bf6));
}
.ui-hero-ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 19px;
  color: #fff;
  background: linear-gradient(140deg, var(--ui-accent, #5b5bf6), var(--ui-accent2, #8b8bf7));
  box-shadow: 0 6px 16px var(--ui-glow, rgba(91, 91, 246, .28));
}
.ui-hero-body { min-width: 0; flex: 1; }
.ui-hero-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-hero-title.vide { color: var(--text-muted, #64748b); font-weight: 600; font-style: italic; }
.ui-hero-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-muted, #64748b);
}
.ui-chip i { font-size: 12px; }
.ui-chip.ok { background: var(--status-success-bg, #e6f4ec); color: var(--tag-ohm, #2a7a4f); }
.ui-chip.att { background: var(--status-warning-bg, #fef3e2); color: var(--tag-eni, #8b5a1a); }

.ui-hero-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  opacity: .85;
}
.ui-hero-save.ok { color: var(--success, #0fa47a); }
.ui-hero-save .spin { animation: spin .9s linear infinite; }

/* Titre de section : remplace .edit-section-title, avec une icone */
.ui-sect {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.ui-sect::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light, #f0eeea);
}
.ui-sect i { font-size: 13px; opacity: .75; }

/* ═══ 3. ADAPTATEURS legacy → 2026 ═══════════════════════════════════════
   (ajoutés au fil des étapes) */


/* ── 3.1 Coquille des modales ────────────────────────────────────────────
   Une seule passe pour les 18 modales du produit : les 9 en .cfg-modal, les
   3 de la vue Equipes (.eqm-modal), la popup Admin v3 BETA, la modale
   d'envoi Yousign (.yss-modal, construite en JS) et le confirm Yousign.
   On ne touche qu'a l'apparence : ni display, ni flex-direction, ni
   max-width — la mise en page interne de chaque modale est preservee. */

.cfg-modal-ov,
.eqm-overlay,
#adminv3beta-modal,
.yss-overlay,
.ys-confirm-overlay {
  background: rgba(26, 26, 46, .5);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

.cfg-modal,
.eqm-modal,
.adminv3beta-popup,
.yss-modal,
.ys-confirm-box {
  border-radius: var(--ui-radius-modal);
  box-shadow: var(--ui-shadow-modal);
  animation: ui-pop .34s var(--ui-spring);
  overflow: hidden;   /* les coins arrondis rognent proprement header et pied */
}

/* En-tetes : plus d'air, filet plus discret */
.cfg-modal-hd,
.eqm-hd,
.yss-hd,
.adminv3beta-hd {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-light, #f0eeea);
}
.cfg-modal-title,
.eqm-hd-title,
.yss-hd-title,
.adminv3beta-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Boutons de fermeture : meme geste partout (rotation au survol) */
.cfg-modal-x,
.eqm-hd-close,
.yss-hd-close {
  border-radius: 10px;
  color: var(--text-muted, #64748b);
  transition: background .16s, color .16s, transform .18s var(--ui-out);
}
.cfg-modal-x:hover,
.eqm-hd-close:hover,
.yss-hd-close:hover {
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text, #1a1a2e);
  transform: rotate(90deg);
}

/* Corps + pied : le pied se pose sur un fond doux, comme la fiche collaborateur */
.cfg-modal-body,
.cfg-modal-bd,
.eqm-body,
.yss-body {
  padding: 20px 22px;
}
.cfg-modal-ft,
.eqm-ft,
.yss-ft {
  padding: 14px 22px;
  border-top: 1px solid var(--border-light, #f0eeea);
  background: var(--bg-hover, #faf9f7);
}
/* .cfg-modal-ft n'avait pas de bordure haute : sans marge, le fond doux
   se colle au corps et fait bien barre d'actions. */
.cfg-modal-ft { margin-top: 0; }

/* Surfaces flottantes (popovers, menus) : meme famille visuelle */
.del-popover,
.ddf-picker,
.tag-popover,
.ctx-reclass,
.form-dropdown,
.comm-ac-dropdown,
.rc-comm-dropdown,
.ys-status-menu {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(26, 26, 46, .05), 0 12px 34px rgba(26, 26, 46, .16);
}

.cfg-toast {
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(26, 26, 46, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}


/* ── 3.2 Boutons ─────────────────────────────────────────────────────────
   Meme geste partout : rayon 11px, leger soulevement au survol, enfoncement
   au clic. Les boutons sont enumeres un par un — jamais de selecteur nu, et
   surtout jamais [class^="btn-"], qui attraperait aussi les gradients
   fournisseurs (.btn-engie, .btn-ohm…) qu'on veut preserver tels quels. */

.cfg-btn-primary,
.cfg-btn-ghost,
.cfg-btn-icon,
.cfg-btn-add,
.eqm-btn-primary,
.eqm-btn-ghost,
.eqm2-btn-save,
.eqm2-btn-ghost,
.v3-add-btn,
.v3-icon-btn,
.v3-edit-btn,
.pct-holdings-add,
.pct-holdings-btn-del,
.btn-add-pdl,
.btn-add-email-cfg,
.btn-refresh,
.btn-icon-ghost,
.ys-btn-validate,
.ys-btn-cancel,
.ys-btn-resend,
.ys-btn-dl,
.ys-ic-btn,
.ys-pg-btn,
.yss-btn-send,
.yss-btn-reset,
.login-btn {
  border-radius: var(--ui-radius-btn);
  transition: background .18s var(--ui-out), border-color .18s var(--ui-out),
              color .18s var(--ui-out), transform .18s var(--ui-out),
              box-shadow .18s var(--ui-out), opacity .18s;
}

/* Soulevement au survol, uniquement sur les boutons d'action */
.cfg-btn-primary:hover:not(:disabled),
.eqm-btn-primary:hover:not(:disabled),
.eqm2-btn-save:hover:not(:disabled),
.yss-btn-send:hover:not(:disabled),
.v3-add-btn:hover:not(:disabled),
.login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(91, 91, 246, .3);
}
.cfg-btn-primary:active:not(:disabled),
.cfg-btn-ghost:active:not(:disabled),
.eqm-btn-primary:active:not(:disabled),
.eqm2-btn-save:active:not(:disabled),
.yss-btn-send:active:not(:disabled),
.login-btn:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}

/* Boutons secondaires : la bordure se reveille au survol */
.cfg-btn-ghost:hover:not(:disabled),
.eqm-btn-ghost:hover:not(:disabled),
.eqm2-btn-ghost:hover:not(:disabled) {
  border-color: var(--border-alt, #e2e8f0);
  color: var(--text-slate, #334155);
}

/* Gros boutons de lancement des bots : on garde les gradients fournisseurs,
   on n'harmonise que le rayon et la reponse au clic. */
.btn-launch,
.btn-launch-bot,
.btn-mini,
.btn-mini-ok,
.btn-mini-del,
.btn-mini-undo,
.btn-fournisseur,
.btn-doc,
.btn-doc-add,
.btn-copy,
.btn-dl-prog,
.btn-dl-attente,
.dl-pill {
  border-radius: 13px;
}
.btn-launch:active:not(:disabled),
.btn-launch-bot:active:not(:disabled),
.btn-mini:active:not(:disabled) { transform: scale(.98); }


/* ── 3.3 Champs sans wrapper ─────────────────────────────────────────────
   Ceux qui n'ont pas de <label> a eux : recherche, zones de saisie libres,
   champs construits en JS. Ils recoivent l'apparence 2026 (fond doux, rayon
   13px, halo violet au focus) mais PAS le label flottant — ils n'ont rien a
   faire flotter.

   NE SONT VOLONTAIREMENT PAS LISTES : .pct-input-pct (60px),
   .pct-bonus-input-*, .adminv3beta-input (44px), .teq-input, .tbl-cell-input.
   Ce sont des cellules de tableau de quelques dizaines de pixels : le fond
   doux et le gros rayon les rendraient illisibles. Elles gardent leur style
   compact, l'en-tete de colonne leur sert de label. */

.eqm-inp,
.form-input,
.crm-textarea,
.eq-search-input,
.ipk-search,
.ys-search-wrap input,
.yss-inp,
.cfg-input,          /* classe orpheline (6 champs du Pricer) : definie ici, elle
                        cesse d'etre un piege et suit le reste */
.login-field {
  background-color: var(--ui-field-bg);
  border: 1.5px solid var(--ui-field-bd);
  border-radius: var(--ui-radius-field);
  font-family: inherit;
  color: var(--text, #1a1a2e);
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
.eqm-inp:hover,
.form-input:hover,
.crm-textarea:hover,
.eq-search-input:hover,
.yss-inp:hover,
.cfg-input:hover,
.login-field:hover { border-color: var(--border-alt, #e2e8f0); }

.eqm-inp:focus,
.form-input:focus,
.crm-textarea:focus,
.eq-search-input:focus,
.ipk-search:focus,
.yss-inp:focus,
.cfg-input:focus,
.login-field:focus {
  background-color: var(--ui-field-bg-on);
  border-color: var(--primary, #5b5bf6);
  box-shadow: var(--ui-halo);
  outline: none;
}


/* ── 3.4 Champs a label flottant ─────────────────────────────────────────
   .cfg-field, .edit-field et .crm-field ont deja la bonne structure :
       <div class="cfg-field"><label>Prenom</label><input></div>
   On epingle le label DANS le champ (micro-capitale en haut) et on reserve
   la place avec un padding-top. C'est le style de la fiche collaborateur.

   Pas de « material label » qui remonte au focus : le label est toujours
   visible. Consequence : aucun besoin de :placeholder-shown, donc aucun
   probleme avec les <select>, les dates, l'autofill ou les valeurs posees
   en JS sans evenement.

   DOUBLE GARDE — le flottant ne s'active que si le conteneur a un <label>
   DIRECT *et* un controle DIRECT. Sans elle :
     · .cfg-field « Couleur » (une div de pastilles) aurait 24px de vide ;
     · .edit-field « Type » (deux <label><input radio>) verrait ses trois
       labels empiles au meme endroit.
   Le combinateur « > » est indispensable partout pour la meme raison. */

/* Certains champs ont leur <input> imbrique dans une div (autocomplete « Duo »
   et « Mentor », par ex.) : la double garde les laisse de cote, et sans cette
   regle ils resteraient plats a cote de leurs voisins. Ils recoivent donc le
   skin, mais pas le label flottant ni le padding qui va avec.
   :where() garde la specificite au plancher, la regle flottante passe devant. */
:where(.cfg-field, .edit-field, .crm-field) :is(input, select, textarea):not(:where(
    [type=file], [type=checkbox], [type=radio], [type=hidden],
    [type=color], [type=range], [type=submit], [type=button])) {
  background-color: var(--ui-field-bg);
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--ui-field-bd);
  border-radius: var(--ui-radius-field);
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
:where(.cfg-field, .edit-field, .crm-field) :is(input, select, textarea):focus {
  background-color: var(--ui-field-bg-on);
  border-color: var(--primary, #5b5bf6);
  box-shadow: var(--ui-halo);
  outline: none;
}

:is(.cfg-field, .edit-field, .crm-field):not(.ui-plain):has(> label):has(> :is(input, select, textarea)) {
  position: relative;
}

:is(.cfg-field, .edit-field, .crm-field):not(.ui-plain):has(> label):has(> :is(input, select, textarea)) > label {
  position: absolute;
  top: 8px;
  left: 13px;
  z-index: 1;
  pointer-events: none;        /* le clic traverse et donne le focus au champ */
  margin: 0;
  max-width: calc(100% - 26px);
  font-size: var(--ui-label-size);
  font-weight: 700;
  letter-spacing: var(--ui-label-track);
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}
:is(.cfg-field, .edit-field, .crm-field):not(.ui-plain):focus-within > label {
  color: var(--primary, #5b5bf6);
}

/* Les indicateurs de statut glisses dans le label (SIRET verifie, RS
   trouvee...) portent un style="font-size" pose en JS par _rcFmtSiret /
   _rcLookupSiret : d'ou le !important, seule facon de battre un style inline. */
:is(.cfg-field, .edit-field, .crm-field) > label :is(span, i) {
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 1px;
}

/* Le controle lui-meme. La liste d'exclusion passe par :not(:where(...)) :
   :where() ne pese rien en specificite, la regle reste facile a surclasser. */
:is(.cfg-field, .edit-field, .crm-field):not(.ui-plain):has(> label) > :is(
    input:not(:where([type=file], [type=checkbox], [type=radio], [type=hidden],
                     [type=color], [type=range], [type=submit], [type=button])),
    select, textarea) {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text, #1a1a2e);
  background-color: var(--ui-field-bg);
  /* border-* separes, JAMAIS le raccourci « border » : _rcLookupSiret pose un
     style.borderColor vert/rouge en inline pour signaler la validation du
     SIRET, il doit continuer a gagner. */
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--ui-field-bd);
  border-radius: var(--ui-radius-field);
  padding: var(--ui-pad-top) 12px 8px;
  outline: none;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
:is(.cfg-field, .edit-field, .crm-field) > :is(input, select, textarea):hover {
  border-color: var(--border-alt, #e2e8f0);
}
:is(.cfg-field, .edit-field, .crm-field) > :is(input, select, textarea):focus {
  background-color: var(--ui-field-bg-on);
  border-color: var(--primary, #5b5bf6);
  box-shadow: var(--ui-halo);
}

/* Les placeholders sont des exemples de format (« 14 chiffres »,
   « ex: 18 (>36 = C4) ») : utiles pendant la saisie, du bruit le reste du
   temps maintenant que le label est dans le champ. On les revele au focus. */
:is(.cfg-field, .edit-field, .crm-field) > :is(input, textarea)::placeholder {
  color: var(--text-muted, #64748b);
  opacity: 0;
  transition: opacity .18s;
}
:is(.cfg-field, .edit-field, .crm-field) > :is(input, textarea):focus::placeholder {
  opacity: .55;
}

/* <select> : WebKit ignore le padding-top tant que l'apparence native est
   active. appearance:none le corrige, et on redessine le chevron. */
:is(.cfg-field, .edit-field, .crm-field):not(.ui-plain):has(> label) > select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  height: auto;
  line-height: 1.2;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

/* <input type=date> : WebKit centre son contenu et impose sa hauteur. */
:is(.cfg-field, .edit-field, .crm-field):not(.ui-plain):has(> label) > input[type=date] {
  min-height: 48px;
}
:is(.cfg-field, .edit-field, .crm-field) > input[type=date]::-webkit-datetime-edit { padding: 0; }
:is(.cfg-field, .edit-field, .crm-field) > input[type=date]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
}

/* <textarea> : aucun n'est dans un wrapper aujourd'hui, regle preventive. */
:is(.cfg-field, .edit-field, .crm-field):not(.ui-plain):has(> label) > textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
}

/* Sortie de secours : sur un champ trop etroit pour porter un label flottant,
   ajouter la classe « ui-plain » dans le HTML rend son label a sa place. */
:is(.cfg-field, .edit-field, .crm-field).ui-plain > label {
  position: static;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: auto;
  margin-bottom: 3px;
}


/* ── 3.5 Interrupteurs ───────────────────────────────────────────────────
   Cinq implementations coexistent (.mode-toggle, .eqm-toggle, .pct-toggle,
   .v3-etat-toggle, .pct-tabs). Elles ont toutes la meme forme : un conteneur
   et des <button> dont l'actif porte une classe. On leur donne le meme
   vocabulaire que .eqm2-seg : piste creusee, pastille blanche pour l'actif.
   La pastille COULISSANTE demande un index pilote en JS : ce sera pour la
   refonte des ecrans, pas ici. */

.mode-toggle,
.eqm-toggle,
.pct-toggle,
.pct-tabs,
.v3-etat-toggle {
  background: var(--bg-secondary, #f1f5f9);
  border: none;
  border-radius: 13px;
  padding: 3px;
  gap: 2px;
}
.mode-toggle button,
.eqm-toggle .eqm-toggle-btn,
.pct-toggle button,
.pct-tabs button,
.v3-etat-toggle .v3-etat-pill {
  border-radius: 10px;
  transition: background .2s var(--ui-out), color .2s var(--ui-out),
              box-shadow .2s var(--ui-out);
}
/* L'actif : pastille blanche posee sur la piste. Les toggles porteurs de sens
   (live/test en vert/orange, .active du pct en violet) gardent leur couleur. */
.eqm-toggle .eqm-toggle-btn.active,
.pct-toggle button.active,
.pct-tabs button.active,
.v3-etat-toggle .v3-etat-pill.on {
  box-shadow: var(--ui-shadow-soft);
}


/* ── 3.6 Tableaux et pastilles de filtre ─────────────────────────────────
   ATTENTION : ne jamais toucher au « position: sticky; top: 72px » des
   thead de .sv-table ni a l'overflow: clip de .sv-table-wrap (un
   overflow:hidden casserait le sticky). On ne repeint que les couleurs. */

.sv-table-wrap {
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(26, 26, 46, .04), 0 2px 10px rgba(26, 26, 46, .05);
}
.sv-table thead th,
.pct-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.sv-table tbody tr,
.pct-table tbody tr { transition: background .14s; }

.sv-pill,
.pct-pill,
.eq-filter-btn {
  border-radius: 999px;
  transition: background .16s, border-color .16s, color .16s, transform .16s var(--ui-out);
}
.sv-pill:hover:not(.active),
.pct-pill:hover:not(.active) { background: var(--bg-hover, #faf9f7); }
.sv-pill.active,
.pct-pill.active { box-shadow: 0 1px 4px rgba(91, 91, 246, .18); }

.sv-tag,
.eq-tag,
.eqm2-chip { border-radius: 999px; }


/* ── 3.7 Chrome applicatif ───────────────────────────────────────────────
   Sidebar et topbar : visibles en permanence, donc traites en dernier et
   avec retenue — on ne veut pas d'un menu qui bouge sous la souris. */

.nav-item {
  border-radius: 12px;
  transition: background .16s var(--ui-out), color .16s var(--ui-out);
}
.nav-sub-item { border-radius: 10px; }

.sidebar-profile-av,
.cot-comm-av,
.comm-av,
.ipk-initials,
.pick-av { border-radius: 11px; }

.card,
.eq-card,
.pct-holdings-card,
.result-card { border-radius: 16px; }


/* ── 3.8 Champs de la modale d'envoi Yousign ─────────────────────────────
   .yss-field a la meme forme que .cfg-field, avec un <span class="yss-label">
   a la place du <label>. Meme traitement, donc, et toujours sans toucher au
   JS qui construit la modale.
   Les champs a label vide (_mkField('', ...)) sont ecartes par :not(:empty) :
   un micro-label vide laisserait juste un trou en haut du champ. */

.yss-field:has(> .yss-label:not(:empty)):has(> .yss-inp) { position: relative; }

.yss-field:has(> .yss-label:not(:empty)) > .yss-label {
  position: absolute;
  top: 8px;
  left: 13px;
  z-index: 1;
  pointer-events: none;
  max-width: calc(100% - 26px);
  padding: 0;
  font-size: var(--ui-label-size);
  font-weight: 700;
  letter-spacing: var(--ui-label-track);
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}
.yss-field:focus-within > .yss-label { color: var(--primary, #5b5bf6); }

.yss-field:has(> .yss-label:not(:empty)) > .yss-inp {
  padding: var(--ui-pad-top) 12px 8px;
}
/* Le placeholder redevient utile au focus, comme ailleurs */
.yss-field:has(> .yss-label:not(:empty)) > .yss-inp::placeholder {
  opacity: 0;
  transition: opacity .18s;
}
.yss-field:has(> .yss-label:not(:empty)) > .yss-inp:focus::placeholder { opacity: .55; }

/* Champ a label vide : pas de flottant, mais la meme hauteur que ses voisins
   pour que les lignes restent alignees. */
.yss-field:has(> .yss-label:empty) > .yss-inp { padding: 14px 12px; }


/* ═══ 4. OVERRIDES CIBLÉS ════════════════════════════════════════════════
   Les rares sélecteurs legacy trop spécifiques pour être battus par l'ordre
   du document seul. Chacun cite la règle qu'il surclasse. */


/* La vue Lancer est la plus dense du produit : ses champs sont compactes par
   « .rc-card .edit-field input { padding: 5px 8px } » (braquage.html l.911),
   dont la specificite (0,2,1) bat notre adaptateur. On repasse devant, avec un
   padding un peu plus serre qu'ailleurs pour limiter l'allongement de la carte. */
.rc-card .edit-field:has(> label):has(> :is(input, select, textarea)) > input,
.rc-card .edit-field:has(> label):has(> :is(input, select, textarea)) > select {
  padding: 21px 11px 7px;
}
.rc-card .edit-field:has(> label):has(> :is(input, select, textarea)) {
  margin-bottom: 9px;
}


/* ═══ 5. MOTION ══════════════════════════════════════════════════════════ */

@keyframes ui-pop  { from { opacity: 0; transform: translateY(18px) scale(.965); }
                     to   { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; transform: translateY(7px); }
                     to   { opacity: 1; transform: none; } }

/* braquage.html a déjà ce garde-fou, mais les iframes non : on le redouble
   ici pour que le fichier reste autonome partout où il est chargé. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}