/* ==============================================
   Calculateur VMA — v4.1.0
   ============================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* ── Variables ── */
.cva-wrap {
  --cva-blue:       #2F4FA1;
  --cva-blue-dk:    #1e3580;
  --cva-blue-bg:    rgba(47,79,161,0.07);
  --cva-blue-mid:   rgba(47,79,161,0.18);
  --cva-cream:      #F4EDDE;
  --cva-cream-dk:   #e8deca;
  --cva-white:      #FFFFFF;
  --cva-black:      #111111;
  --cva-muted:      rgba(0,0,0,0.42);
  --cva-error:      #dc2626;
  --cva-r:          14px;
  --cva-font:       'DM Sans', sans-serif;
  --cva-disp:       'Bebas Neue', sans-serif;
}

/* ── Reset scoped ── */
.cva-wrap, .cva-wrap *,
.cva-wrap *::before, .cva-wrap *::after {
  box-sizing: border-box;
}
.cva-wrap { font-family: var(--cva-font); max-width: 580px; width: 100%; }

/* ══════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════ */
.cva-card {
  background: var(--cva-white);
  border-radius: var(--cva-r);
  border: 2px solid var(--cva-blue);
  box-shadow: 0 12px 40px rgba(47,79,161,0.13);
  overflow: hidden;
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.cva-header {
  background: var(--cva-blue);
  padding: 24px 28px 18px;
  position: relative;
  overflow: hidden;
}
.cva-header::after {
  content: 'VMA';
  position: absolute; right: -4px; top: -18px;
  font-family: var(--cva-disp); font-size: 110px;
  color: rgba(255,255,255,0.06); line-height: 1;
  pointer-events: none; user-select: none;
}
.cva-title {
  font-family: var(--cva-disp) !important;
  font-size: 32px !important;
  color: var(--cva-white) !important;
  letter-spacing: 1.5px !important;
  line-height: 1 !important;
  margin: 0 !important; padding: 0 !important;
  border: none !important; background: none !important;
  text-transform: none !important;
}
.cva-subtitle {
  color: rgba(244,237,222,0.65) !important;
  font-size: 12px !important;
  margin: 5px 0 0 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ══════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════ */
.cva-tabs {
  display: flex !important;
  background: var(--cva-cream) !important;
  border-bottom: 2px solid var(--cva-cream-dk) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cva-tab {
  flex: 1 !important;
  padding: 11px 6px 9px !important;
  text-align: center !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--cva-blue) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -2px !important;
  font-family: var(--cva-font) !important;
  line-height: 1.3 !important;
  transition: background .2s !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: block !important;
}
.cva-tab span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  opacity: .55;
  margin-top: 1px !important;
}
.cva-tab:hover  { background: rgba(47,79,161,0.08) !important; }
.cva-tab.active {
  background: var(--cva-white) !important;
  border-bottom-color: var(--cva-blue) !important;
  font-weight: 700 !important;
  color: var(--cva-blue) !important;
}

/* ══════════════════════════════════════════════
   BODY / PANELS
   ══════════════════════════════════════════════ */
.cva-body        { padding: 24px 28px; background: var(--cva-white); }
.cva-body-results{ padding-top: 20px; }
.cva-panel       { display: none; }
.cva-panel.active{ display: block; }

/* ══════════════════════════════════════════════
   FORM
   ══════════════════════════════════════════════ */
.cva-group { margin-bottom: 16px; }
.cva-group label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--cva-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  margin-bottom: 7px !important;
}
.cva-group input[type="number"] {
  width: 100% !important;
  background: var(--cva-cream) !important;
  border: 2px solid transparent !important;
  border-radius: 9px !important;
  padding: 11px 15px !important;
  color: var(--cva-black) !important;
  font-family: var(--cva-font) !important;
  font-size: 16px !important;
  outline: none !important;
  transition: border-color .2s, background .2s !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
.cva-group input[type="number"]::-webkit-inner-spin-button,
.cva-group input[type="number"]::-webkit-outer-spin-button { opacity: .4; }
.cva-group input[type="number"]:focus {
  border-color: var(--cva-blue) !important;
  background: var(--cva-white) !important;
  box-shadow: 0 0 0 3px rgba(47,79,161,0.12) !important;
}

.cva-hint {
  font-size: 12px !important;
  color: var(--cva-muted) !important;
  margin: 0 0 14px !important;
  line-height: 1.5 !important;
  font-style: italic !important;
}
.cva-error {
  color: var(--cva-error) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 6px 0 !important;
  display: none;
}
.cva-error.show { display: block !important; }

/* ══════════════════════════════════════════════
   BOUTONS — !important partout (anti-Elementor)
   ══════════════════════════════════════════════ */
.cva-btn {
  display: block !important;
  width: 100% !important;
  padding: 13px 20px !important;
  margin-top: 6px !important;
  background: var(--cva-blue) !important;
  color: var(--cva-white) !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: var(--cva-disp) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s, box-shadow .15s !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1 !important;
  text-transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.cva-btn:hover {
  background: var(--cva-blue-dk) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(47,79,161,0.28) !important;
  color: var(--cva-white) !important;
}
.cva-btn:active { transform: translateY(0) !important; }
.cva-btn:focus  { outline: 3px solid rgba(47,79,161,0.3) !important; outline-offset: 2px !important; }

/* Ghost (recalculer) */
.cva-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: rgba(255,255,255,0.13) !important;
  color: var(--cva-cream) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 8px !important;
  font-family: var(--cva-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  cursor: pointer !important;
  transition: background .2s !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.cva-btn-ghost:hover {
  background: rgba(255,255,255,0.22) !important;
  color: var(--cva-white) !important;
}

/* Switcher */
.cva-switcher {
  display: inline-flex !important;
  background: var(--cva-cream) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  border: none !important;
}
.cva-sw {
  padding: 6px 13px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-family: var(--cva-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--cva-blue) !important;
  cursor: pointer !important;
  transition: background .2s, color .2s !important;
  opacity: .5;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.cva-sw.active {
  background: var(--cva-blue) !important;
  color: var(--cva-white) !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════
   BANDEAU RÉSULTAT VMA
   ══════════════════════════════════════════════ */
.cva-banner {
  background: var(--cva-blue);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cva-banner-vma  { display: flex; align-items: baseline; gap: 10px; }
.cva-banner-label{
  font-size: 11px; font-weight: 700; color: rgba(244,237,222,0.65);
  text-transform: uppercase; letter-spacing: 1px;
}
.cva-banner-num  {
  font-family: var(--cva-disp);
  font-size: 56px; color: var(--cva-cream); line-height: 1;
}
.cva-banner-unit { font-size: 15px; color: rgba(244,237,222,0.55); }

/* ══════════════════════════════════════════════
   ACCORDÉONS (natifs <details>)
   ══════════════════════════════════════════════ */
.cva-accordion {
  border-top: 2px solid var(--cva-cream-dk);
}
.cva-accordion[open] > .cva-accordion-trigger .cva-acc-icon {
  transform: rotate(180deg);
}
.cva-accordion-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 28px !important;
  background: var(--cva-cream) !important;
  cursor: pointer !important;
  font-family: var(--cva-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cva-blue) !important;
  user-select: none;
  list-style: none !important;
  transition: background .2s !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.cva-accordion-trigger::-webkit-details-marker { display: none; }
.cva-accordion-trigger::marker { display: none; }
.cva-accordion-trigger em {
  font-weight: 400; font-style: normal;
  color: var(--cva-muted); margin-left: 6px; font-size: 12px;
}
.cva-accordion-trigger:hover { background: var(--cva-cream-dk) !important; }
.cva-acc-icon { flex-shrink: 0; transition: transform .25s; color: var(--cva-blue); }

.cva-accordion-body { padding: 20px 28px 24px; background: var(--cva-white); }
.cva-acc-desc {
  font-size: 12px; color: var(--cva-muted); margin-bottom: 14px; line-height: 1.6;
}

/* ══════════════════════════════════════════════
   ZONES D'ENTRAÎNEMENT
   ══════════════════════════════════════════════ */
.cva-zones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.cva-zone {
  background: var(--cva-cream);
  border-radius: 9px; padding: 11px 6px; text-align: center;
  border-left: 4px solid transparent;
  transition: transform .15s;
}
.cva-zone:hover { transform: translateY(-2px); }
.cva-zone-name { font-size: 9px; color: var(--cva-blue); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.cva-zone-pct  { font-size: 10px; color: var(--cva-muted); margin: 3px 0; }
.cva-zone-val  { font-family: var(--cva-disp); font-size: 14px; line-height: 1.2; }
.cva-z1 { border-left-color: #60a5fa; } .cva-z1 .cva-zone-val { color: #60a5fa; }
.cva-z2 { border-left-color: #34d399; } .cva-z2 .cva-zone-val { color: #34d399; }
.cva-z3 { border-left-color: var(--cva-blue); } .cva-z3 .cva-zone-val { color: var(--cva-blue); }
.cva-z4 { border-left-color: #f97316; } .cva-z4 .cva-zone-val { color: #f97316; }
.cva-z5 { border-left-color: #dc2626; } .cva-z5 .cva-zone-val { color: #dc2626; }

/* ══════════════════════════════════════════════
   TABLEAU (section toujours visible + accordéons)
   ══════════════════════════════════════════════ */
.cva-table-topbar {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.cva-table-heading {
  font-family: var(--cva-disp); font-size: 20px;
  color: var(--cva-blue); letter-spacing: .8px;
}
.cva-table-desc {
  font-size: 12px; color: var(--cva-muted);
  margin-bottom: 12px; line-height: 1.5;
}
.cva-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 9px; border: 2px solid var(--cva-cream-dk);
}
table.cva-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; min-width: 300px;
}
.cva-table thead tr { background: var(--cva-blue); }
.cva-table thead th {
  padding: 9px 11px; text-align: center;
  font-family: var(--cva-disp); font-size: 13px;
  letter-spacing: .7px; color: var(--cva-white);
  white-space: nowrap; font-weight: 400;
}
.cva-table thead th:first-child { text-align: left; padding-left: 14px; }
.cva-table tbody tr { transition: background .12s; }
.cva-table tbody tr:nth-child(even) { background: var(--cva-cream); }
.cva-table tbody tr:hover { background: var(--cva-blue-bg); }
.cva-table tbody td {
  padding: 9px 11px; text-align: center;
  color: var(--cva-black); white-space: nowrap;
  border-bottom: 1px solid var(--cva-cream-dk); font-size: 13px;
}
.cva-table tbody tr:last-child td { border-bottom: none; }
.cva-table tbody td:first-child {
  text-align: left; padding-left: 14px;
  font-weight: 700; color: var(--cva-blue);
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
/* Colonne 100% VMA toujours mise en avant */
.cva-table .col-100 {
  background: rgba(47,79,161,0.09);
  font-weight: 700; color: var(--cva-blue) !important;
}
.cva-table thead .col-100 { background: var(--cva-blue-dk); }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 500px) {
  .cva-header,
  .cva-body,
  .cva-banner,
  .cva-accordion-trigger,
  .cva-accordion-body { padding-left: 16px !important; padding-right: 16px !important; }
  .cva-title       { font-size: 26px !important; }
  .cva-banner-num  { font-size: 44px; }
  .cva-zones       { grid-template-columns: 1fr 1fr; }
  .cva-zone:last-child { grid-column: span 2; }
  .cva-table-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
}