/* ==========================================================================
   MODERN TOOLS SECTION (OUTILS PRATIQUES) — EXCELIUM
   Matching NOS SERVICES minimalist brutalist design system
   Split layout: 1 Big Featured Card on Left + 4 Grid Cards on Right
   ========================================================================== */

.ek-tools-section {
  background-color: #09090b;
  color: #ffffff;
  padding: 100px 0 115px 0;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 25px 50px -20px rgba(0, 0, 0, 0.9), inset 0 -25px 50px -20px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.ek-tools-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 768px) {
  .ek-tools-container {
    padding: 0 20px;
  }
}

/* ── Section Header (identical to ek-services-header) ── */
.ek-tools-header {
  text-align: left;
  margin-bottom: 56px;
}

.ek-tools-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.ek-tools-title {
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin: 0 0 16px 0;
}

.ek-tools-subtitle {
  font-size: 15px;
  line-height: 1.65;
  color: #a1a1aa;
  max-width: 680px;
  margin: 0;
}

/* ── Split Grid Layout (Left Big Card + Right 2x2 Grid) ── */
.ek-tools-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

/* ── Left: Featured Big Cell ── */
.ek-tools-featured-cell {
  position: relative;
  padding: 52px 48px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.ek-tools-featured-cell:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.ek-tools-featured-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.ek-tools-featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 1px;
  background: rgba(13, 148, 136, 0.12);
  border: 1px solid rgba(13, 148, 136, 0.35);
  color: #2dd4bf;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ek-tools-featured-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.ek-tools-featured-cell:hover .ek-tools-featured-icon-box {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}

.ek-tools-featured-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
}

.ek-tools-featured-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #a1a1aa;
  margin: 0 0 28px 0;
}

.ek-tools-featured-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ek-tools-featured-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #d4d4d8;
}

.ek-tools-featured-item i {
  color: #2dd4bf;
  font-size: 17px;
  flex-shrink: 0;
}

.ek-tools-featured-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.25s ease;
  margin-top: auto;
}

.ek-tools-featured-action i {
  font-size: 16px;
  transition: transform 0.25s ease;
}

.ek-tools-featured-cell:hover .ek-tools-featured-action {
  background: #ffffff;
  color: #09090b !important;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.ek-tools-featured-cell:hover .ek-tools-featured-action i {
  transform: translate(2px, -2px);
}

/* ── Right: 2x2 Subgrid ── */
.ek-tools-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.ek-tools-cell {
  position: relative;
  padding: 44px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: transparent;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit !important;
}

/* Left cells of the 2x2 subgrid get a right vertical divider */
.ek-tools-cell:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Bottom 2 cells don't need a bottom border (handled by grid bottom border) */
.ek-tools-cell:nth-child(3),
.ek-tools-cell:nth-child(4) {
  border-bottom: none;
}

.ek-tools-cell:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.ek-tools-icon-box {
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 32px;
}

.ek-tools-icon {
  font-size: 28px;
  color: #ffffff;
  transition: transform 0.25s ease;
}

.ek-tools-cell:hover .ek-tools-icon {
  transform: translateY(-2px);
}

.ek-tools-name {
  font-size: 18.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0 0 10px 0;
}

.ek-tools-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #a1a1aa;
  margin: 0 0 24px 0;
  font-weight: 400;
}

.ek-tools-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none !important;
  margin-top: auto;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.ek-tools-cell:hover .ek-tools-link {
  opacity: 1;
}

.ek-tools-link i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.ek-tools-cell:hover .ek-tools-link i {
  transform: translate(2px, -2px);
}

/* ── Responsive Behavior ── */
@media (max-width: 1080px) {
  .ek-tools-split-grid {
    grid-template-columns: 1fr;
  }

  .ek-tools-featured-cell {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 44px 32px;
  }

  .ek-tools-subgrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .ek-tools-subgrid {
    grid-template-columns: 1fr;
  }

  .ek-tools-cell:nth-child(odd) {
    border-right: none;
  }

  .ek-tools-cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px 20px;
  }

  .ek-tools-cell:last-child {
    border-bottom: none;
  }

  .ek-tools-featured-cell {
    padding: 36px 20px;
  }
}

/* ==========================================================================
   UNITED MODAL SYSTEM — EXCELIUM
   Exact match to approved United Modal design mockup
   Obsidian background (#111114), 1px sharp borders, monospace corner crosshairs,
   dark recessed inputs, teal metrics, and high-contrast solid white buttons.
   ========================================================================== */

.modal-content.ek-united-modal,
#modalBulletin .modal-content,
#modalTVA .modal-content,
#modalIS .modal-content,
#modalRAS .modal-content,
#modalTimbre .modal-content,
[id^="purchaseModal"] .modal-content {
  position: relative;
  background-color: #0e0e12 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1px !important;
  color: #ffffff !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: visible;
}

/* Corner Crosshairs (+) */
.ek-united-modal .ek-card-plus,
#modalBulletin .ek-card-plus,
#modalTVA .ek-card-plus,
#modalIS .ek-card-plus,
#modalRAS .ek-card-plus,
#modalTimbre .ek-card-plus,
[id^="purchaseModal"] .ek-card-plus {
  position: absolute;
  font-family: 'Space Grotesk', monospace, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1055;
}

.ek-card-plus-tl { top: -7px; left: -5px; }
.ek-card-plus-tr { top: -7px; right: -5px; }
.ek-card-plus-bl { bottom: -8px; left: -6px; }
.ek-card-plus-br { bottom: -8px; right: -6px; }

