/* Unicom-WG — Energy Desk « Pétrole & Gaz » [unicom_oilgas] */
.u3e-desk{
  --u3e-violet:#6b3a9e; --u3e-violet-2:#8b4fc4; --u3e-magenta:#b23a72;
  --u3e-or:#d4af37; --u3e-or-clair:#f1d77a; --u3e-nuit:#1b0f2c; --u3e-nuit-2:#241339;
  --u3e-petrole:#b48ae6; --u3e-gaz:#ee7fb0; --u3e-raffine:#e9c46a;
  --u3e-up:#46d38a; --u3e-down:#ff7088; --u3e-ligne:rgba(255,255,255,.08);
  --u3e-accent:var(--u3e-petrole);
  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% 70% at 100% 0%,#3a2160 0%,var(--u3e-nuit) 60%);
  border:1px solid rgba(212,175,55,.35); box-shadow:0 10px 30px rgba(27,15,44,.3);
}
.u3e-desk *{box-sizing:border-box}
.u3e-desk[data-fam="gaz"]{--u3e-accent:var(--u3e-gaz)}
.u3e-desk[data-fam="raffine"]{--u3e-accent:var(--u3e-raffine)}
.u3e-desk[data-fam="or"]{--u3e-accent:#d4af37}
.u3e-desk[data-fam="argent"]{--u3e-accent:#c8d0dc}
.u3e-desk[data-fam="pgm"]{--u3e-accent:#b48ae6}
.u3e-desk[data-fam="indus"]{--u3e-accent:#e0895a}
.u3e-desk button{font-family:inherit}

/* En-tête */
.u3e-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 18px; background:linear-gradient(120deg,var(--u3e-violet) 0%,var(--u3e-magenta) 100%)}
.u3e-head h3{margin:0; font-family:Spectral,Georgia,serif; font-size:19px; font-weight:700; color:#fff; line-height:1.2}
.u3e-head h3 small{display:block; font-family:Roboto,Arial,sans-serif; font-size:11.5px; font-weight:400; opacity:.88; margin-top:2px}
.u3e-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:2px; background:#2ecc71; animation:u3ePulse 2s infinite}
@keyframes u3ePulse{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)}}
.u3e-seg{display:inline-flex; padding:3px; border-radius:20px; background:rgba(0,0,0,.22)}
.u3e-seg button{all:unset; cursor:pointer; padding:5px 14px; border-radius:16px; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.8)}
.u3e-seg button[aria-pressed="true"]{background:#fff; color:var(--u3e-violet)}

/* Tuiles principales */
.u3e-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--u3e-ligne)}
.u3e-tile{all:unset; box-sizing:border-box; cursor:pointer; position:relative; padding:14px 16px 12px; border-right:1px solid var(--u3e-ligne); transition:background .15s}
.u3e-tile:last-child{border-right:0}
.u3e-tile:hover{background:rgba(255,255,255,.035)}
.u3e-tile[aria-pressed="true"]{background:rgba(255,255,255,.06)}
.u3e-tile[aria-pressed="true"]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--u3e-c)}
.u3e-tile-top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:rgba(255,255,255,.75)}
.u3e-tile-top b{display:flex; align-items:center; gap:6px; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.u3e-tile-top span{font-variant-numeric:tabular-nums; white-space:nowrap}
.u3e-tile-pct{display:flex; align-items:baseline; gap:6px; margin-top:6px; font-family:Spectral,Georgia,serif; font-size:24px; font-weight:700}
.u3e-tile-pct small{font-family:Roboto,Arial,sans-serif; font-size:12px; font-weight:400; opacity:.9}
.u3e-tile svg.u3e-mini{display:block; width:100%; height:26px; margin-top:6px}

/* Corps : graphique + liste */
.u3e-main{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.u3e-chartbox{padding:16px 18px 14px; border-right:1px solid var(--u3e-ligne)}
.u3e-sel{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.u3e-sel-id{display:flex; align-items:center; gap:12px; min-width:0}
.u3e-sel-id b{display:block; font-family:Spectral,Georgia,serif; font-size:18px; color:var(--u3e-accent)}
.u3e-sel-id small{display:block; font-size:12px; color:rgba(255,255,255,.62)}
.u3e-sel-px{text-align:right}
.u3e-big{font-family:Spectral,Georgia,serif; font-size:32px; font-weight:700; letter-spacing:-.3px; font-variant-numeric:tabular-nums}
.u3e-big span{font-family:Roboto,Arial,sans-serif; font-size:13px; font-weight:400; color:var(--u3e-accent); margin-left:5px; letter-spacing:0}
.u3e-chg{font-size:13px; font-variant-numeric:tabular-nums}
.u3e-chg small{color:rgba(255,255,255,.55); margin-left:5px}
.u3e-up{color:var(--u3e-up)} .u3e-down{color:var(--u3e-down)}

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

.u3e-ranges{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.u3e-ranges button{all:unset; cursor:pointer; padding:5px 12px; border-radius:5px; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); transition:background .15s,color .15s}
.u3e-ranges button:hover{background:rgba(255,255,255,.1); color:#fff}
.u3e-ranges button[aria-pressed="true"]{background:var(--u3e-accent); color:var(--u3e-nuit)}

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

/* Liste des instruments */
.u3e-list{padding:8px 10px 10px}
.u3e-list h4{margin:6px 8px 8px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.5)}
.u3e-row{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%;
  padding:10px 10px; border-radius:6px; border-left:3px solid transparent; transition:background .15s}
.u3e-row + .u3e-row{margin-top:2px}
.u3e-row:hover{background:rgba(255,255,255,.04)}
.u3e-row[aria-pressed="true"]{background:rgba(255,255,255,.07); border-left-color:var(--u3e-c)}
.u3e-row b{display:block; font-size:14px; font-weight:500}
.u3e-row small{display:block; font-size:11.5px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.u3e-row .u3e-v{text-align:right; font-variant-numeric:tabular-nums}
.u3e-row .u3e-v b{white-space:nowrap}
.u3e-row .u3e-v b span{font-size:10.5px; font-weight:400; color:rgba(255,255,255,.55); margin-left:3px}
.u3e-row .u3e-v small{font-size:11.5px}

.u3e-ico{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 34px; background:var(--u3e-c); color:var(--u3e-nuit)}
.u3e-ico svg{width:17px; height:17px}

.u3e-desk button:focus-visible{outline:2px solid var(--u3e-accent); outline-offset:-2px}

.u3e-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(--u3e-or); background:rgba(0,0,0,.2)}

/* Responsive */
@container (max-width:860px){
  .u3e-main{grid-template-columns:1fr}
  .u3e-chartbox{border-right:0; border-bottom:1px solid var(--u3e-ligne)}
}
@container (max-width:620px){
  .u3e-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u3e-tile:nth-child(2){border-right:0}
  .u3e-tile:nth-child(-n+2){border-bottom:1px solid var(--u3e-ligne)}
  .u3e-chart{height:200px}
  .u3e-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u3e-big{font-size:27px}
  .u3e-sel-px{text-align:left}
}
@media (prefers-reduced-motion:reduce){.u3e-dot{animation:none}}

/* Bandeaux animés de la page Oil & Gas (variante dans le contenu) */
.u3i-mkt.u3i-mkt--page{width:100%; margin-left:0; border-radius:10px}
.u3i-row--gaz{background:linear-gradient(90deg,#1d0f2a 0%,#2c1236 60%,#1d0f2a 100%); border-top:1px solid rgba(238,127,176,.35)}
.u3i-row--gaz .u3i-tag{background:linear-gradient(135deg,var(--u3i-magenta,#b23a72) 0%,#7a2a72 100%)}
.u3i-row--gaz .u3i-ico{background:#ee7fb0; color:#1b0f2c}
.u3i-ico svg{width:16px; height:16px}

/* Bandeaux de la page Or & Métaux */
.u3i-row--or .u3i-tag{background:linear-gradient(135deg,#a8801f 0%,#d4af37 45%,#6b3a9e 100%)}
.u3i-row--or .u3i-ico{background:#1b0f2c; color:#f1d77a}
.u3i-row--cuivre{background:linear-gradient(90deg,#1d0f22 0%,#2a1428 60%,#1d0f22 100%); border-top:1px solid rgba(224,137,90,.35)}
.u3i-row--cuivre .u3i-tag{background:linear-gradient(135deg,#b0613a 0%,#7a3a5a 100%)}
.u3i-row--cuivre .u3i-ico{background:#e0895a; color:#1b0f2c}