/* Police locale propre à cette modale : aucun effet sur l'inscription. */
@font-face {
  font-family: 'Inter Comparaison';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/home-v2/fonts/inter-latin-400-normal.8909904ab6c8.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Comparaison';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/home-v2/fonts/inter-latin-500-normal.f3779f1efccc.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Comparaison';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/home-v2/fonts/inter-latin-600-normal.f9a06e79cd3a.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Comparaison';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/home-v2/fonts/inter-latin-700-normal.6f56409fd3d6.woff2') format('woff2');
}

/* L'état ouvert reste piloté par la classe .on du JavaScript existant. */
#compare-modal {
  --f-body: 'Inter Comparaison', Inter, system-ui, -apple-system, sans-serif;
  --f-display: var(--f-body);
  --ink: #17212d;
  --ink-2: #45505e;
  --muted: #657084;
  --line: #e7eaf0;
  --line-soft: #f0f2f5;
  --orange: #ed7117;
  --orange-deep: #d9620c;
  --plan-ink: var(--ink);
  --plan-card: #fff;
  --plan-rule: var(--line);
  padding: 24px;
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(23, 33, 45, .45);
  backdrop-filter: blur(6px);
  font-family: var(--f-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#compare-modal .modal-box {
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  max-height: calc(100vh - 48px);
  max-height: min(92dvh, calc(100dvh - 48px));
  padding: 0 28px 26px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c5cbd4 transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(23, 33, 45, .2);
  animation: none;
}
#compare-modal .modal-head {
  position: sticky;
  top: 0;
  z-index: 6;
  gap: 20px;
  margin: 0 -28px 16px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
#compare-modal .modal-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.035em;
}
#compare-modal .modal-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
#compare-modal .modal-close:hover {
  border-color: #cbd2dc;
  background: #f8f9fb;
  color: var(--ink);
}
#compare-modal .modal-box .msub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
#compare-modal :is(a, button):focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 3px;
}

/* Même grille claire que l'accueil V2, sans panneaux de couleur. */
#compare-modal .pricing {
  min-width: 0;
  margin-top: 0;
}
#compare-modal .ptable-wrap {
  max-width: 100%;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
  scrollbar-width: thin;
  scrollbar-color: #c5cbd4 #f8f9fb;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#compare-modal .ptable {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
#compare-modal .ptable thead .lead {
  width: 29%;
  box-shadow: none;
}
#compare-modal .ptable th,
#compare-modal .ptable td {
  padding: 7px 16px;
  vertical-align: middle;
}
#compare-modal .ptable .pcol {
  border-left: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
#compare-modal .ptable .pcol-top {
  padding: 18px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  scroll-snap-align: start;
}
#compare-modal .ptable .pcol-top::after {
  display: none;
}
#compare-modal .pflag {
  position: static;
  display: inline-block;
  margin: 0 0 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--orange-deep);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
