/* Unicom-WG — Currency & Markets Desk [unicom_devises] */
.u3d-desk{
  --u3d-violet:#6b3a9e; --u3d-violet-2:#8b4fc4; --u3d-magenta:#b23a72;
  --u3d-or:#d4af37; --u3d-or-clair:#f1d77a; --u3d-nuit:#1b0f2c; --u3d-nuit-2:#241339; --u3d-nuit-3:#2d1a47;
  --u3d-up:#46d38a; --u3d-down:#ff7088; --u3d-ligne:rgba(255,255,255,.08); --u3d-gris:rgba(255,255,255,.58);
  container-type:inline-size;
  width:100%; max-width:100%; box-sizing:border-box; margin:18px 0 0; overflow:hidden;
  border-radius:10px; color:#fff; font-family:Roboto,Arial,sans-serif; line-height:1.25;
  background:radial-gradient(90% 60% at 100% 0%,#3a2160 0%,var(--u3d-nuit) 60%);
  border:1px solid rgba(212,175,55,.35); box-shadow:0 10px 30px rgba(27,15,44,.3);
}
.u3d-desk *{box-sizing:border-box}
.u3d-desk button,.u3d-desk input,.u3d-desk select{font-family:inherit}
.u3d-up{color:var(--u3d-up)} .u3d-down{color:var(--u3d-down)}

/* En-tête */
.u3d-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 18px; background:linear-gradient(120deg,var(--u3d-violet) 0%,var(--u3d-magenta) 100%)}
.u3d-head h3{margin:0; font-family:Spectral,Georgia,serif; font-size:19px; font-weight:700; color:#fff; line-height:1.2}
.u3d-head h3 small{display:block; font-family:Roboto,Arial,sans-serif; font-size:11.5px; font-weight:400; opacity:.88; margin-top:2px}
.u3d-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:2px; background:#2ecc71; animation:u3dPulse 2s infinite}
@keyframes u3dPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.7)}70%{box-shadow:0 0 0 7px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.u3d-heure{font-size:12px; opacity:.9; font-variant-numeric:tabular-nums}

/* Tuiles */
.u3d-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--u3d-ligne)}
.u3d-tile{padding:14px 16px 12px; border-right:1px solid var(--u3d-ligne); position:relative}
.u3d-tile:last-child{border-right:0}
.u3d-tile-top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px}
.u3d-tile-top b{display:flex; align-items:center; gap:7px; font-weight:500; white-space:nowrap}
.u3d-tile-top span{font-variant-numeric:tabular-nums; white-space:nowrap; color:rgba(255,255,255,.85)}
.u3d-tile-pct{display:flex; align-items:baseline; gap:6px; margin-top:6px; font-family:Spectral,Georgia,serif; font-size:24px; font-weight:700}
.u3d-tile-pct{flex-wrap:wrap} .u3d-np{white-space:nowrap}
.u3d-tile-pct small{font-family:Roboto,Arial,sans-serif; font-size:12px; font-weight:400; opacity:.9}
.u3d-tile svg{display:block; width:100%; height:26px; margin-top:6px}

