/* ============================================================
   Module « Prix des carburants » — prixdubaril.com
   Header style baromètre (navy gradient + blue border)
   Namespacé .pdb-carburants, sans dépendance
   ============================================================ */

.pdb-carburants {
  /* ---- Palette ---- */
  --pdb-navy:     #15244c;
  --pdb-navy-2:   #1d3464;
  --pdb-ink:      #1b2a44;
  --pdb-blue:     #2b7fd4;
  --pdb-down:     #1f9d57;
  --pdb-down-bg:  #e7f6ee;
  --pdb-up:       #d23b3b;
  --pdb-up-bg:    #fbe9e9;
  --pdb-line:     #e2e7ee;
  --pdb-line-2:   #edf0f5;
  --pdb-muted:    #6b7789;
  --pdb-eur:      #2563eb;
  --pdb-eur-bg:   #eff6ff;
  --pdb-radius:   9px;
  --pdb-font:     "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  container-type: inline-size;
  font-family: var(--pdb-font);
  color: var(--pdb-ink);
  -webkit-font-smoothing: antialiased;
  border-radius: 12px;
  overflow: hidden;
}
.pdb-carburants *, .pdb-carburants *::before { box-sizing: border-box; }

/* ---- En-tête style baromètre ---- */
.pdb-carburants__head {
  background: linear-gradient(180deg, var(--pdb-navy-2), var(--pdb-navy));
  border-bottom: 2px solid var(--pdb-blue);
  padding: 9px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.pdb-carburants__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.pdb-carburants__brand svg {
  stroke: var(--pdb-blue);
  flex-shrink: 0;
}
.pdb-carburants__brand-title {
  color: #cddefc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pdb-carburants__brand-sub { color: rgba(205,222,252,.55); }

.pdb-carburants__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pdb-carburants__live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  animation: pdb-pulse 2s infinite;
}
@keyframes pdb-pulse {
  0%   { box-shadow: 0 0 0 0px rgba(74,222,128,.45); }
  70%  { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0px rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pdb-carburants__live::before { animation: none; }
}

/* ---- Corps (fond clair sous le header) ---- */
.pdb-carburants__body {
  background: #f4f7fb;
  padding: 12px 12px 10px;
}

/* ---- Grille : 4 colonnes ---- */
.pdb-carburants__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 190px));
  justify-content: center;
  gap: 10px;
}
.pdb-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Carte ---- */
.pdb-card {
  --fuel: var(--pdb-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pdb-line);
  border-left: 4px solid var(--fuel);
  border-radius: var(--pdb-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,40,75,.06), 0 1px 3px rgba(20,40,75,.05);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
  text-decoration: none;
  color: inherit;
}
.pdb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(20,40,75,.08), 0 1px 3px rgba(20,40,75,.06);
}

/* en-tête carte : nom + tag €/L */
.pdb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 9px 6px;
  border-bottom: 1px solid var(--pdb-line-2);
}
.pdb-card__code {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--fuel) 80%, #1b2a44);
}
.pdb-card__unit {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  background: var(--fuel);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

/* afficheur navy */
.pdb-card__display {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.06), transparent 60%),
    var(--pdb-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 10px;
}
.pdb-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  color: #f4f8ff;
  white-space: nowrap;
}
.pdb-card__cur { font-size: 11px; font-weight: 700; color: #9fb6d8; }
.pdb-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 999px;
}
.pdb-card__delta .pdb-arw { font-size: 7px; line-height: 1; }

/* pied : bande % */
.pdb-card__foot { display: flex; }
.pdb-card__pct {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 5px 0;
}
.pdb-card__pct .pdb-arw { font-size: 7px; line-height: 1; transform: translateY(-.5px); }

/* ---- États : baisse / hausse ---- */
.pdb-card.is-down .pdb-card__delta { color: #5fe0a3; background: rgba(67,217,140,.15); }
.pdb-card.is-up   .pdb-card__delta { color: #ff9b9b; background: rgba(255,138,138,.16); }
.pdb-card.is-down .pdb-card__pct   { color: var(--pdb-down); background: var(--pdb-down-bg); }
.pdb-card.is-up   .pdb-card__pct   { color: var(--pdb-up);   background: var(--pdb-up-bg); }

/* ---- Carte « feature » : fioul col 4, 2 rangées ---- */
.pdb-card--feature {
  grid-column: 4;
  grid-row: 1 / span 2;
}
.pdb-card--feature .pdb-card__display {
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(63,112,196,.38), transparent 65%),
    linear-gradient(180deg, #16294b 0%, #0c1a33 100%);
}
.pdb-card--feature .pdb-card__price { display: flex; justify-content: center; font-size: 30px; }
.pdb-card--feature .pdb-card__cur   { font-size: 15px; }
.pdb-card--feature .pdb-card__delta {
  display: flex; width: 100%; justify-content: center;
  border-radius: 8px; padding: 6px 10px; font-size: 12px;
}

/* ---- Footer : cours de l'euro ---- */
.pdb-carburants__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 12px;
  margin-top: 10px;
  background: #1d336312;
  border-radius: 7px;
}
.pdb-carburants__footer-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pdb-muted);
}
.pdb-carburants__footer-rate {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #002067;
}
.pdb-carburants__footer-cur {
  font-size: 11px;
  font-weight: 700;
  color: var(--pdb-eur);
  opacity: .7;
}
.pdb-carburants__footer-pct {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}
.pdb-carburants__footer-pct.is-up   { color: var(--pdb-up);   background: var(--pdb-up-bg); }
.pdb-carburants__footer-pct.is-down { color: var(--pdb-down); background: var(--pdb-down-bg); }


/* ============================================================
   Responsive : carrousel sous 560px (container query)
   ============================================================ */
@container (max-width: 560px) {
  .pdb-carburants__body { padding: 10px 10px 8px; }
  .pdb-carburants__grid {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 1px 12px;
    margin: 0 -1px;
    scrollbar-width: thin;
    scrollbar-color: var(--pdb-line) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .pdb-carburants__grid > * {
    flex: 0 0 auto;
    width: 140px;
    scroll-snap-align: start;
  }
  .pdb-carburants__grid::-webkit-scrollbar { height: 6px; }
  .pdb-carburants__grid::-webkit-scrollbar-thumb { background: var(--pdb-line); border-radius: 999px; }
  .pdb-card__price { font-size: 17px; }
  .pdb-carburants__brand-title { font-size: 11px; }

  /* fioul redevient carte normale dans le carrousel */
  .pdb-card--feature { grid-column: auto; grid-row: auto; }
  .pdb-card--feature .pdb-card__display {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 10px;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.06), transparent 60%),
      var(--pdb-navy);
  }
  .pdb-card--feature .pdb-card__price  { display: inline-flex; justify-content: flex-start; font-size: 17px; }
  .pdb-card--feature .pdb-card__cur    { font-size: 11px; }
  .pdb-card--feature .pdb-card__delta  { width: auto; border-radius: 999px; font-size: 11px; padding: 3px 7px; }
}