/* ── VMA Calculator ──────────────────────────────────── */
    .vma-header {
      background: linear-gradient(135deg, rgba(255,120,0,0.12), rgba(255,69,0,0.06));
      border: 1px solid rgba(255,120,0,0.2);
      border-radius: 18px;
      padding: 20px 22px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .vma-header-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: linear-gradient(135deg, #ff7800, #ff4500);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; flex-shrink: 0;
    }
    .vma-header-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 22px; font-weight: 800;
      letter-spacing: 2px;
      color: #fff;
    }
    .vma-header-sub { font-size: 11px; color: #555; letter-spacing: 1px; margin-top: 2px; }

    .vma-sub-tabs {
      display: flex;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 18px;
      gap: 0;
    }
    .vma-sub-tab-btn {
      flex: 1; padding: 11px 0;
      background: transparent; border: none;
      border-bottom: 2px solid transparent;
      color: #555; cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 12px; font-weight: 600;
      transition: all 0.2s;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }
    .vma-sub-tab-btn.active {
      color: #ff7800;
      border-bottom-color: #ff7800;
    }
    .vma-sub-tab-btn:hover:not(.active) { color: #aaa; }

    .vma-slider-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px; padding: 18px 20px;
      margin-bottom: 16px;
    }
    .vma-val-row {
      display: flex; justify-content: space-between;
      align-items: center; margin-bottom: 10px;
    }
    .vma-val-label { color: #aaa; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
    .vma-val-number {
      color: #ff7800; font-size: 30px;
      font-weight: 800; letter-spacing: 2px; line-height: 1;
    }
    .vma-val-unit { font-size: 13px; color: #888; font-weight: 400; }
    .vma-slider {
      width: 100%; accent-color: #ff7800;
      cursor: pointer; height: 6px; margin: 4px 0 6px;
    }
    .vma-slider-labels {
      display: flex; justify-content: space-between;
      font-size: 11px; color: #444; margin-bottom: 12px;
    }
    .vma-number-input {
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,120,0,0.35);
      border-radius: 10px; color: #fff;
      font-size: 18px; font-family: 'DM Mono', monospace;
      padding: 10px 16px; outline: none;
      width: 100%; box-sizing: border-box;
    }

    .vma-table-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px; overflow: hidden;
      margin-bottom: 16px;
    }
    .vma-table-header {
      padding: 10px 14px 6px;
      background: rgba(255,120,0,0.07);
      border-bottom: 1px solid rgba(255,120,0,0.15);
      color: #ff7800; font-size: 11px;
      letter-spacing: 2px; text-transform: uppercase;
    }
    .vma-table { width: 100%; border-collapse: collapse; }
    .vma-table th {
      padding: 10px 10px;
      text-align: center;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.5px;
      border-left: 1px solid rgba(255,255,255,0.04);
    }
    .vma-table th:first-child { text-align: left; padding-left: 14px; color: #555; border-left: none; }
    .vma-table td {
      padding: 12px 10px;
      text-align: center;
      font-family: 'DM Mono', monospace;
      font-size: 13px;
      border-left: 1px solid rgba(255,255,255,0.04);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .vma-table td:first-child {
      padding-left: 14px; text-align: left;
      color: #fff; font-weight: 700;
      border-left: none; font-family: 'DM Sans', sans-serif;
    }
    .vma-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
    .vma-table-legend {
      padding: 10px 14px;
      display: flex; gap: 10px; flex-wrap: wrap;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .vma-legend-dot {
      display: flex; align-items: center; gap: 5px;
    }
    .vma-legend-dot span { color: #555; font-size: 10px; }

    .vma-race-row {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .vma-race-row:last-child { border-bottom: none; }
    .vma-race-row:nth-child(even) { background: rgba(255,255,255,0.015); }
    .vma-race-top {
      display: flex; justify-content: space-between;
      align-items: flex-start;
    }
    .vma-race-name { color: #fff; font-size: 15px; font-weight: 700; }
    .vma-race-note { color: #555; font-size: 11px; margin-top: 3px; }
    .vma-race-time {
      font-family: 'DM Mono', monospace;
      font-size: 20px; font-weight: 700; line-height: 1;
      text-align: right;
    }
    .vma-race-pace {
      font-family: 'DM Mono', monospace;
      font-size: 11px; color: #666; margin-top: 4px; text-align: right;
    }
    .vma-race-bar-bg {
      margin-top: 10px;
      background: rgba(0,0,0,0.3);
      border-radius: 4px; height: 3px; overflow: hidden;
    }
    .vma-race-bar-fill { height: 100%; border-radius: 4px; }
    .vma-race-bar-labels {
      display: flex; justify-content: space-between;
      margin-top: 4px; font-size: 10px;
    }

    .vma-cooper-toggle {
      display: flex; gap: 12px; margin-bottom: 16px;
    }
    .vma-cooper-toggle-btn {
      flex: 1; padding: 14px 0;
      border-radius: 10px; cursor: pointer;
      transition: all 0.2s;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700; font-size: 14px;
    }
    .vma-cooper-toggle-btn.active {
      border: 1.5px solid #ff7800;
      background: rgba(255,120,0,0.12);
      color: #ff7800;
    }
    .vma-cooper-toggle-btn:not(.active) {
      border: 1.5px solid rgba(255,255,255,0.08);
      background: transparent; color: #555;
    }
    .vma-cooper-toggle-sub { font-size: 11px; font-weight: 400; margin-top: 3px; }

    .vma-result-card {
      background: rgba(255,255,255,0.04);
      border-radius: 16px; padding: 22px;
      text-align: center; margin-bottom: 16px;
    }
    .vma-result-label {
      color: #888; font-size: 11px;
      letter-spacing: 3px; text-transform: uppercase;
      margin-bottom: 8px;
    }
    .vma-result-value {
      font-size: 72px; font-weight: 900;
      line-height: 1; letter-spacing: 2px;
    }
    .vma-result-bar-bg {
      margin: 14px 0 10px;
      background: rgba(0,0,0,0.3);
      border-radius: 8px; height: 10px; overflow: hidden;
    }
    .vma-result-bar-fill {
      height: 100%; border-radius: 8px;
      transition: width 0.5s ease;
    }
    .vma-fitness-badge {
      display: inline-block;
      border-radius: 20px;
      padding: 6px 20px;
      font-size: 14px; font-weight: 700; letter-spacing: 1px;
    }
    .vma-formula {
      margin-top: 14px; padding: 10px 16px;
      background: rgba(0,0,0,0.2);
      border-radius: 8px; color: #666;
      font-size: 12px; font-family: 'DM Mono', monospace;
    }
    .vma-fitness-grid { display: flex; flex-direction: column; gap: 8px; }
    .vma-fitness-row {
      display: flex; justify-content: space-between;
      align-items: center; padding: 8px 14px;
      border-radius: 8px;
    }
    .vma-fitness-row-left { display: flex; align-items: center; gap: 10px; }
    .vma-fitness-row-dot { width: 10px; height: 10px; border-radius: 50%; }
    .vma-dist-input-wrap { position: relative; margin-top: 10px; }
    .vma-dist-unit {
      position: absolute; right: 16px; top: 50%;
      transform: translateY(-50%);
      color: #555; font-size: 14px;
      font-family: 'DM Mono', monospace;
    }
    .vma-sync-note {
      margin-top: 14px; padding: 12px 16px;
      background: rgba(96, 239, 184, 0.07);
      border: 1px solid rgba(96, 239, 184, 0.2);
      border-radius: 10px;
      font-size: 12px; color: #60efb8;
      text-align: center;
    }

    /* ====================================================
       THÈME CLAIR — le calculateur VMA est entièrement
       pensé pour un fond sombre (texte #fff, surfaces en
       rgba(255,255,255,.04), gris #555/#888). Sur fond clair
       tout devient invisible. On le ré-habille ici.
       ==================================================== */
    [data-theme="light"] .vma-header {
      background: linear-gradient(135deg, rgba(255,120,0,0.12), rgba(255,69,0,0.05));
      border-color: rgba(255,120,0,0.30);
    }
    [data-theme="light"] .vma-header-title { color: var(--text-main); }
    [data-theme="light"] .vma-header-sub,
    [data-theme="light"] .vma-val-label,
    [data-theme="light"] .vma-val-unit,
    [data-theme="light"] .vma-slider-labels,
    [data-theme="light"] .vma-table th:first-child,
    [data-theme="light"] .vma-legend-dot span,
    [data-theme="light"] .vma-race-note,
    [data-theme="light"] .vma-race-pace,
    [data-theme="light"] .vma-result-label,
    [data-theme="light"] .vma-formula,
    [data-theme="light"] .vma-dist-unit,
    [data-theme="light"] .vma-sub-tab-btn,
    [data-theme="light"] .vma-cooper-toggle-btn:not(.active) { color: var(--text-muted); }

    /* Surfaces translucides-blanches -> cartes claires nettes */
    [data-theme="light"] .vma-slider-card,
    [data-theme="light"] .vma-table-card,
    [data-theme="light"] .vma-result-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
    }
    [data-theme="light"] .vma-table td:first-child,
    [data-theme="light"] .vma-race-name { color: var(--text-main); }
    [data-theme="light"] .vma-table td {
      border-left-color: var(--border-color);
      border-bottom-color: var(--border-color);
    }
    [data-theme="light"] .vma-table th { border-left-color: var(--border-color); }
    [data-theme="light"] .vma-table tr:nth-child(even) td { background: var(--bg-deep); }
    [data-theme="light"] .vma-race-row { border-bottom-color: var(--border-color); }
    [data-theme="light"] .vma-race-row:nth-child(even) { background: var(--bg-deep); }
    [data-theme="light"] .vma-sub-tabs { border-bottom-color: var(--border-color); }

    [data-theme="light"] .vma-number-input {
      background: #ffffff;
      color: var(--text-main);
      border-color: rgba(255,120,0,0.55);
    }
    [data-theme="light"] .vma-race-bar-bg,
    [data-theme="light"] .vma-result-bar-bg { background: var(--bg-deep); }

    /* Orange néon (#ff7800 ≈ 2.9:1 sur blanc) assombri pour le texte */
    [data-theme="light"] .vma-val-number,
    [data-theme="light"] .vma-table-header,
    [data-theme="light"] .vma-sub-tab-btn.active,
    [data-theme="light"] .vma-cooper-toggle-btn.active { color: #a85007; }
    [data-theme="light"] .vma-sub-tab-btn.active { border-bottom-color: #a85007; }
    [data-theme="light"] .vma-cooper-toggle-btn.active {
      border-color: #a85007;
      background: rgba(255,120,0,0.10);
    }
    [data-theme="light"] .vma-table-header {
      background: rgba(255,120,0,0.08);
      border-bottom-color: rgba(255,120,0,0.25);
    }

    /* Grands nombres et grilles d'intensité : leur couleur inline
       (codage néon du niveau, ex. #fbbf24 amber) tombe à ~1.1:1 sur
       clair. On force un texte sombre ; le codage reste porté par les
       en-têtes de colonne, les pastilles et les barres colorées. */
    [data-theme="light"] .vma-result-value,
    [data-theme="light"] .vma-race-time,
    [data-theme="light"] .vma-table th,
    [data-theme="light"] .vma-table td,
    [data-theme="light"] .vma-table td span { color: var(--text-main) !important; }

    [data-theme="light"] .vma-sync-note { color: var(--color-swim); }