/* Modal Header */
.modal-header,
#modalBulletin .modal-header,
#modalTVA .modal-header,
#modalIS .modal-header,
#modalRAS .modal-header,
#modalTimbre .modal-header,
[id^="purchaseModal"] .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background-color: transparent !important;
  padding: 24px 28px 18px 28px !important;
}

.ek-modal-badge {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #71717a;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.modal-title,
#modalBulletin .modal-title,
#modalTVA .modal-title,
#modalIS .modal-title,
#modalRAS .modal-title,
#modalTimbre .modal-title,
[id^="purchaseModal"] .modal-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0;
}

/* Modal Body */
.modal-body,
#modalBulletin .modal-body,
#modalTVA .modal-body,
#modalIS .modal-body,
#modalRAS .modal-body,
#modalTimbre .modal-body,
[id^="purchaseModal"] .modal-body {
  padding: 24px 28px 28px 28px !important;
  background-color: transparent !important;
  color: #e4e4e7 !important;
}

/* Form Controls & Recessed Inputs */
#modalBulletin .form-label,
#modalTVA .form-label,
#modalIS .form-label,
#modalRAS .form-label,
#modalTimbre .form-label,
[id^="purchaseModal"] .form-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #a1a1aa !important;
  margin-bottom: 6px !important;
}

#modalBulletin .form-control,
#modalBulletin .form-select,
#modalTVA .form-control,
#modalTVA .form-select,
#modalIS .form-control,
#modalIS .form-select,
#modalRAS .form-control,
#modalRAS .form-select,
#modalTimbre .form-control,
#modalTimbre .form-select,
[id^="purchaseModal"] .form-control,
[id^="purchaseModal"] .form-select,
[id^="purchaseModal"] textarea {
  background-color: #141418 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 1px !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

#modalBulletin .form-control:focus,
#modalBulletin .form-select:focus,
#modalTVA .form-control:focus,
#modalTVA .form-select:focus,
#modalIS .form-control:focus,
#modalIS .form-select:focus,
#modalRAS .form-control:focus,
#modalRAS .form-select:focus,
#modalTimbre .form-control:focus,
#modalTimbre .form-select:focus,
[id^="purchaseModal"] .form-control:focus,
[id^="purchaseModal"] .form-select:focus,
[id^="purchaseModal"] textarea:focus {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) !important;
  background-color: #18181d !important;
  outline: none !important;
}

.input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group-text {
  background-color: #1a1a20 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-left: none !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  color: #a1a1aa !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Rate Selector Pills (TVA / RAS) */
.ek-rate-pills-bar {
  display: inline-flex;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 3px;
  gap: 4px;
  margin-top: 2px;
  margin-bottom: 12px;
}

.ek-rate-pill {
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #a1a1aa;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ek-rate-pill:hover,
.ek-rate-pill.active {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Summary / Result Cards (Side-by-Side Modern Layout) */
.ek-calc-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .ek-calc-cards-row {
    grid-template-columns: 1fr;
  }
}

.ek-calc-card,
.ek-summary-box,
#modalBulletin .table-responsive,
#modalTVA .card,
#modalIS .result-card,
#modalIS .acompte-card,
#modalIS .deadline-box,
#modalRAS .result-box,
#modalTimbre .result-box,
[id^="purchaseModal"] .alert-info,
[id^="purchaseModal"] .alert-secondary {
  background: #141418 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1px !important;
  color: #e4e4e7 !important;
  padding: 16px 18px !important;
}

.ek-calc-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.ek-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 8px;
  color: #d4d4d8;
}

.ek-calc-row.total-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: 700;
  color: #ffffff;
}

/* Teal Numbers in Summary */
#summaryTVA,
#summaryTTC,
#applicableRate,
#isAmountN,
#acompteAmount,
#montantTVADisplay,
#resultatDroits,
.ek-stat-highlight,
.ek-val-teal {
  color: #2dd4bf !important;
  font-weight: 700 !important;
  font-family: monospace, sans-serif;
}

/* Dark Table */
.table-bordered {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.table thead th {
  background-color: #0d0d10 !important;
  color: #a1a1aa !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.table tbody td {
  background-color: #141418 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Alert Boxes in Modals */
.modal-body .alert,
.modal-body .alert-info,
.modal-body .alert-warning {
  background-color: #141418 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #a1a1aa !important;
}

.modal-body .alert strong {
  color: #ffffff !important;
}

/* Modal Footer */
.modal-footer,
#modalBulletin .modal-footer,
#modalTVA .modal-footer,
#modalIS .modal-footer,
#modalRAS .modal-footer,
#modalTimbre .modal-footer,
[id^="purchaseModal"] .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 20px 28px !important;
  background-color: transparent !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Buttons in Modals */
.modal-footer .btn,
.modal-body .btn {
  border-radius: 1px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 26px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-footer .btn-primary,
.modal-body .btn-primary,
[id^="purchaseModal"] .btn-primary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  font-weight: 700 !important;
}

.modal-footer .btn-primary:hover,
.modal-body .btn-primary:hover,
[id^="purchaseModal"] .btn-primary:hover {
  background-color: #e4e4e7 !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15) !important;
}

.modal-footer .btn-secondary,
.modal-body .btn-secondary,
[id^="purchaseModal"] .btn-secondary {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

.modal-footer .btn-secondary:hover,
.modal-body .btn-secondary:hover,
[id^="purchaseModal"] .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}