/* Unicom-WG — Widget « Taux de change & convertisseur » [unicom_change] */
.u3x-w{
  --u3x-violet:#6b3a9e; --u3x-magenta:#b23a72; --u3x-or:#d4af37; --u3x-or-clair:#f1d77a; --u3x-nuit:#1b0f2c; --u3x-nuit-2:#241339;
  --u3x-up:#46d38a; --u3x-down:#ff7088; --u3x-ligne:rgba(255,255,255,.08);
  container-type:inline-size;
  width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; border-radius:10px; color:#fff;
  font-family:Roboto,Arial,sans-serif; line-height:1.25;
  background:radial-gradient(120% 60% at 100% 0%,#3a2160 0%,var(--u3x-nuit) 60%);
  border:1px solid rgba(212,175,55,.35); box-shadow:0 8px 24px rgba(27,15,44,.28);
}
.u3x-w *{box-sizing:border-box}
.u3x-w button,.u3x-w input,.u3x-w select{font-family:inherit}
.u3x-head{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:11px 14px;
  background:linear-gradient(120deg,var(--u3x-violet) 0%,var(--u3x-magenta) 100%)}
.u3x-head b{font-family:Spectral,Georgia,serif; font-size:17px}
.u3x-head small{font-size:11px; opacity:.9; white-space:nowrap}
.u3x-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:1px; background:#2ecc71; animation:u3xPulse 2s infinite}
@keyframes u3xPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.7)}70%{box-shadow:0 0 0 6px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}

/* Onglets de base */
.u3x-tabs{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--u3x-ligne)}
.u3x-tabs button{all:unset; box-sizing:border-box; cursor:pointer; text-align:center; padding:10px 4px 9px; font-size:13px; font-weight:500;
  color:rgba(255,255,255,.62); border-bottom:2px solid transparent}
