/* Le tableau comparatif de First Silicon, partage par l accueil et la page du banc.
 * Modeles en colonnes, mesures en lignes ; la colonne du meilleur modele est
 * encadree et teintee ; ailleurs, le meilleur d une ligne passe sur fond gris. */
.cmp-fig {
  --cmp-ink: #111;
  --cmp-ink-3: #898781;
  --cmp-hair: #e4dfd5;
  --cmp-accent: #2a78d6;
  --cmp-tint: #e4edf8;
  --cmp-win: #efeae0;
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(900px, calc(100vw - 2 * var(--pad, 24px)));
  margin: clamp(48px, 7vh, 72px) 0;
}
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: 15px; color: var(--cmp-ink); }
.cmp th, .cmp td { padding: 20px 14px; border-bottom: 1px solid var(--cmp-hair); text-align: center; vertical-align: middle; }
.cmp thead th { padding: 22px 14px 20px; border-bottom-color: #d6cfc1; vertical-align: bottom; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .mh { display: block; font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.cmp thead small { display: block; margin-top: 3px; font-size: 12px; color: var(--cmp-ink-3); font-weight: 400; }
.cmp th[scope="row"] { text-align: left; padding-left: 4px; width: 26%; font-weight: 400; }
.cmp .rl { display: block; font-weight: 500; font-size: 15px; }
.cmp th[scope="row"] small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--cmp-ink-3); }
.cmp td b { display: block; font-weight: 400; font-size: 17px; }
.cmp td small { display: block; margin-top: 3px; font-size: 12px; color: var(--cmp-ink-3); }
.cmp td.best b, .cmp td.win b { font-weight: 600; }
.cmp td.win { background: var(--cmp-win); }
.cmp .hi { background: var(--cmp-tint); border-left: 1.5px solid var(--cmp-accent); border-right: 1.5px solid var(--cmp-accent); border-bottom-color: transparent; }
.cmp th.hi.top { border-top: 1.5px solid var(--cmp-accent); border-radius: 14px 14px 0 0; background: transparent; border-bottom: 1px solid transparent; }
.cmp td.hi.bot, .cmp tbody tr:last-child td.hi.bot { border-bottom: 1.5px solid var(--cmp-accent); border-radius: 0 0 14px 14px; }
.cmp-fig figcaption { margin: 18px auto 0; max-width: calc(660px - 2 * var(--pad, 24px)); padding: 0; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: rgba(17, 17, 17, 0.55); }

/* Telephone : le tableau prend toute la largeur de l ecran et defile de cote ;
 * la colonne des mesures reste fixe a gauche, alignee sur le texte. */
@media (max-width: 720px) {
  .cmp-fig { width: 100vw; }
  .cmp { min-width: 620px; font-size: 13.5px; }
  .cmp th, .cmp td { padding: 14px 8px; }
  .cmp thead th { padding: 16px 8px 14px; }
  .cmp th[scope="row"], .cmp thead th:first-child { position: sticky; left: 0; z-index: 2; background: #f8f5ef; box-shadow: inset -1px 0 0 var(--cmp-hair); }
  .cmp th[scope="row"] { width: 150px; min-width: 150px; padding-left: var(--pad, 18px); padding-right: 12px; }
  .cmp .mh { font-size: 16px; }
  .cmp thead small, .cmp td small { font-size: 11px; }
  .cmp .rl { font-size: 13.5px; }
  .cmp th[scope="row"] small { font-size: 11px; }
  .cmp td b { font-size: 15.5px; }
  .essay figure.cmp-fig figcaption, .cmp-fig figcaption { max-width: none; padding: 0 var(--pad, 18px); }
}