/* Unicom-WG — Widget « Or & Pétrole » [unicom_matieres] */
.u3m-widget{
  --u3m-violet:#6b3a9e; --u3m-violet-2:#8b4fc4; --u3m-magenta:#b23a72;
  --u3m-or:#d4af37; --u3m-or-clair:#f1d77a; --u3m-nuit:#1b0f2c; --u3m-nuit-2:#2a1747;
  --u3m-lavande:#b48ae6; --u3m-up:#46d38a; --u3m-down:#ff7088;
  --u3m-accent:var(--u3m-or);
  container-type:inline-size;
  width:100%; max-width:100%; box-sizing:border-box; overflow:hidden;
  border-radius:8px; color:#fff; font-family:Roboto,Arial,sans-serif; line-height:1.25;
  background:radial-gradient(130% 90% at 100% 0%,#3a2160 0%,var(--u3m-nuit) 55%);
  border:1px solid rgba(212,175,55,.35);
  box-shadow:0 6px 22px rgba(27,15,44,.28);
}
.u3m-widget *{box-sizing:border-box}
.u3m-widget[data-asset="brent"],.u3m-widget[data-asset="wti"]{--u3m-accent:var(--u3m-lavande)}
.u3m-widget[data-asset="btc"]{--u3m-accent:#f7931a}
.u3m-widget[data-asset="btc"] .u3m-ico{background:linear-gradient(135deg,#ffc06a,#f7931a 55%,#d97a0a); color:#fff; font-size:17px}
.u3m-widget[data-set="crypto"] .u3m-head{border-bottom:1px solid rgba(247,147,26,.35)}

/* En-tête */
.u3m-head{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px;
  background:linear-gradient(120deg,var(--u3m-violet) 0%,var(--u3m-magenta) 100%)}
.u3m-head b{font-family:Spectral,Georgia,serif; font-size:16px}
.u3m-head small{font-size:11px; opacity:.9; white-space:nowrap}
.u3m-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:1px;
  background:#2ecc71; animation:u3mPulse 2s infinite}
@keyframes u3mPulse{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 Or / Brent / WTI */
.u3m-tabs{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(255,255,255,.08)}
.u3m-tabs button{all:unset; 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; transition:color .15s,border-color .15s,background .15s}
.u3m-tabs button:hover{color:#fff; background:rgba(255,255,255,.03)}
.u3m-tabs button[aria-selected="true"]{color:var(--u3m-accent); border-bottom-color:var(--u3m-accent)}
.u3m-tabs button:focus-visible,.u3m-seg button:focus-visible{outline:2px solid var(--u3m-accent); outline-offset:-2px}

.u3m-body{padding:14px}

/* Titre + bascule EUR/USD */
.u3m-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.u3m-title{display:flex; align-items:center; gap:10px; min-width:0}
.u3m-ico{width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px;
  background:linear-gradient(135deg,var(--u3m-or-clair),var(--u3m-or) 55%,#a8801f); color:var(--u3m-nuit)}
.u3m-widget[data-asset="brent"] .u3m-ico,.u3m-widget[data-asset="wti"] .u3m-ico{
  background:linear-gradient(135deg,#cfb3f2,var(--u3m-violet-2) 55%,var(--u3m-violet)); color:#fff}
.u3m-title b{display:block; font-family:Spectral,Georgia,serif; font-size:16px; color:var(--u3m-accent)}
.u3m-title small{display:block; font-size:11.5px; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.u3m-seg{display:inline-flex; flex:0 0 auto; padding:2px; border-radius:20px; background:rgba(255,255,255,.08)}
.u3m-seg button{all:unset; cursor:pointer; padding:4px 10px; border-radius:16px; font-size:12px; font-weight:500; color:rgba(255,255,255,.7)}
.u3m-seg button[aria-pressed="true"]{background:var(--u3m-accent); color:var(--u3m-nuit)}

/* Prix */
.u3m-price{margin-top:12px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.u3m-big{font-family:Spectral,Georgia,serif; font-size:30px; font-weight:700; letter-spacing:-.3px; font-variant-numeric:tabular-nums}
.u3m-unit{font-size:13px; color:var(--u3m-accent)}
.u3m-chg{margin-top:2px; font-size:13px; font-variant-numeric:tabular-nums}
.u3m-chg small{color:rgba(255,255,255,.55); margin-left:6px}
.u3m-up{color:var(--u3m-up)} .u3m-down{color:var(--u3m-down)}

/* Graphique */
.u3m-chart{position:relative; margin:12px -4px 0; height:150px; touch-action:pan-y}
.u3m-chart svg{display:block; width:100%; height:100%; overflow:visible}
.u3m-chart .u3m-axe{font-size:10px; fill:rgba(255,255,255,.5); font-family:Roboto,Arial,sans-serif}
.u3m-tip{position:absolute; top:0; pointer-events:none; transform:translateX(-50%); white-space:nowrap;
  background:rgba(18,10,31,.92); border:1px solid var(--u3m-accent); border-radius:5px; padding:4px 7px;
  font-size:11px; opacity:0; transition:opacity .12s}
.u3m-tip b{color:var(--u3m-accent); font-weight:500}
.u3m-chart.u3m-hover .u3m-tip{opacity:1}
.u3m-msg{position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:rgba(255,255,255,.6); text-align:center; padding:0 10px}

/* Périodes */
.u3m-ranges{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:10px}
.u3m-ranges button{all:unset; cursor:pointer; text-align:center; padding:5px 0; border-radius:4px; font-size:12px; font-weight:500;
  color:rgba(255,255,255,.65); background:rgba(255,255,255,.05); transition:background .15s,color .15s}
.u3m-ranges button:hover{background:rgba(255,255,255,.1); color:#fff}
.u3m-ranges button[aria-pressed="true"]{background:var(--u3m-accent); color:var(--u3m-nuit)}
.u3m-ranges button:focus-visible{outline:2px solid #fff; outline-offset:1px}

/* Statistiques */
.u3m-stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:14px; border-radius:6px; overflow:hidden;
  background:rgba(212,175,55,.18)}
.u3m-stats div{background:var(--u3m-nuit-2); padding:8px 10px}
.u3m-stats span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.55)}
.u3m-stats b{display:block; margin-top:2px; font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums}

.u3m-foot{padding:8px 14px; font-size:10.5px; color:rgba(255,255,255,.5); border-top:2px solid var(--u3m-or); background:rgba(0,0,0,.18)}

@container (max-width:280px){
  .u3m-big{font-size:25px}
  .u3m-stats{grid-template-columns:1fr}
  .u3m-title small{display:none}
}
@media (prefers-reduced-motion:reduce){.u3m-dot{animation:none}}
.u3m-widget[data-set="crypto"]{border-color:rgba(247,147,26,.35)}
.u3m-widget[data-set="crypto"] .u3m-foot{border-top-color:#f7931a}
.u3m-widget[data-set="crypto"] .u3m-stats{background:rgba(247,147,26,.2)}