/* =========================================================
   PRIXDUBARIL.COM — Module Sidebar Brent / WTI v2
   Largeur 330px · Tabs subtil clair · Layout final
   =========================================================
   Structure :
     .pdb-sb-wrap         → conteneur global (tabs + module)
       .pdb-sb-tabs       → barre des tabs Brent / WTI
       .pdb-sb            → module de cotation (Brent ou WTI)
         --brent / --wti  → modifiers de variante
   ========================================================= */

/* === WRAPPER : tabs + module forment UN SEUL bloc === */
.pdb-sb-wrap{
  width:100%;
  max-width:330px;
  margin:0 auto 16px;
  /* Coins droits en haut (au niveau des tabs), arrondis en bas uniquement */
  border-radius:0 0 14px 14px;
  /* overflow:visible pour permettre au tooltip de déborder le wrapper */
  overflow:visible;
  box-shadow:0 8px 24px -8px rgba(15,23,42,.12),
             0 0 0 1px rgba(15,23,42,.05);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:relative;
}
/* Le module hérite des coins arrondis en bas (le tab et le module se collent) */
.pdb-sb{border-radius:0 0 14px 14px}

/* === TABS : reprise du style du module principal === */
.pdb-sb-tabs{
  display:flex;
  background:linear-gradient(180deg,#e2e8f0 0%,#eef2f7 60%,#f8fafc 100%);
  border-bottom:1px solid #cbd5e1;
  margin:0;
  padding:0;
  list-style:none;
}
.pdb-sb-tab{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:0;
  padding:11px 8px;
  font-size:11px;
  font-weight:700;
  color:#94a3b8;
  background:transparent;
  border:none;
  border-radius:0;
  cursor:pointer;
  transition:color .2s,background .2s;
  letter-spacing:.04em;
  white-space:nowrap;
  text-transform:uppercase;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.pdb-sb-tab:hover{color:#475569;background:rgba(0,0,0,.02);border-radius:0}
.pdb-sb-tab.is-active{color:#0f172a;background:#fff;border-radius:0}
.pdb-sb-tab[data-pdb-v="brent"].is-active{color:#1e40af}
.pdb-sb-tab[data-pdb-v="wti"].is-active{color:#013971}
.pdb-sb-tab__flag{font-size:1.1em;line-height:1}

/* === MODULE (Brent ou WTI) === */
.pdb-sb{
  background:linear-gradient(180deg,
    #f8fafc 0%,
    #eef2f7 100%);
  color:#0f172a;
  margin-top:-1px;
  /* Couleurs d'accent par défaut (Brent) */
  --pdb-sb-accent:#1e40af;
  --pdb-sb-accent-rgb:30,64,175;
  --pdb-sb-accent-d:#1e3a8a;
}
.pdb-sb--wti{
  --pdb-sb-accent:#013971;
  --pdb-sb-accent-rgb:1,57,113;
  --pdb-sb-accent-d:#001f3d;
}

/* Plusieurs modules dans le wrapper : on cache les non-actifs */
.pdb-sb[data-pdb-v]{display:none}
.pdb-sb[data-pdb-v].is-active{display:block}

/* === Header bleu marine bord à bord === */
.pdb-sb__header{
  padding:9px 14px;
  background:linear-gradient(135deg,var(--pdb-sb-accent) 0%,var(--pdb-sb-accent-d) 100%);
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  position:relative;
}
.pdb-sb__header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
}
.pdb-sb__flag{font-size:1.1em;line-height:1}

/* === Body === */
.pdb-sb__body{padding:11px 12px 2px}

/* === Cards prix (Direct + Clôture côte à côte) === */
.pdb-sb__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:8px;
}
.pdb-sb__cell{
  text-align:center;
  padding:8px 6px;
  border-radius:9px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 3px rgba(15,23,42,.04);
  position:relative;
  min-width:0;
}
.pdb-sb__cell--close{
  background:linear-gradient(135deg,rgba(241,245,249,.92),rgba(226,232,240,.85));
  border-color:rgba(203,213,225,.6);
  cursor:pointer;
}
.pdb-sb__cell--close:hover{
  background:linear-gradient(135deg,rgba(254,242,242,.95),rgba(254,226,226,.85));
  border-color:rgba(220,38,38,.3);
  /* Au hover : crée un stacking context élevé pour que le tooltip passe au-dessus des tabs */
  z-index:1000;
  position:relative;
}

/* Tooltip au survol de la card clôture */
.pdb-sb__cell--close[data-pdb-tooltip]:hover::after{
  content:attr(data-pdb-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:#0f172a;
  color:#fff;
  padding:7px 11px;
  border-radius:7px;
  font-size:10.5px;
  font-weight:500;
  white-space:normal;
  z-index:1001;
  pointer-events:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  width:max-content;
  max-width:280px;
  text-align:left;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
}
.pdb-sb__cell--close[data-pdb-tooltip]:hover::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#0f172a;
  z-index:1001;
  pointer-events:none;
  margin-bottom:-2px;
}

.pdb-sb__cell-label{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  font-weight:600;
  margin-bottom:2px;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pdb-sb__cell-time{
  font-size:9px;
  color:#94a3b8;
  font-variant-numeric:tabular-nums;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
}
.pdb-sb__cell-price{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  line-height:1.05;
  color:#00284f;
  white-space:nowrap;
}
.pdb-sb__cell-price.is-up{color:#00284f}
.pdb-sb__cell-price.is-down{color:#00284f}
.pdb-sb__cell--close .pdb-sb__cell-price{color:#002950;opacity:.6}
.pdb-sb__cell-price-cur{
  font-size:.6em;
  color:#94a3b8;
  margin-left:1px;
  font-weight:600;
}
.pdb-sb__cell-change{
  font-size:10px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:#dc2626;
  margin-top:2px;
  white-space:nowrap;
}
.pdb-sb__cell-change.is-up{color:#059669}
.pdb-sb__cell-change.is-down{color:#dc2626}
.pdb-sb__cell-change-pct{opacity:.7;margin-left:3px;font-size:.95em}

/* === Plage du jour (Ouverture / Bas / Haut / Écart) === */
.pdb-sb__range{
  font-size:10px;
  background:rgba(255,255,255,.5);
  border-radius:7px;
  padding:6px 8px;
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}
.pdb-sb__range-item{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  align-items:center;
  text-align:center;
  min-width:0;
  transition:transform .2s ease;
  transform-origin:center;
}
.pdb-sb__range-item:hover{transform:scale(1.18)}
.pdb-sb__range-label{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#94a3b8;
  font-weight:700;
}
.pdb-sb__range-val{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:10px;
  white-space:nowrap;
  color:#0f172a;
}
.pdb-sb__range-val--low{color:#dc2626}
.pdb-sb__range-val--high{color:#059669}

/* === Bloc Graphique + Tableau 5j côte à côte === */
.pdb-sb__chart-row{
  display:grid;
  grid-template-columns:1fr 95px;
  gap:6px;
  margin-bottom:8px;
}
.pdb-sb__chart-img{
  background:#eeeeee;
  border:1px solid rgba(255,255,255,.9);
  border-radius:9px;
  padding:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.pdb-sb__chart-img img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:5px;
}

/* Tableau 5j compact à droite */
.pdb-sb__days{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  border-radius:9px;
  padding:5px 6px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
.pdb-sb__day{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:2px 4px;
  font-size:10px;
  border-radius:4px;
  text-decoration:none;
  color:#0f172a;
  transition:background .15s;
  font-variant-numeric:tabular-nums;
}
.pdb-sb__day:hover{background:rgba(241,245,249,.9)}
.pdb-sb__day-name{
  font-size:9.5px;
  color:#64748b;
  font-weight:500;
}
.pdb-sb__day-price{
  font-weight:700;
  font-size:10px;
  color:#0f172a;
}

/* === Boutons période (segmented control) === */
.pdb-sb__periods{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:3px;
  background:#f1f5f9;
  padding:3px;
  border-radius:8px;
}
.pdb-sb__period{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  height:20px;
  padding:5px 4px;
  font-size:11px;
  font-weight:600;
  color:#64748b;
  background:#e8edf4;
  border:none;
  border-radius:5px;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
  letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
}
.pdb-sb__period:hover{color:#0f172a;background:rgba(255,255,255,.95)}
.pdb-sb__period.is-active{
  color:#fff;
  background:linear-gradient(135deg,var(--pdb-sb-accent),var(--pdb-sb-accent-d));
  box-shadow:0 1px 3px rgba(var(--pdb-sb-accent-rgb),.3);
}

/* === Moyenne 5j (intégrée dans le tableau days, en bas) === */
.pdb-sb__avg{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:4px 6px;
  margin-top:3px;
  background:linear-gradient(135deg,rgba(var(--pdb-sb-accent-rgb),.10),rgba(var(--pdb-sb-accent-rgb),.03));
  border:1px solid rgba(var(--pdb-sb-accent-rgb),.18);
  border-radius:5px;
  position:relative;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.pdb-sb__avg::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:2.5px;
  background:linear-gradient(180deg,var(--pdb-sb-accent),var(--pdb-sb-accent-d));
}
.pdb-sb__avg-label{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--pdb-sb-accent);
  font-weight:700;
  text-decoration:none;
  margin-left:4px;
  white-space:nowrap;
}
.pdb-sb__avg-label:hover{text-decoration:underline}
.pdb-sb__avg-val{
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  color:#0f172a;
  white-space:nowrap;
}
.pdb-sb__avg-cur{
  font-size:.75em;
  color:#94a3b8;
  font-weight:600;
  margin-left:1px;
}
}
/*
@media(max-width:767px){
  .pdb-sb-wrap{max-width:100%}
}
* Override Joomla template: #gkSidebar .box { max-width:320px !important } à ≤580px *
@media(max-width:580px){
  #gkSidebar .box:has(.pdb-sb-wrap){
    max-width:100% !important;
    width:100% !important;
  }
}*/