/* ============================================================
   🔷 0. FORMULES / VARIABLES & STRUCTURE GÉNÉRALE
============================================================ */
.commit-wide-cols {
  --eng-label-col: 26%;
  --eng-plan-col: calc((100% - var(--eng-label-col)) / 4);
  position: relative;
  z-index: 5;
  margin: 4rem 0 1.8rem;
}

.commit-wide-cols .pricing-glass {
  padding-bottom: 2.5rem;
  position: relative;
}

/* ============================================================
   🔷 1. STYLE SPÉCIFIQUE : MODE COMMIT-WIDE
============================================================ */
.commit-wide {
  position: relative;
  z-index: 5;
  margin-top: 3rem;
}

.commit-wide .pricing-grid-glass thead th:first-child {
  width: 28%;
  text-align: left;
}

.commit-wide .pricing-grid-glass .row-label {
  text-align: left;
  font-weight: 800;
  color: #cfe8ff;
}

/* ============================================================
   🔷 2. TABLEAU ENGAGEMENT — STRUCTURE
============================================================ */
.commit-grid-2 {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.commit-wide-cols .commit-grid-2 thead th:first-child,
.commit-wide-cols .commit-grid-2 tbody td:first-child {
  width: var(--eng-label-col) !important;
  text-align: left !important;
}

.commit-wide-cols .commit-grid-2 thead th:nth-child(n+2),
.commit-wide-cols .commit-grid-2 tbody td:nth-child(n+2) {
  width: var(--eng-plan-col) !important;
  text-align: center !important;
}

/* ============================================================
   🔷 3. EN-TÊTES DU TABLEAU
============================================================ */
.commit-wide-cols .commit-grid-2 thead th {
  padding: 0 10px 12px !important;
  vertical-align: bottom !important;
}

.commit-wide-cols .commit-grid-2 thead th .col-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 160px !important;
  text-align: center !important;
}

.commit-wide-cols .commit-grid-2 thead th:first-child .col-head {
  align-items: flex-start !important;
  padding-left: 18px !important;
}

.commit-wide-cols .commit-grid-2 thead .title {
  font-weight: 900 !important;
  font-size: 1.35em !important;
  color: #18e7ff !important;
  letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(24,231,255,.13);
}

.commit-wide-cols .commit-grid-2 thead th:first-child .title {
  color: #fff !important;
}

/* ============================================================
   🔷 4. CORPS DU TABLEAU — CELLULES
============================================================ */
.commit-wide-cols .commit-grid-2 th,
.commit-wide-cols .commit-grid-2 td {
  font-size: 1.08rem !important;
  color: #e8eaff !important;
  background: transparent !important;
  border: none !important;
}

.commit-wide-cols .commit-grid-2 .row-label {
  text-align: left !important;
  font-weight: 800 !important;
  color: #cfe8ff !important;
  padding-left: 18px !important;
}

.commit-wide-cols .commit-grid-2 td strong {
  font-weight: 900 !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
}

.commit-wide-cols .commit-grid-2 td em {
  display: block !important;
  margin-top: 2px !important;
  color: #a8c6ff !important;
  font-style: normal !important;
  opacity: .9 !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
}

.commit-wide-cols .commit-grid-2 .disc {
  color: #7feaff !important;
  font-weight: 900 !important;
  margin-left: .25rem !important;
}

/* ============================================================
   🔷 5. COLONNE BETA OPEN ACCESS
============================================================ */
.commit-wide-cols .commit-grid-2 td.beta-col {
  text-align: center !important;
  font-weight: 900 !important;
  color: #fff !important;
}

.commit-wide-cols .commit-grid-2 .beta-tagline {
  display: block !important;
  margin-top: .2rem !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  color: #a8ddff !important;
  opacity: .9 !important;
}

.commit-wide-cols .commit-grid-2 .beta-note {
  display: inline-block !important;
  margin-top: .35rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  cursor: default !important;
  text-shadow: none !important;
  transition: none !important;
}

.commit-wide-cols .commit-grid-2 .beta-note:hover {
  color: #fff !important;
  text-shadow: none !important;
}

.commit-wide-cols .commit-grid-2 .betaLeft {
  font-variant-numeric: tabular-nums !important;
}

/* ============================================================
   🔷 6. BULLE PREMIUM (ENCADRÉ)
============================================================ */
.pricing-table-flex.commit {
  position: relative !important;
}

.premium-col-bulle.premium-commit {
  position: absolute !important;
  top: 0 !important;
  left: calc(var(--eng-label-col) + var(--eng-plan-col) * 2) !important;
  width: var(--eng-plan-col) !important;
  height: 100% !important;
  border-radius: 1em !important;
  border: 2px solid rgba(24,231,255,.55) !important;
  box-shadow: 0 0 10px 2px rgba(24,231,255,.25) !important;
  transform: none !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.commit-wide-cols .pricing-grid-glass th,
.commit-wide-cols .pricing-grid-glass td {
  position: relative !important;
  z-index: 3 !important;
}

/* ============================================================
   🔷 7. PRIX CLIQUABLES
============================================================ */
.price-choice {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  text-align: center !important;
  cursor: pointer !important;
}

.price-choice .main {
  display: block;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  font-size: 1.2rem !important;
}

.price-choice .sub {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  color: #a8c6ff;
  opacity: .95;
  font-size: 1rem !important;
}

.price-choice .sub-pct {
  color: #7feaff;
  font-weight: 900;
  letter-spacing: .01em;
}

.price-choice:hover .main {
  color: #18e7ff;
  text-shadow: 0 0 8px rgba(24,231,255,.15);
}

/* ============================================================
   🔷 8. CTA SOUS LES TABLEAUX
============================================================ */
.commit-grid-2 .pricing-choose td {
  text-align: center;
  padding: 18px 0;
}

/* ============================================================
   🔷 9. RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .premium-col-bulle.premium-commit {
    box-shadow: none;
  }
}