.u3x-tabs button:hover{color:#fff; background:rgba(255,255,255,.03)}
.u3x-tabs button[aria-selected="true"]{color:var(--u3x-or-clair); border-bottom-color:var(--u3x-or)}

/* Pavé de référence */
.u3x-ref{display:flex; align-items:center; gap:12px; padding:14px 14px 12px}
.u3x-ref .u3x-c{width:40px; height:40px; flex:0 0 40px; font-size:15px}
.u3x-ref b{display:block; font-family:Spectral,Georgia,serif; font-size:20px}
.u3x-ref small{display:block; font-size:12px; margin-top:2px; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums}

/* Liste des taux */
.u3x-list{padding:0 8px 8px}
.u3x-row{display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 8px; border-radius:6px; transition:background .15s; background:var(--u3x-nuit)}
.u3x-poignee,.u3x-x{display:none}
/* Mode « Organiser » : poignée de déplacement et bouton de retrait sur chaque ligne */
.u3x-edit .u3x-row{grid-template-columns:20px 28px minmax(0,1fr) auto 22px; gap:8px; background:#22133a}
.u3x-edit .u3x-poignee{all:unset; display:grid; place-items:center; width:20px; height:30px; cursor:grab; color:var(--u3x-or-clair); font-size:15px; touch-action:none; border-radius:4px}
.u3x-edit .u3x-poignee:hover,.u3x-edit .u3x-poignee:focus-visible{background:rgba(212,175,55,.18); outline:none}
.u3x-edit .u3x-x{all:unset; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; cursor:pointer; color:var(--u3x-down); font-size:16px; line-height:1}
.u3x-edit .u3x-x:hover{background:rgba(255,112,136,.18); color:#fff}
.u3x-row.u3x-drag{position:relative; z-index:5; background:#3a2160; box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 1px var(--u3x-or); cursor:grabbing; transition:none}
.u3x-row.u3x-drag .u3x-poignee{cursor:grabbing}
.u3x-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 14px 10px; font-size:12px; color:rgba(255,255,255,.65)}
.u3x-bar label{display:flex; align-items:center; gap:6px}
.u3x-bar select{height:30px; border-radius:6px; border:1px solid rgba(212,175,55,.4); background:#241339; color:#fff; font-size:12.5px; padding:0 6px; outline:none}
.u3x-bar select option{color:#1b0f2c; background:#fff}
.u3x-org{all:unset; cursor:pointer; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:500; color:var(--u3x-or-clair); border:1px solid rgba(212,175,55,.45)}
.u3x-org:hover{background:rgba(212,175,55,.1)}
.u3x-org[aria-pressed="true"]{background:var(--u3x-or); color:var(--u3x-nuit); border-color:var(--u3x-or)}
.u3x-row + .u3x-row{border-top:1px solid var(--u3x-ligne)}
.u3x-row:hover{background:rgba(255,255,255,.04)}
.u3x-c{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:10.5px; font-weight:700; color:#fff; letter-spacing:-.2px}
.u3x-row b{display:block; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.u3x-row small{display:block; font-size:11px; color:rgba(255,255,255,.5)}
.u3x-vv{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.u3x-v{font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:600; padding:4px 9px; border-radius:5px; text-align:right; white-space:nowrap;
  border:1px solid transparent; transition:background-color .9s, color .9s}
.u3x-v.u3x-hausse{background:rgba(46,204,113,.16); color:#5fe39b; border-color:rgba(70,211,138,.4)}
.u3x-v.u3x-baisse{background:rgba(255,92,120,.15); color:#ff8aa0; border-color:rgba(255,112,136,.4)}
.u3x-v.u3x-neutre{background:rgba(212,175,55,.12); color:var(--u3x-or-clair); border-color:rgba(212,175,55,.3)}
.u3x-pct{font-size:10.5px; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1}
.u3x-pct.u3x-hausse{color:#46d38a} .u3x-pct.u3x-baisse{color:#ff7088} .u3x-pct.u3x-neutre{color:rgba(255,255,255,.45)}
.u3x-v.u3x-fu{background:rgba(70,211,138,.35); color:#fff; transition:none}
.u3x-v.u3x-fd{background:rgba(255,112,136,.35); color:#fff; transition:none}
.u3x-plus{display:block; width:100%; margin-top:4px; padding:8px; text-align:center; font-size:12.5px; color:var(--u3x-or-clair);
  background:none; border:1px dashed rgba(212,175,55,.35); border-radius:6px; cursor:pointer}
.u3x-plus:hover{background:rgba(212,175,55,.08)}

/* Convertisseur */
.u3x-conv{margin:4px 12px 12px; padding:12px; border-radius:8px; background:var(--u3x-nuit-2); border:1px solid rgba(212,175,55,.3)}
.u3x-conv h4{margin:0 0 10px; font-family:Spectral,Georgia,serif; font-size:15px; color:var(--u3x-or-clair)}
.u3x-in{display:flex; flex-direction:column; gap:6px; align-items:stretch}
.u3x-in .u3x-swap{align-self:center; margin:-2px 0}
.u3x-conv input,.u3x-conv select{width:100%; height:38px; border-radius:6px; border:1px solid rgba(212,175,55,.4); background:#1b0f2c; color:#fff; padding:0 9px; font-size:14px; outline:none}
.u3x-conv input{font-size:17px; font-variant-numeric:tabular-nums; margin-bottom:4px}
.u3x-conv select{font-size:13.5px}
.u3x-conv input:focus,.u3x-conv select:focus{border-color:var(--u3x-or); box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.u3x-swap{all:unset; cursor:pointer; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--u3x-or); color:var(--u3x-nuit); font-size:15px; font-weight:700; transition:transform .25s}
.u3x-swap:hover{transform:rotate(180deg)}
.u3x-res{margin-top:12px; text-align:center}
.u3x-res b{display:block; font-family:Spectral,Georgia,serif; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; word-break:break-word}
.u3x-res b span{font-family:Roboto,Arial,sans-serif; font-size:13px; color:var(--u3x-or-clair); font-weight:500; margin-left:4px}
.u3x-res small{display:block; margin-top:3px; font-size:11.5px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums}

.u3x-foot{padding:8px 14px; font-size:10.5px; color:rgba(255,255,255,.5); border-top:2px solid var(--u3x-or); background:rgba(0,0,0,.2)}
@media (prefers-reduced-motion:reduce){.u3x-dot{animation:none}}

/* Ajout d'une devise par le visiteur */
.u3x-add{padding:0 14px 12px}
.u3x-add select{width:100%; height:36px; border-radius:6px; border:1px dashed rgba(212,175,55,.55); background:rgba(212,175,55,.06); color:var(--u3x-or-clair);
  padding:0 10px; font-size:13px; cursor:pointer; outline:none}
.u3x-add select:focus{border-style:solid; border-color:var(--u3x-or); box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.u3x-add select option{color:#1b0f2c; background:#fff}
.u3x-conv select option{color:#1b0f2c; background:#fff}
.u3x-del{all:unset; cursor:pointer; color:var(--u3x-down); font-size:11px; text-decoration:underline}
.u3x-del:hover{color:#fff}

/* Champs du convertisseur : clairs et lisibles, protégés contre les styles « focus » du thème */
.u3x-w .u3x-conv input,.u3x-w .u3x-conv select,.u3x-w .u3x-conv input:focus,.u3x-w .u3x-conv select:focus,
.u3x-w .u3x-conv input:hover,.u3x-w .u3x-conv input:active{
  background:#fbf8ef !important; color:#1b0f2c !important; -webkit-text-fill-color:#1b0f2c !important; caret-color:#6b3a9e;
  border:1px solid rgba(212,175,55,.7) !important; outline:none !important; opacity:1 !important; filter:none !important}
.u3x-w .u3x-conv input:focus,.u3x-w .u3x-conv select:focus{box-shadow:0 0 0 3px rgba(212,175,55,.35) !important; border-color:#d4af37 !important}
.u3x-w .u3x-conv input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fbf8ef inset !important}
.u3x-w .u3x-conv input::selection{background:rgba(107,58,158,.3); color:#1b0f2c}
.u3x-w .u3x-bar select,.u3x-w .u3x-add select{-webkit-text-fill-color:currentColor}
.u3x-legende{display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:center; align-items:center; padding:2px 14px 10px; font-size:10.5px; color:rgba(255,255,255,.55)}
.u3x-legende span{white-space:nowrap}
.u3x-legende .u3x-leg-t{flex-basis:100%; text-align:center; order:-1; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.45)}
.u3x-legende i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:0}