#compare-modal .plan-essentiel .pflag {
  color: var(--muted);
}
#compare-modal .pname {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.035em;
}
#compare-modal .pdesc {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}
#compare-modal .ptable .lead {
  padding-left: 16px;
  border-left: 0;
  background: #fff;
}
#compare-modal .ptable .grouprow th,
#compare-modal .ptable .grouprow td {
  padding-block: 10px;
  background: #f7f8fa;
}
#compare-modal .gpill {
  width: 100%;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  white-space: normal;
}
#compare-modal .gpill b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
#compare-modal .gpill small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  opacity: 1;
}
#compare-modal .prow th,
#compare-modal .prow td {
  border-bottom: 1px solid var(--line-soft);
}
#compare-modal .prow .type {
  font-size: 14px;
  line-height: 1.35;
}
#compare-modal .prow .chars {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
#compare-modal .ptable .price {
  color: var(--ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
#compare-modal .ptable .price sup {
  margin-left: 3px;
  font-size: 10px;
}
#compare-modal .ptable-section--feats .prow th,
#compare-modal .ptable-section--feats .prow td {
  padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
}
#compare-modal .pmark {
  width: 20px;
  height: 20px;
}
#compare-modal .ptext {
  color: var(--ink-2);
  font-size: 13px;
}
#compare-modal .ptable .pcol-bottom {
  padding: 16px 20px;
  border-radius: 0;
}
#compare-modal .pfoot-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 0;
  border: 0;
}
#compare-modal .pprice {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
#compare-modal .pprice sup {
  margin-left: 2px;
  font-size: 10px;
}
#compare-modal .pcta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  transition: background .15s ease, border-color .15s ease;
}
#compare-modal .pcta span {
  white-space: normal;
}
#compare-modal .pcta:hover {
  background: var(--orange-deep);
  filter: none;
  transform: none;
}
#compare-modal .pcta--current {
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
}
#compare-modal .pcta--current:hover {
  border-color: #cbd2dc;
  background: #f8f9fb;
}
#compare-modal .ptechnical-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .4rem;
}
#compare-modal .ptechnical-old {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  text-decoration-thickness: 1px;
}
#compare-modal .pfeat .ptechnical-note {
  max-width: 190px;
  margin: .25rem auto 0;
  font-size: 12px;
  line-height: 1.35;
  text-wrap: balance;
}
#compare-modal .pricing-reassure {
  gap: 8px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
#compare-modal .ptable-hint {
  display: none;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Le défilement horizontal reste limité au tableau ; titre et fermeture fixes. */
@media (max-width: 850px) {
  #compare-modal .modal-box {
    padding-inline: 20px;
  }
  #compare-modal .modal-head {
    margin-inline: -20px;
    padding-inline: 20px;
  }
  #compare-modal .ptable-hint {
    display: block;
  }
  #compare-modal .ptable-wrap {
    scroll-padding-left: 220px;
  }
  #compare-modal .ptable .lead {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--line);
  }
  #compare-modal .ptable thead .lead {
    width: 220px;
    z-index: 3;
  }
}
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  #compare-modal {
    padding: 0;
    backdrop-filter: none;
  }
  #compare-modal .modal-box {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 0 16px max(22px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #compare-modal .modal-head {
    gap: 12px;
    margin-inline: -16px;
    padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  }
  #compare-modal .modal-head h2 {
    font-size: 20px;
  }
  #compare-modal .modal-box .msub {
    margin-bottom: 16px;
    font-size: 13px;
  }
  #compare-modal .ptable {
    min-width: 720px;
  }
  #compare-modal .ptable thead .lead {
    width: 144px;
  }
  #compare-modal .ptable-wrap {
    scroll-padding-left: 144px;
  }
  #compare-modal .ptable th,
  #compare-modal .ptable td {
    padding-inline: 12px;
  }
  #compare-modal .ptable .pcol-top,
  #compare-modal .ptable .pcol-bottom {
    padding-inline: 14px;
  }
  #compare-modal .ptable .lead {
    padding-left: 12px;
  }
  #compare-modal .pname {
    font-size: 21px;
  }
  #compare-modal .pdesc {
    font-size: 12px;
  }
  #compare-modal .prow .type {
    font-size: 13px;
  }
  #compare-modal .pricing-reassure {
    align-items: flex-start;
    font-size: 11px;
  }
}
@media (max-width: 359px) {
  #compare-modal .modal-head h2 {
    font-size: 18px;
  }
  #compare-modal .ptable {
    min-width: 624px;
  }
  #compare-modal .ptable thead .lead {
    width: 120px;
  }
  #compare-modal .ptable-wrap {
    scroll-padding-left: 120px;
  }
  #compare-modal .ptable .pcol-top,
  #compare-modal .ptable .pcol-bottom {
    padding-inline: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #compare-modal .modal-close,
  #compare-modal .pcta {
    transition: none;
  }
}