/* =========================================================
   PRIXDUBARIL.COM — Module Sidebar L'Index du Pétrole
   =========================================================
   Structure :
     .pdb-idx-wrap          → conteneur global
       .pdb-head            → header (base partagée, cf. plus bas)
       .pdb-idx-list        → liste des rubriques
       .pdb-idx-footer      → CTA "Index complet"
   =========================================================
   Réutilise les variables CSS globales (--pdb-text etc.)
   avec fallbacks pour fonctionner même hors home.
   ========================================================= */

/* === WRAPPER === */
.pdb-idx-wrap{
  width:100%;
  margin:0 auto 16px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 24px -8px rgba(15,23,42,.12),
             0 0 0 1px rgba(15,23,42,.05);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--pdb-text,#0f172a);
}

/* ===========================================================
   BASE HEAD SIDEBAR UNIFIÉE — .pdb-head
   Partagée par : module Index (ici) + sondage « Sentiment du marché » (SP Poll).
   Tokenisée (accent / dégradé / radius par variables). Poids 700 partout.
   Accent par défaut = border-bottom ; modifieurs :
     .pdb-head--tab       → languette centrée 54px (sentiment)
     .pdb-head--liseret   → liseré blanc subtil en bas (index)
     .pdb-head--sentiment → skin bleu + orange #ff6b35 (SP Poll)
   ⚠ Le SP Poll étant home-only, ce CSS (home) le couvre. Si un sondage est
     publié ailleurs, y charger aussi module-index.css.
   =========================================================== */
.pdb-head{
  --pdb-head-bg:linear-gradient(180deg,#1d3464,#15244c);
  --pdb-head-accent:#e8602a;
  --pdb-head-radius:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  background:var(--pdb-head-bg);
  border-bottom:2px solid var(--pdb-head-accent);
  border-radius:var(--pdb-head-radius) var(--pdb-head-radius) 0 0;
  color:#fff;
  font-size:12px;
  line-height:1.1;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.pdb-head__icon{
  width:16px;
  height:16px;
  flex:none;
  opacity:.95;
  margin-top:-1px; /* calage cap-height du texte uppercase */
  color:var(--pdb-head-accent);
}
.pdb-head__icon svg{width:100%;height:100%;display:block}
/* Accent languette centrée (au lieu de la bordure pleine) */
.pdb-head--tab{border-bottom:0}
.pdb-head--tab::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:54px;height:3px;
  transform:translateX(-50%);
  border-radius:999px 999px 0 0;
  background:var(--pdb-head-accent);
}
/* Liseré blanc subtil en bas */
.pdb-head--liseret::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
}
/* Fond bleu « sentiment » seul (sans le reste du skin) — utilisé par le head Index */
.pdb-head--blue{--pdb-head-bg:linear-gradient(90deg,#002b55,#004b8d)}

/* Skin « sentiment du marché » (SP Poll) : bleu + orange #ff6b35 */
.pdb-head--sentiment{
  --pdb-head-bg:linear-gradient(90deg,#002b55,#004b8d);
  --pdb-head-accent:#ff6b35;
  --pdb-head-radius:16px;
  letter-spacing:.045em;
}

/* === LISTE des rubriques === */
.pdb-idx-list{
  list-style:none;
  margin:0;
  padding:6px 0;
  display:flex;
  flex-direction:column;
}
.pdb-idx-list__item{margin:0;padding:0}

.pdb-idx-list__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  font-size:13px;
  color:#334155;
  text-decoration:none;
  position:relative;
  line-height:1.3;
  transition:background .18s,color .18s,transform .18s;
}

/* Bordure gauche bleu marine au hover/active */
.pdb-idx-list__link::before{
  content:"";
  position:absolute;
  top:6px;bottom:6px;left:0;
  width:3px;
  background:transparent;
  border-radius:0 2px 2px 0;
  transition:background .18s;
}

/* === Icône SVG à gauche === */
.pdb-idx-list__icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:#94a3b8;
  transition:color .18s,transform .18s;
}
.pdb-idx-list__icon svg{
  width:100%;
  height:100%;
  display:block;
}

/* === Label texte === */
.pdb-idx-list__label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}

/* === Flèche `›` à droite (style identique au module Pays) === */
.pdb-idx-list__arrow{
  font-size:11px;
  color:#cbd5e1;
  flex-shrink:0;
  position:relative;
  /* On compense le gap pour que la chaîne au hover reste alignée */
  margin-right:0;
  transition:transform .15s,color .15s,margin-right .25s;
}
/* Au repos : 2 chevrons supplémentaires cachés (avant + après)
   → apparaîtront en chaîne au hover */
.pdb-idx-list__arrow::before,
.pdb-idx-list__arrow::after{
  content:"›";
  position:absolute;
  top:0;left:0;
  opacity:0;
  transition:opacity .25s,transform .25s cubic-bezier(.4,0,.2,1);
}
.pdb-idx-list__arrow::before{transition-delay:.04s}
.pdb-idx-list__arrow::after{transition-delay:.08s}

/* === HOVER : effet "glissement vers la droite" + chaîne de 3 chevrons === */
.pdb-idx-list__link:hover{
  background:rgba(30,64,175,.06);
  color:#1e40af;
  transform:translateX(2px);
}
.pdb-idx-list__link:hover::before{
  background:linear-gradient(180deg,#1e40af,#1e3a8a);
}
.pdb-idx-list__link:hover .pdb-idx-list__icon{
  color:#1e40af;
}
.pdb-idx-list__link:hover .pdb-idx-list__arrow{
  color:#1e40af;
  /* Réserve la place pour les 2 chevrons qui apparaissent */
  margin-right:9px;
}
/* Chevron principal : se décale de 3px à droite */
.pdb-idx-list__link:hover .pdb-idx-list__arrow{
  transform:translateX(3px);
}
/* 2e chevron : apparaît à +6px avec délai */
.pdb-idx-list__link:hover .pdb-idx-list__arrow::before{
  opacity:.7;
  transform:translateX(5px);
}
/* 3e chevron : apparaît à +10px avec délai plus long */
.pdb-idx-list__link:hover .pdb-idx-list__arrow::after{
  opacity:.4;
  transform:translateX(10px);
}

/* === État ACTIF (page courante, si jamais ajouté manuellement) === */
.pdb-idx-list__link.is-active{
  background:rgba(30,64,175,.08);
  color:#1e40af;
  font-weight:600;
}
.pdb-idx-list__link.is-active::before{
  background:linear-gradient(180deg,#1e40af,#1e3a8a);
}
.pdb-idx-list__link.is-active .pdb-idx-list__icon{color:#1e40af}
.pdb-idx-list__link.is-active .pdb-idx-list__arrow{color:#1e40af}
.pdb-idx-list__link.is-active .pdb-idx-list__label{font-weight:600}

/* === Footer CTA === */
.pdb-idx-footer{
  padding:10px 14px 14px;
  border-top:1px solid #e2e8f0;
  text-align:center;
  background:#fff;
}
/* CTA : utilise désormais la classe partagée .pdb-cta (définie dans module-compagnies.css) */

/* === Mobile === */
@media(max-width:380px){
  .pdb-idx-list__link{padding:10px 14px;font-size:12.5px}
}