@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* =========================================================================================
 *  SIMULATEUR TCO CAROOM — styles namespaces (.ctco-root) + correctifs theme Caroom
 *  Couleurs en hex dur (pas de var CSS). !important partout pour resister au theme.
 * ========================================================================================= */

.ctco-root, .ctco-root * { box-sizing: border-box !important; }

.ctco-root .ctco {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  color: #042C53 !important;
  background: #ffffff !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 2px !important;
  line-height: 1.45 !important;
}

/* ---------- CONTROLES ---------- */
.ctco-root .ctco-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  background: #f6fbff !important;
  border: 1px solid #e3f1fb !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}
.ctco-root .ctco-ctrl-full { grid-column: 1 / -1 !important; }
.ctco-root .ctco-label { font-size: 12px !important; font-weight: 600 !important; color: #042C53 !important; margin: 0 0 2px !important; }
.ctco-root .ctco-label b { color: #185FA5 !important; font-weight: 700 !important; }

.ctco-root .ctco-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 5px !important; }
.ctco-root .ctco-chip {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #042C53 !important;
  line-height: 1.2 !important;
  transition: background .12s, border-color .12s, color .12s !important;
}
.ctco-root .ctco-chip:hover { border-color: #00aafa !important; }
.ctco-root .ctco-chip.is-active { background: #00aafa !important; border-color: #00aafa !important; color: #ffffff !important; }

.ctco-root .ctco-minmax { display: flex !important; justify-content: space-between !important; font-size: 10px !important; color: #7a94ab !important; margin-top: 2px !important; }

/* ---------- RANGE SLIDERS (Bug 4 : selecteurs ultra-specifiques) ---------- */
.ctco-root input[type="range"].ctco-range {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  background-color: #d7e6f2 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}
.ctco-root input[type="range"].ctco-range::-webkit-slider-runnable-track {
  height: 6px !important; min-height: 6px !important; max-height: 6px !important;
  background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 999px !important;
}
.ctco-root input[type="range"].ctco-range::-webkit-slider-thumb {
  -webkit-appearance: none !important; appearance: none !important;
  width: 18px !important; height: 18px !important; margin-top: -6px !important;
  background-color: #00aafa !important; background-image: none !important;
  border: 2px solid #ffffff !important; border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.30) !important; cursor: pointer !important;
}
.ctco-root input[type="range"].ctco-range::-moz-range-track {
  height: 6px !important; min-height: 6px !important; max-height: 6px !important;
  background-color: #d7e6f2 !important; border: none !important; box-shadow: none !important; border-radius: 999px !important;
}
.ctco-root input[type="range"].ctco-range::-moz-range-thumb {
  width: 16px !important; height: 16px !important;
  background-color: #00aafa !important; border: 2px solid #ffffff !important; border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.30) !important; cursor: pointer !important;
}
.ctco-root input[type="range"].ctco-range:focus { outline: none !important; }

/* ---------- VERDICT ---------- */
.ctco-root .ctco-verdict {
  background: linear-gradient(135deg, #042C53, #185FA5) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  margin-bottom: 10px !important;
}
.ctco-root .ctco-verdict-kicker { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 1px !important; opacity: .85 !important; }
.ctco-root .ctco-verdict-main {
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif !important;
  font-size: 19px !important; font-weight: 800 !important; margin: 2px 0 3px !important; color: #ffffff !important;
}
.ctco-root .ctco-verdict-win { color: #ffcb05 !important; }
.ctco-root .ctco-verdict-sub { font-size: 13px !important; font-weight: 600 !important; opacity: .85 !important; }
.ctco-root .ctco-verdict-diesel {
  font-size: 12px !important; margin-top: 6px !important; opacity: .92 !important;
  border-top: 1px solid rgba(255,255,255,.20) !important; padding-top: 6px !important;
}
.ctco-root .ctco-verdict-diesel b { color: #ffffff !important; }

/* ---------- ZFE ---------- */
.ctco-root .ctco-zfe {
  background: #fff7ed !important; border: 1px solid #fed7aa !important; border-radius: 10px !important;
  padding: 9px 12px !important; margin-bottom: 10px !important; font-size: 12px !important; color: #9a3412 !important;
}

/* ---------- RECAP compact classe ---------- */
.ctco-root .ctco-recap { margin-bottom: 12px !important; }
.ctco-root .ctco-row {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 7px 10px !important; border-radius: 8px !important; margin-bottom: 4px !important;
  background: #ffffff !important; border: 1px solid #eef2f6 !important;
}
.ctco-root .ctco-row.is-win { background: #eef8ff !important; border-color: #cfeaff !important; }
.ctco-root .ctco-dot { width: 9px !important; height: 9px !important; border-radius: 999px !important; flex: 0 0 auto !important; display: inline-block !important; }
.ctco-root .ctco-dot-sm { width: 8px !important; height: 8px !important; border-radius: 999px !important; display: inline-block !important; }
.ctco-root .ctco-row-name { font-size: 13px !important; font-weight: 600 !important; width: 118px !important; flex: 0 0 auto !important; }
.ctco-root .ctco-row.is-win .ctco-row-name { font-weight: 800 !important; }
.ctco-root .ctco-bar { flex: 1 1 auto !important; height: 7px !important; background: #f1f5f9 !important; border-radius: 999px !important; overflow: hidden !important; }
.ctco-root .ctco-bar-fill { display: block !important; height: 100% !important; border-radius: 999px !important; }
.ctco-root .ctco-row-val { text-align: right !important; flex: 0 0 auto !important; width: 116px !important; }
.ctco-root .ctco-row-val b { font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif !important; font-size: 14px !important; color: #042C53 !important; }
.ctco-root .ctco-row-val b.ctco-win-total { color: #185FA5 !important; }
.ctco-root .ctco-row-100 { display: block !important; font-size: 10px !important; color: #7a94ab !important; line-height: 1 !important; }

/* ---------- CTA ---------- */
.ctco-root .ctco-cta { text-align: center !important; margin-bottom: 12px !important; }
.ctco-root .ctco-cta-btn {
  display: inline-block !important; background: #ffcb05 !important; color: #042C53 !important;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif !important; font-weight: 800 !important; font-size: 14px !important;
  padding: 11px 22px !important; border-radius: 9px !important; text-decoration: none !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.08) !important;
}
.ctco-root .ctco-cta-btn:hover { color: #042C53 !important; text-decoration: none !important; filter: brightness(.97) !important; }
.ctco-root .ctco-cta-sub { font-size: 11px !important; color: #7a94ab !important; margin-top: 5px !important; }

/* ---------- HYPOTHESES ---------- */
.ctco-root .ctco-hypo-toggle {
  width: 100% !important; text-align: left !important; background: #f1f6fa !important;
  border: 1px solid #e3f1fb !important; border-radius: 9px !important; padding: 9px 12px !important;
  font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; color: #042C53 !important; cursor: pointer !important;
}
.ctco-root .ctco-hypo-body { display: none !important; }
.ctco-root .ctco-hypo.is-open .ctco-hypo-body {
  display: block !important;
  border: 1px solid #e3f1fb !important; border-top: none !important; border-radius: 0 0 9px 9px !important;
  padding: 14px !important; font-size: 12px !important; background: #fbfdff !important;
}
.ctco-root .ctco-h { font-weight: 700 !important; margin: 6px 0 8px !important; }
.ctco-root .ctco-detail .ctco-h:first-child { margin-top: 0 !important; }

.ctco-root .ctco-prix-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 8px !important; margin-bottom: 14px !important; }
.ctco-root .ctco-prix-lab { font-size: 11px !important; display: block !important; }
.ctco-root .ctco-prix-input {
  width: 100% !important; padding: 5px 7px !important; margin-top: 3px !important;
  border: 1px solid #cbd5e1 !important; border-radius: 6px !important; font-family: inherit !important; font-size: 13px !important;
  background: #ffffff !important; color: #042C53 !important;
}
.ctco-root .ctco-reset {
  font-size: 11px !important; background: none !important; border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important; padding: 4px 10px !important; cursor: pointer !important; margin-bottom: 14px !important; color: #042C53 !important;
}
.ctco-root .ctco-ul { margin: 0 !important; padding-left: 16px !important; line-height: 1.55 !important; color: #475569 !important; }
.ctco-root .ctco-ul li { margin-bottom: 3px !important; }
.ctco-root .ctco-note { font-size: 10px !important; color: #94a3b8 !important; margin-top: 8px !important; }

/* ---------- TABLEAUX (Bug 2 : display table / Bug 3 : bordures) ---------- */
.ctco-root .ctco-scroll { overflow-x: auto !important; margin-bottom: 14px !important; }
.ctco-root .ctco-tbl {
  width: 100% !important;
  min-width: 520px !important;
  border-collapse: collapse !important;
  border: none !important;
  font-size: 12px !important;
  display: table !important;
  margin: 0 !important;
}
.ctco-root .ctco-th, .ctco-root .ctco-td {
  text-align: right !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.ctco-root .ctco-th { font-size: 11px !important; color: #64748b !important; border-bottom: 1px solid #e2e8f0 !important; background: transparent !important; }
.ctco-root .ctco-th.is-win { background: #eef8ff !important; }
.ctco-root .ctco-th-left, .ctco-root .ctco-td-left { text-align: left !important; }
.ctco-root .ctco-td.is-win { background: #f6fbff !important; }
.ctco-root .ctco-td.is-muted, .ctco-root .ctco-td.is-muted * { color: #94a3b8 !important; }
.ctco-root .ctco-total-row .ctco-td { border-top: 2px solid #042C53 !important; }
.ctco-root .ctco-win-total { color: #185FA5 !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
  .ctco-root .ctco-controls { grid-template-columns: 1fr !important; }
  .ctco-root .ctco-verdict-main { font-size: 17px !important; }
  .ctco-root .ctco-row { gap: 7px !important; padding: 7px 8px !important; }
  .ctco-root .ctco-row-name { width: 92px !important; font-size: 12px !important; }
  .ctco-root .ctco-row-val { width: 96px !important; }
  .ctco-root .ctco-row-val b { font-size: 13px !important; }
}

/* ---------- WORDPRESS THEME OVERRIDES ---------- */
.ctco-root, .ctco-root div, .ctco-root table, .ctco-root th, .ctco-root td, .ctco-root p, .ctco-root ul, .ctco-root li, .ctco-root span, .ctco-root a, .ctco-root label, .ctco-root button, .ctco-root input {
  max-width: none !important;
  box-sizing: border-box !important;
}
.ctco-root table {
  display: table !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: none !important;
  background: transparent !important;
}
.ctco-root th, .ctco-root td {
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.ctco-root .ctco-total-row td { border-top: 2px solid #042C53 !important; }
.ctco-root ul { list-style: disc !important; }
.ctco-root a { box-shadow: none !important; }

/* =========================================================================================
 *  SURSPECIFICITE ANTI-THEME (id-boost via :not(#_))
 *  Le theme Caroom applique des regles a portee #id sur table/th/td/li/p qui battent les
 *  selecteurs de classe MEME en !important. ":not(#_)" hisse la specificite au niveau ID
 *  sans exiger d'id sur l'element -> on repasse devant. Marche pour toutes les instances.
 *  Si le theme empile 2 id sur un selecteur, dupliquer en ":not(#_):not(#__)".
 * ========================================================================================= */

/* Tables : fond neutre, tailles alignees sur le simulateur (12px), pas de bandeau theme */
.ctco-root:not(#_) .ctco-tbl,
.ctco-root:not(#_) .ctco-tbl thead,
.ctco-root:not(#_) .ctco-tbl tbody,
.ctco-root:not(#_) .ctco-tbl tr { background: transparent !important; }
.ctco-root:not(#_) .ctco-tbl { font-size: 12px !important; }

.ctco-root:not(#_) .ctco-td {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #042C53 !important;
  padding: 6px 8px !important;
  text-align: right !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #eef2f6 !important;
}
.ctco-root:not(#_) .ctco-td.is-muted, .ctco-root:not(#_) .ctco-td.is-muted * { color: #94a3b8 !important; }
.ctco-root:not(#_) .ctco-td.is-win { background: #f6fbff !important; }
.ctco-root:not(#_) .ctco-win-total { color: #185FA5 !important; }
.ctco-root:not(#_) .ctco-total-row .ctco-td { border-top: 2px solid #042C53 !important; }

/* En-tetes de colonnes : lisibles et bien distincts (fond clair, texte bleu Caroom, gras) */
.ctco-root:not(#_) .ctco-th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #185FA5 !important;
  background: #eef3f8 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  padding: 7px 8px !important;
  text-align: right !important;
  white-space: nowrap !important;
  border: none !important;
  border-bottom: 2px solid #cfe0ee !important;
}
.ctco-root:not(#_) .ctco-th.is-win { background: #dbeeff !important; color: #0a4a8a !important; }
.ctco-root:not(#_) .ctco-th-left, .ctco-root:not(#_) .ctco-td-left { text-align: left !important; }

/* Titres-paragraphes du panneau : memes tailles que le simulateur */
.ctco-root:not(#_) .ctco-hypo-body p { font-size: 12px !important; line-height: 1.4 !important; margin: 6px 0 8px !important; }
.ctco-root:not(#_) .ctco-h { font-weight: 700 !important; color: #042C53 !important; }
.ctco-root:not(#_) .ctco-note { font-size: 10px !important; color: #94a3b8 !important; }

/* Listes a puces : supprime la puce injectee par le theme, garde une seule puce nette */
.ctco-root:not(#_) .ctco-ul {
  list-style: disc !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  padding-left: 18px !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: #475569 !important;
}
.ctco-root:not(#_) .ctco-ul li {
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 0 0 4px !important;
  padding-left: 0 !important;
  list-style: disc !important;
  background: none !important;
}
.ctco-root:not(#_) .ctco-ul li::before { content: none !important; display: none !important; }
.ctco-root:not(#_) .ctco-ul li::marker { color: #94a3b8 !important; font-size: 12px !important; }