/* MSF Telecom · comparateur */
.pg--cmp { padding-left: var(--pad); padding-right: var(--pad); }
.pg--cmp .phead { padding-left: 0; padding-right: 0; }
.cmp__help { font-size: 15px; color: var(--gray); }
.cmp { --lab: 190px; }
.cmp__head, .cmp__row { display: grid; grid-template-columns: var(--lab) repeat(var(--n), minmax(0, 1fr)); gap: 0 14px; }
.cmp__head > :first-child { grid-column-start: 2; }
.cmp__head { padding: 8px 0 14px; }
.cmp__col { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px; border-radius: var(--r); background: var(--cream); }
.cmp__stage { position: relative; display: block; width: 100%; max-width: 220px; aspect-ratio: 9 / 10; border-radius: 18px; background: radial-gradient(70% 60% at 50% 42%, #fff 0%, #fff 30%, rgba(255, 255, 255, 0) 72%); }
.cmp__name { font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.cmp__add { width: 100%; height: 46px; font-size: 14.5px; }
.cmp__rm { position: absolute; z-index: 2; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: #fff; font-size: 18px; color: #55555a; box-shadow: inset 0 0 0 1px var(--line); }
.cmp__col--add { justify-content: center; background: none; box-shadow: inset 0 0 0 1.5px dashed var(--line); outline: 1.5px dashed #d8d2ca; outline-offset: -1.5px; }
.cmp__pick { display: grid; gap: 10px; width: 100%; max-width: 240px; font-size: 15px; color: #55555a; }
.cmp__pick select { height: 46px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 14.5px; background: var(--cream); color: var(--ink); }
.cmp__row { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cmp__label { color: var(--gray); font-size: 14px; }
.cmp__cell { text-align: center; line-height: 1.4; }
.cmp__cell em { display: block; font-style: normal; font-size: 13px; color: var(--gray); }
.cmp__cell b { font-weight: 500; font-size: 18px; }
.cmp__cell b.is-best { color: var(--cta); }
.cmp__cell s { color: var(--gray); font-size: 13.5px; }
.cmp__mlabel { display: none; }
.cmp__add .sm { display: none; }

@media (max-width: 760px) {
  .cmp__head, .cmp__row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 8px; }
  .cmp__head > :first-child { grid-column-start: auto; }
  .cmp__head { padding-top: 6px; }
  .cmp__label { grid-column: 1 / -1; margin-bottom: 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
  .cmp__col { padding: 8px; gap: 8px; border-radius: 18px; }
  .cmp__name { font-size: 14px; }
  .cmp__add { height: 38px; padding: 0 10px; font-size: 12.5px; }
  .cmp__rm { top: 6px; right: 6px; width: 26px; height: 26px; font-size: 15px; }
  .cmp__row { font-size: 13.5px; padding: 12px 0; }
  .cmp__cell b { font-size: 15px; }
  .cmp__add .lg, .cmp__pick span { display: none; }
  .cmp__add .sm { display: inline; }
  .cmp__col--add { padding: 8px 6px; }
  .cmp__pick { font-size: 13px; }
  .cmp__pick select { width: 100%; height: 40px; font-size: 13px; padding: 0 8px; }
}