/**
 * Outil - Calculateur d'Entretien Vélo — v1.0.0
 * Styles scopés sous .vac-ev — aucun impact sur le thème.
 * Accessibilité (WCAG AA) : jamais de vert #99FF00 en texte sur fond clair
 * (réservé aux fonds sombres) ; tailles de texte généreuses ; gris ≥ #6b7280.
 */

.vac-ev {
  font-family: 'Inter', -apple-system, sans-serif;
  color: #0a0a0a;
  max-width: 56rem;
  margin: 0 auto;
}
.vac-ev *, .vac-ev *::before, .vac-ev *::after { box-sizing: border-box; }
.vac-ev button { font-family: inherit; }

/* ── Cartes de questions (fond clair) ───────────────── */
.vac-ev-card {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
/* Sélecteur renforcé + !important : les thèmes / Elementor ciblent les h2
   avec des règles très spécifiques (.entry-content h2, .elementor-kit h2…) */
.vac-ev h2.vac-ev-card-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #0a0a0a !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
}
.vac-ev-card-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.vac-ev .vac-ev-card-head h2.vac-ev-card-title { margin: 0 !important; }

/* ── Bouton « ? » d'aide contextuelle ─────────────── */
.vac-ev-help {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  border: none;
  background: #e5e7eb;
  color: #6b7280;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.vac-ev-help:hover { background: rgba(153, 255, 0, 0.3); color: #374151; }
.vac-ev-help-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.9375rem;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* ── Grilles d'options ──────────────────────────────── */
.vac-ev-grid {
  display: grid;
  gap: 0.75rem;
}
.vac-ev-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vac-ev-grid--4 { grid-template-columns: repeat(2, 1fr); }
.vac-ev-grid--5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .vac-ev-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .vac-ev-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

.vac-ev-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.5rem;
  border: 2px solid #e5e7eb;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.vac-ev-opt:hover { border-color: #d1d5db; }
.vac-ev-opt.is-active { border-color: #99FF00; background: rgba(153, 255, 0, 0.1); }
.vac-ev-opt-emoji { font-size: 1.5rem; line-height: 1; }
.vac-ev-opt-title { font-size: 1rem; font-weight: 600; color: #0a0a0a; }
.vac-ev-opt-sub { font-size: 0.875rem; color: #6b7280; }

/* ── Résultats ──────────────────────────────────────── */
.vac-ev-results { margin-top: 0.5rem; }

/* Carte résultat principale (fond sombre) */
.vac-ev-summary {
  background: #0a0a0a;
  border-radius: 1.5rem;
  padding: 1.5rem;
  color: #fff;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .vac-ev-summary { padding: 2rem; }
}
.vac-ev-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.vac-ev-summary-label { font-size: 1rem; color: #9ca3af; }
.vac-ev-level {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(153, 255, 0, 0.1);
  border: 1px solid rgba(153, 255, 0, 0.2);
  color: #99FF00;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.25s;
}
.vac-ev-level.is-pop { animation: vac-ev-pop 0.35s ease; }
@keyframes vac-ev-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.vac-ev-score {
  font-family: 'Rajdhani', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #99FF00;
  line-height: 1;
  margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .vac-ev-score { font-size: 4rem; }
}
.vac-ev-score-max { font-size: 2rem; color: #6b7280; }
.vac-ev-context {
  font-size: 1rem;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0 0 0.25rem;
}
.vac-ev-context strong { color: #fff; }

/* Équivalences qui tournent */
.vac-ev-equiv {
  min-height: 1.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.vac-ev-equiv p {
  margin: 0;
  font-size: 0.875rem;
  color: #9ca3af;
  font-style: italic;
  transition: opacity 0.35s, transform 0.35s;
}
.vac-ev-equiv strong { color: #fff; font-style: normal; }

/* Compteurs urgence */
.vac-ev-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.vac-ev-counter {
  background: #111827;
  border-radius: 1rem;
  padding: 0.75rem;
  text-align: center;
}
.vac-ev-counter-num {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.vac-ev-counter-num--urgent { color: #f87171; }
.vac-ev-counter-num--soon   { color: #fbbf24; }
.vac-ev-counter-num--ok     { color: #99FF00; }
.vac-ev-counter-lbl { font-size: 0.875rem; color: #9ca3af; }

/* Verdict à sensation */
.vac-ev-verdict {
  background: rgba(153, 255, 0, 0.1);
  border: 1px solid rgba(153, 255, 0, 0.2);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #99FF00;
  line-height: 1.5;
}

/* Curseur Décontracté ↔ Pointilleux */
.vac-ev-bias {
  background: #111827;
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 1rem;
}
.vac-ev-bias-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.vac-ev-bias-side { font-size: 0.875rem; color: #d1d5db; }
.vac-ev-bias-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #99FF00;
}
.vac-ev-bias-track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: #374151;
}
.vac-ev-bias-track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.vac-ev-bias-hint {
  font-size: 0.875rem;
  color: #9ca3af;
  font-style: italic;
  line-height: 1.5;
  margin: 0.5rem 0 0;
}

/* Ce que ça change pour vous */
.vac-ev-impact {
  background: #111827;
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 1rem;
}
.vac-ev-impact-title {
  font-size: 0.8125rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.vac-ev-impact-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1rem;
  color: #d1d5db;
  line-height: 1.5;
}
.vac-ev-impact-list p { margin: 0; }
.vac-ev-impact-list strong { color: #fff; }

/* ── Groupes de composants ──────────────────────────── */
.vac-ev-group { margin-bottom: 2rem; }
.vac-ev-group-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.vac-ev-group-icon { font-size: 1.125rem; line-height: 1.4; flex-shrink: 0; }
.vac-ev h2.vac-ev-group-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #0a0a0a !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vac-ev-group-sub {
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
  margin: 0.125rem 0 0;
}
.vac-ev-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .vac-ev-items { grid-template-columns: repeat(2, 1fr); }
}

/* Carte composant */
.vac-ev-item {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vac-ev-item--urgent { border-color: #fecaca; }
.vac-ev-item--soon   { border-color: #fde68a; }
.vac-ev-item--ok     { border-color: #bbf7d0; }
.vac-ev-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.vac-ev-item-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.vac-ev-item-emoji { font-size: 1.25rem; }
.vac-ev-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
}
.vac-ev-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; }
.vac-ev-status--urgent { background: #fef2f2; color: #b91c1c; }
.vac-ev-status--urgent .vac-ev-status-dot { background: #ef4444; }
.vac-ev-status--soon   { background: #fffbeb; color: #b45309; }
.vac-ev-status--soon   .vac-ev-status-dot { background: #f59e0b; }
.vac-ev-status--ok     { background: #f0fdf4; color: #15803d; }
.vac-ev-status--ok     .vac-ev-status-dot { background: #4ade80; }

.vac-ev-item-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.vac-ev-tag {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
}
.vac-ev-tag--transmission { background: #eff6ff; color: #1d4ed8; }
.vac-ev-tag--freins       { background: #fef2f2; color: #b91c1c; }
.vac-ev-tag--structure    { background: #faf5ff; color: #7e22ce; }
.vac-ev-tag--securite     { background: #fffbeb; color: #b45309; }
.vac-ev-tag--vae          { background: #f7fee7; color: #4d7c0f; }
.vac-ev-tag--diff1        { background: #f0fdf4; color: #15803d; }
.vac-ev-tag--diff2        { background: #fffbeb; color: #b45309; }
.vac-ev-tag--diff3        { background: #fef2f2; color: #b91c1c; }

.vac-ev-item-freq {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #6b7280;
}
.vac-ev-item-tip {
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.5;
  border-top: 1px solid #f3f4f6;
  padding-top: 0.75rem;
  margin: 0;
}
.vac-ev-item-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
}
.vac-ev-item-link:hover { text-decoration: underline; color: #0a0a0a; }

/* ── CTA atelier ────────────────────────────────────── */
.vac-ev-cta-box {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
}
.vac-ev-cta-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.vac-ev-cta-text { font-size: 1rem; color: #6b7280; margin: 0 0 0.25rem; }
.vac-ev-cta-hint { font-size: 0.875rem; color: #6b7280; font-style: italic; margin: 0 0 1.25rem; }
.vac-ev-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}
@media (min-width: 640px) {
  .vac-ev-cta-actions { flex-direction: row; }
}
.vac-ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vac-ev-btn--primary { background: #0a0a0a; color: #fff; }
.vac-ev-btn--primary:hover { background: #99FF00; color: #0a0a0a; }
.vac-ev-btn--ghost {
  border: 1px solid #e5e7eb;
  color: #374151;
  background: transparent;
}
.vac-ev-btn--ghost:hover { border-color: #99FF00; color: #374151; }

.vac-ev-disclaimer {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
  margin: 1.5rem 0 0;
}