/* Pastilles devises */
.u3d-cur{display:inline-grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%;
  font-size:10.5px; font-weight:700; color:#fff; background:var(--u3d-violet-2); letter-spacing:-.2px}

/* Sections */
.u3d-sec{padding:16px 18px; border-bottom:1px solid var(--u3d-ligne)}
.u3d-sec-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.u3d-sec-head h4{margin:0; font-family:Spectral,Georgia,serif; font-size:17px; color:var(--u3d-or-clair); font-weight:700}
.u3d-sec-head small{font-size:11.5px; color:var(--u3d-gris)}

/* Matrice des devises */
.u3d-mx-wrap{overflow-x:auto; border-radius:8px; border:1px solid var(--u3d-ligne)}
.u3d-mx{width:100%; min-width:720px; border-collapse:collapse; font-variant-numeric:tabular-nums}
.u3d-mx th,.u3d-mx td{padding:10px 8px; text-align:center; border-bottom:1px solid var(--u3d-ligne); border-right:1px solid var(--u3d-ligne); font-size:13px}
.u3d-mx tr:last-child td,.u3d-mx tr:last-child th{border-bottom:0}
.u3d-mx th:last-child,.u3d-mx td:last-child{border-right:0}
.u3d-mx thead th{background:var(--u3d-nuit-3); font-weight:500; font-size:12.5px; position:sticky; top:0}
.u3d-mx tbody th{background:var(--u3d-nuit-3); font-weight:500; text-align:left; white-space:nowrap; position:sticky; left:0; z-index:1}
.u3d-mx th > span{display:inline-flex; align-items:center; gap:7px}
.u3d-mx td{background:rgba(255,255,255,.015)}
.u3d-mx td.u3d-diag{background:repeating-linear-gradient(135deg,rgba(212,175,55,.1) 0 6px,rgba(212,175,55,.04) 6px 12px)}
.u3d-mx td small{display:block; font-size:10px; margin-top:2px}
.u3d-mx td.u3d-na{color:var(--u3d-gris)}
.u3d-mx .u3d-hl{background:rgba(139,79,196,.14)}
.u3d-mx td.u3d-x{background:rgba(212,175,55,.22); box-shadow:inset 0 0 0 1px var(--u3d-or)}
.u3d-mx tbody tr:hover th{color:var(--u3d-or-clair)}
/* Clignotement à chaque changement de cours : la case s'allume puis s'éteint en fondu */
.u3d-mx td{transition:background-color .9s ease-out, box-shadow .9s ease-out}
.u3d-mx td.u3d-flash-up{background-color:rgba(70,211,138,.62)!important; box-shadow:inset 0 0 0 2px #46d38a; transition:none}
.u3d-mx td.u3d-flash-down{background-color:rgba(255,112,136,.62)!important; box-shadow:inset 0 0 0 2px #ff7088; transition:none}
.u3d-mx td.u3d-flash-up small,.u3d-mx td.u3d-flash-down small{color:#fff}
[data-t="px"]{transition:color .9s ease-out}
[data-t="px"].u3d-flash-up{color:#46d38a!important; transition:none}
[data-t="px"].u3d-flash-down{color:#ff7088!important; transition:none}
.u3d-dot.u3d-tic{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.35)}

/* Convertisseur */
.u3d-conv{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:16px; align-items:start}
.u3d-conv-in{display:flex; gap:8px}
.u3d-conv-in input,.u3d-conv-in select{height:42px; border-radius:7px; border:1px solid rgba(212,175,55,.45); background:var(--u3d-nuit-2);
  color:#fff; font-size:16px; padding:0 12px; outline:none}
.u3d-conv-in input{flex:1 1 auto; min-width:0; font-variant-numeric:tabular-nums}
.u3d-conv-in select{flex:0 0 92px; cursor:pointer}
.u3d-conv-in input:focus,.u3d-conv-in select:focus{border-color:var(--u3d-or); box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.u3d-conv-out{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.u3d-conv-out div{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:7px; background:var(--u3d-nuit-2); border:1px solid var(--u3d-ligne)}
.u3d-conv-out b{display:block; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.u3d-conv-out small{display:block; font-size:10.5px; color:var(--u3d-gris)}
.u3d-conv-note{margin-top:8px; font-size:11px; color:var(--u3d-gris)}

/* Carte de chaleur CAC 40 */
.u3d-cac-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; font-size:12.5px}
.u3d-cac-bar .u3d-ratio{flex:1 1 220px; height:8px; border-radius:4px; overflow:hidden; display:flex; background:rgba(255,255,255,.08)}
.u3d-ratio i{display:block; height:100%; transition:width .6s ease}
.u3d-ratio i:first-child{background:var(--u3d-up)} .u3d-ratio i:last-child{background:var(--u3d-down); margin-left:auto}
.u3d-sort{display:inline-flex; gap:4px; flex-wrap:wrap}
.u3d-sort button{all:unset; cursor:pointer; padding:5px 10px; border-radius:5px; font-size:12px; font-weight:500; color:rgba(255,255,255,.7); background:rgba(255,255,255,.05)}
.u3d-sort button:hover{background:rgba(255,255,255,.1); color:#fff}
.u3d-sort button[aria-pressed="true"]{background:var(--u3d-or); color:var(--u3d-nuit)}
.u3d-sort button:focus-visible{outline:2px solid #fff; outline-offset:1px}
.u3d-heat{display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:6px}
.u3d-cell{position:relative; padding:9px 10px 8px; border-radius:6px; min-height:74px; overflow:hidden;
  background:var(--u3d-nuit-2); border:1px solid rgba(255,255,255,.05); transition:background .5s, transform .15s}
.u3d-cell:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.25)}
.u3d-cell b{display:block; font-size:13px; font-weight:700; letter-spacing:.3px}
.u3d-cell em{display:block; font-style:normal; font-size:11px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.u3d-cell span{display:flex; justify-content:space-between; align-items:baseline; gap:4px; margin-top:6px; font-variant-numeric:tabular-nums}
.u3d-cell span i{font-style:normal; font-size:12px; opacity:.92}
.u3d-cell span strong{font-size:13.5px}
.u3d-cell{transition:background .5s, transform .15s, box-shadow 1.8s ease-out}
.u3d-cell.u3d-flash-up{box-shadow:0 0 0 2px #fff, 0 0 14px 2px var(--u3d-up); transition:none}
.u3d-cell.u3d-flash-down{box-shadow:0 0 0 2px #fff, 0 0 14px 2px var(--u3d-down); transition:none}

.u3d-foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 18px; font-size:11px; color:rgba(255,255,255,.5);
  border-top:2px solid var(--u3d-or); background:rgba(0,0,0,.2)}

@container (max-width:760px){
  .u3d-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u3d-tile:nth-child(2){border-right:0}
  .u3d-tile:nth-child(-n+2){border-bottom:1px solid var(--u3d-ligne)}
  .u3d-conv{grid-template-columns:1fr}
  .u3d-tile{padding:12px}
  .u3d-tile-pct{font-size:21px}
  .u3d-tile-top span{font-size:11.5px}
}
@container (max-width:420px){
  .u3d-heat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u3d-sec{padding:14px 12px}
}
@media (prefers-reduced-motion:reduce){.u3d-dot{animation:none}}

/* Bandeaux de la page (variante dans le contenu) */
.u3i-row--cac .u3i-ico{font-size:12px; letter-spacing:-.3px}
.u3i-row--fx{background:var(--u3i-nuit-2,#120a1f); border-top:1px solid rgba(139,79,196,.35)}
.u3i-row--fx .u3i-tag{background:linear-gradient(135deg,#3a1d5c 0%,var(--u3i-violet,#6b3a9e) 100%)}
.u3i-row--fx .u3i-ico{background:var(--u3i-violet-2,#8b4fc4); color:#fff}

/* Diagnostic (?u3d-debug=1) */
.u3d-debug{margin:0; padding:12px 18px; font:12px/1.6 ui-monospace,Consolas,monospace; background:#0d0718; color:#ddd; border-top:1px dashed rgba(212,175,55,.5)}
.u3d-debug b{color:#f1d77a}
.u3d-debug button{margin-left:10px; padding:4px 10px; border-radius:5px; border:1px solid #d4af37; background:transparent; color:#f1d77a; cursor:pointer; font:inherit}

/* Matrice TradingView intégrée */
/* Le widget TradingView est en thème sombre (fond noir). En mode de fusion « screen »,
   le noir devient la couleur du fond placé dessous : la grille prend les teintes aubergine
   du site, le texte reste blanc et les clignotements vert/rouge restent bien visibles. */
.u3d-tv{position:relative; isolation:isolate; border-radius:8px; overflow:hidden; border:1px solid rgba(212,175,55,.35);
  background:linear-gradient(180deg,#2d1a47 0, #2d1a47 50px, #1f1133 50px, #1b0f2c 100%)}
.u3d-tv iframe{display:block; width:100%; height:var(--u3d-tv-h,430px); border:0; background:transparent; mix-blend-mode:screen}
.u3d-tv.u3d-tv-brut iframe{mix-blend-mode:normal}
@container (max-width:620px){ .u3d-tv iframe{height:var(--u3d-tv-h-m,400px)} }