/* Bandeau « Informations et service commercial » : rouge du logo, numéros en pavés blancs. */
.pa-commercial {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pa-space-5) var(--pa-space-8);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  background: linear-gradient(120deg, var(--pa-red) 0%, #b10f22 100%);
  border-radius: var(--pa-radius-lg);
  color: #fff;
}
.pa-commercial__copy { display: grid; gap: .35rem; }
.pa-commercial__eyebrow { font-family: var(--pa-font-display); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.pa-commercial h2 { font-family: var(--pa-font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.pa-commercial h2::before { content: none; }
.pa-commercial__copy p:not(.pa-commercial__eyebrow) { color: rgb(255 255 255 / .9); }
.pa-commercial__contact { display: grid; gap: var(--pa-space-3); justify-items: end; }
.pa-commercial__numbers { display: flex; flex-wrap: wrap; gap: var(--pa-space-2); justify-content: flex-end; }
.pa-commercial a.pa-commercial__phone {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: .55em 1.05em; border-radius: 8px;
  background: #fff; color: #0b0b0c;
  font-family: var(--pa-font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pa-commercial a.pa-commercial__phone:hover { background: #ffe9ec; color: #0b0b0c; }
.pa-commercial__note { color: rgb(255 255 255 / .9); font-size: var(--pa-text-sm); }
.pa-commercial .pa-btn--ghost { color: #fff; border-color: rgb(255 255 255 / .6); }
.pa-commercial .pa-btn--ghost:hover { background: rgb(255 255 255 / .12); }
.pa-commercial--compact { grid-template-columns: minmax(0, 1fr); }
.pa-commercial--compact .pa-commercial__contact { justify-items: start; }
.pa-commercial--compact .pa-commercial__numbers { justify-content: flex-start; }
@media (max-width: 760px) {
  .pa-commercial { grid-template-columns: minmax(0, 1fr); }
  .pa-commercial__contact { justify-items: stretch; }
  .pa-commercial__numbers { justify-content: stretch; }
  .pa-commercial a.pa-commercial__phone { flex: 1 1 200px; justify-content: center; }
}