/* ==========================================================================
   Calculateur VRAM LLM & Catalogue Serveurs GPU - Charte Officielle QDNA
   Compatible Thème Clair & Thème Sombre (html[data-theme="dark"])
   Harmonisation Typographique Unifiée & Lisibilité Haute Définition
   Responsive Mobile Pleine Largeur (~96% utile) & Rendu Desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REGLE MAITRESSE TYPOGRAPHIQUE QDNA (Unification absolue)
   -------------------------------------------------------------------------- */
.post .calc-main-area,
.post .calc-main-area *,
.calc-main-area,
.calc-main-area * {
  font-family: var(--ff) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Alignement net des nombres sans recourir à une police monospace discordante */
.calc-main-area .font-mono,
.calc-main-area [class*="font-mono"] {
  font-family: var(--ff) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Neutralisation absolue de .post p (font-size 16.5px, justification, marges géantes) */
.post .calc-main-area p,
.calc-main-area p,
.calc-field-desc {
  font-family: var(--ff) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
  text-align: left !important;
  text-justify: auto !important;
  text-align-last: left !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  word-spacing: normal !important;
  margin: 0 0 6px 0 !important;
}

/* Neutralisation des listes dans les cartes et encadrés */
.post .calc-main-area ul,
.post .calc-main-area ol,
.calc-main-area ul,
.calc-main-area ol {
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin: 0 0 6px 0 !important;
  padding-left: 18px !important;
  text-align: left !important;
}

.post .calc-main-area li,
.calc-main-area li {
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin: 2px 0 !important;
  color: var(--muted) !important;
  text-align: left !important;
}

/* Neutralisation de la justification de blog.css sur tous les conteneurs */
.post .calc-main-area div,
.post .calc-main-area span,
.calc-main-area div,
.calc-main-area span,
.calc-main-area .card-product p,
.calc-main-area .calc-kpi-tile p,
.calc-main-area .calc-infra-tile p,
.calc-main-area .calc-arch-card p,
.calc-main-area .card-ref-lbl {
  text-align: left !important;
  text-justify: auto !important;
  text-align-last: left !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  word-spacing: normal !important;
}

.calc-main-area .text-right {
  text-align: right !important;
}

.calc-main-area .text-center {
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   2. PANNEAUX ET CONTENEURS (Glassmorphism & Identité QDNA)
   -------------------------------------------------------------------------- */
.glass-card {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.05);
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.glass-card:hover {
  border-color: var(--purple);
  box-shadow: 0 6px 20px rgba(104, 66, 237, 0.12);
  transform: translateY(-1px);
}

/* Titres principaux et sous-titres */
.calc-main-area h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
}

.calc-main-area h3 {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
}

.calc-label,
.calc-main-area label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   3. FORMULAIRES, CHAMPS ET SÉLECTEURS
   -------------------------------------------------------------------------- */
.calc-select,
select.calc-input,
input.calc-input,
#sim-model,
#sim-engine,
#brand-select,
#search-input {
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--champ, #85858F);
  border-radius: 8px;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 8px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calc-select:focus,
#sim-model:focus,
#sim-engine:focus,
#brand-select:focus,
#search-input:focus {
  border-color: var(--purple);
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 66, 237, 0.2);
}

/* Curseur range accessible et ergonomique */
input[type=range] {
  accent-color: var(--purple);
  background: var(--line);
}
html[data-theme="dark"] input[type=range] {
  accent-color: var(--purple);
  background: var(--line2);
}

.slider-scale {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   4. ONGLETS DE MODE & BOUTONS D'ACTION (Dégradé QDNA Signature)
   -------------------------------------------------------------------------- */
.calc-mode-wrap {
  display: flex;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
  max-width: 100%;
}

@media (max-width: 480px) {
  .calc-mode-wrap {
    border-radius: 12px;
    width: 100%;
  }
}

.calc-mode-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .calc-mode-tab {
    flex: 1 1 0;
    padding: 6px 8px;
    font-size: 11px !important;
    white-space: normal;
    text-align: center;
    border-radius: 9px;
    line-height: 1.25;
  }
}

.calc-mode-tab.is-active,
.calc-mode-tab.active {
  background: linear-gradient(120deg, var(--purple-a), var(--purple-h));
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(123, 91, 254, 0.32);
  font-weight: 700 !important;
}

/* Bouton Preset Optimal */
.btn-preset-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 7px;
  background: rgba(104, 66, 237, 0.1);
  border: 1px solid var(--purple);
  color: var(--purple-a);
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
html[data-theme="dark"] .btn-preset-opt {
  color: var(--purple);
  background: rgba(157, 133, 255, 0.12);
}
.btn-preset-opt:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Boutons de quantification, contextes et SLA */
.weight-btn,
.kv-btn,
.ctx-btn,
.sla-btn {
  background: var(--chip);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  padding: 7px 10px;
}

/* Boutons pilules de filtres catalogue (Format & Catégorie) - Finition Capsule Élégante */
.filter-cat-btn,
.filter-ic-btn {
  background: var(--chip);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 9999px !important;
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 6px 14px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.weight-btn:hover,
.kv-btn:hover,
.ctx-btn:hover,
.sla-btn:hover,
.filter-cat-btn:hover,
.filter-ic-btn:hover {
  border-color: var(--purple);
  color: var(--text);
}

/* État actif des boutons : Dégradé QDNA Signature */
.weight-btn.is-active,
.weight-btn.active,
.kv-btn.is-active,
.kv-btn.active,
.ctx-btn.is-active,
.ctx-btn.active,
.sla-btn.is-active,
.sla-btn.active,
.filter-cat-btn.is-active,
.filter-cat-btn.active,
.filter-ic-btn.is-active,
.filter-ic-btn.active {
  background: linear-gradient(120deg, var(--purple-a), var(--purple-h)) !important;
  color: #fff !important;
  border-color: var(--purple-a) !important;
  box-shadow: 0 2px 10px rgba(104, 66, 237, 0.28) !important;
  font-weight: 700 !important;
}

/* Boutons SLA Prefill - Disposition ergonomique bicolonne / verticale */
#sla-btns {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#sla-btns .sla-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 2px !important;
  text-align: center !important;
  min-width: 0 !important;
  border-radius: 8px !important;
}

#sla-btns .sla-btn .sla-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#sla-btns .sla-btn .sla-sub {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  opacity: 0.85;
  margin-top: 1px;
  white-space: nowrap !important;
}

#sla-btns .sla-btn.is-active .sla-sub,
#sla-btns .sla-btn.active .sla-sub {
  opacity: 1;
  color: #fff !important;
}

/* Boutons Contexte Rapide - Éviter toute rupture de texte */
#context-quick-btns {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

#context-quick-btns .ctx-btn {
  white-space: nowrap !important;
  padding: 6px 2px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

#context-quick-btns .ctx-btn.is-active,
#context-quick-btns .ctx-btn.active {
  font-weight: 700 !important;
}

/* Boutons Quantification Poids - Hauteur et typographie harmonisées */
#quant-weight-btns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#quant-weight-btns .weight-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 4px !important;
  min-height: 42px !important;
  text-align: center !important;
}

#quant-weight-btns .weight-btn .weight-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#quant-weight-btns .weight-btn .weight-sub {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  opacity: 0.85;
  margin-top: 1px;
  white-space: nowrap !important;
}

#quant-weight-btns .weight-btn.is-active .weight-sub,
#quant-weight-btns .weight-btn.active .weight-sub {
  opacity: 1;
  color: #fff !important;
}

/* Boutons filtres de qualification */
.qual-btn {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--muted);
}
.qual-btn:hover {
  border-color: var(--purple);
  color: var(--text);
}
.qual-btn.is-active {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
  font-weight: 700 !important;
}
#qual-filter-all.is-active {
  background: rgba(104, 66, 237, 0.1);
  color: var(--purple);
  border-color: var(--purple);
}
#qual-filter-ok {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.3);
}
html[data-theme="dark"] #qual-filter-ok {
  color: #34D399;
  background: rgba(16, 185, 129, 0.15);
}
#qual-filter-partiel {
  background: rgba(245, 158, 11, 0.1);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.3);
}
html[data-theme="dark"] #qual-filter-partiel {
  color: #FBBF24;
  background: rgba(245, 158, 11, 0.15);
}
#qual-filter-ko {
  background: rgba(239, 68, 68, 0.1);
  color: #B91C1C;
  border-color: rgba(239, 68, 68, 0.3);
}
html[data-theme="dark"] #qual-filter-ko {
  color: #F87171;
  background: rgba(239, 68, 68, 0.15);
}

/* --------------------------------------------------------------------------
   5. BADGES HARMONISÉS (Typographie unifiée 12px)
   -------------------------------------------------------------------------- */
.badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 9999px;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.25;
}

.badge-ok {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
html[data-theme="dark"] .badge-ok {
  background: rgba(16, 185, 129, 0.18);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.45);
}

.badge-partiel {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
html[data-theme="dark"] .badge-partiel {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.45);
}

.badge-ko {
  background: rgba(239, 68, 68, 0.12);
  color: #B91C1C;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
html[data-theme="dark"] .badge-ko {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.45);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .badge-ko {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
    border-color: rgba(239, 68, 68, 0.45);
  }
}

.badge-nvlink {
  background: rgba(104, 66, 237, 0.1);
  color: var(--purple);
  border: 1px solid rgba(104, 66, 237, 0.25);
}
.badge-pcie {
  background: rgba(4, 176, 254, 0.1);
  color: #0B7FC0;
  border: 1px solid rgba(4, 176, 254, 0.25);
}
html[data-theme="dark"] .badge-pcie {
  color: #04B0FE;
}
.badge-uma {
  background: rgba(142, 112, 255, 0.12);
  color: var(--purple-h);
  border: 1px solid rgba(142, 112, 255, 0.3);
}
.badge-net {
  background: rgba(123, 91, 254, 0.08);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   6. BOÎTE DE RECOMMANDATION PRESET
   -------------------------------------------------------------------------- */
.calc-preset-box {
  background: rgba(104, 66, 237, 0.04);
  border: 1px solid rgba(104, 66, 237, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px !important;
  line-height: 1.45;
  overflow: hidden;
  word-break: break-word;
}

.calc-preset-box p,
.calc-preset-box span {
  font-size: 12.5px !important;
  line-height: 1.45;
}

.calc-preset-box .preset-title {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   7. COLONNE KPI & RÉSULTATS DE DIMENSIONNEMENT
   -------------------------------------------------------------------------- */
.calc-kpi-sidebar {
  background: rgba(104, 66, 237, 0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.calc-kpi-sidebar #kpi-title-mode {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  color: var(--muted) !important;
}

.calc-kpi-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.03);
  margin-bottom: 10px;
}

.calc-kpi-tile span:first-child,
.calc-kpi-tile .calc-kpi-label,
.calc-infra-tile span:first-child {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 500;
  white-space: nowrap !important;
}

#res-vram,
#res-bw,
#res-pflops,
#res-token-cost,
#res-qlora-vram-total {
  font-size: 20px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.calc-kpi-tile p,
.calc-kpi-tile .calc-kpi-sub {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

/* --------------------------------------------------------------------------
   8. SECTION INFRASTRUCTURE LITELLM & OPENTELEMETRY
   -------------------------------------------------------------------------- */
.calc-infra-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.04);
}

.calc-infra-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}

.calc-infra-tile span.lbl {
  font-size: 12.5px !important;
  color: var(--muted) !important;
}

.calc-infra-tile span.val {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

.calc-infra-tile p {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
  margin-top: 4px;
}

.calc-otel-box {
  background: rgba(104, 66, 237, 0.03);
  border: 1px solid rgba(104, 66, 237, 0.15);
  border-radius: 12px;
  padding: 16px;
}

.calc-otel-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}

.calc-otel-card p {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

/* --------------------------------------------------------------------------
   9. PANNEAU COMPARATIF ARCHITECTURAL (SXM vs PCIe vs UMA)
   -------------------------------------------------------------------------- */
.calc-arch-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.04);
}

.calc-arch-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.03);
}

.calc-arch-card p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}

.calc-arch-card.arch-sxm {
  border-top: 3px solid var(--purple);
}
.calc-arch-card.arch-pcie {
  border-top: 3px solid var(--blue);
}
.calc-arch-card.arch-uma {
  border-top: 3px solid var(--purple-h);
}

/* --------------------------------------------------------------------------
   10. BARRE DE RECHERCHE ET FILTRES (Structure Horizontale Aérée)
   -------------------------------------------------------------------------- */
.calc-search-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

#search-input {
  background: var(--card);
  border: 1px solid var(--champ, #85858F);
  color: var(--text);
  border-radius: 12px;
  padding-left: 2.75rem !important;
  transition: all 0.2s ease;
}

#search-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(104, 66, 237, 0.15);
  outline: none;
}

/* Utilitaires pour rubans de filtres pilules */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* --------------------------------------------------------------------------
   11. CARTES PRODUITS DU CATALOGUE (Lisibilité & Cohérence)
   -------------------------------------------------------------------------- */
.card-product {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.04);
  transition: all 0.2s ease-in-out;
}

.card-product:hover {
  border-color: var(--purple);
  box-shadow: 0 8px 24px rgba(104, 66, 237, 0.12);
  transform: translateY(-2px);
}

.card-product.border-qual-ok {
  border-color: rgba(16, 185, 129, 0.4);
}
.card-product.border-qual-partiel {
  border-color: rgba(245, 158, 11, 0.4);
}
.card-product.border-qual-ko {
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0.88;
}

/* En-tête de carte produit */
.card-product .card-brand-lbl {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  color: var(--muted) !important;
}

.card-product h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 2px 0 4px !important;
  line-height: 1.35 !important;
}

.card-product .card-ref-lbl {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-variant-numeric: tabular-nums;
}

/* Blocs intérieurs de carte produit */
.card-diag-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px !important;
  line-height: 1.5;
}

.card-specs-box {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px !important;
  line-height: 1.5;
}

.card-specs-box .spec-k {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

.card-specs-box .spec-v {
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

.card-progress-track {
  width: 100%;
  background: var(--chip);
  border: 1px solid var(--line);
  height: 8px;
  border-radius: 9999px;
  overflow: hidden;
}

.card-progress-bar {
  height: 8px;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.card-progress-bar.bar-ok {
  background: linear-gradient(90deg, var(--purple-a), var(--purple-h));
}

.card-progress-bar.bar-ko {
  background: var(--red);
}

.card-reason-box {
  background: var(--chip);
  border: 1px solid var(--line);
  color: var(--text) !important;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin-top: 8px;
}

.card-storage-badge {
  background: var(--chip);
  border: 1px solid var(--line);
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 9px;
  border-radius: 7px;
}

/* --------------------------------------------------------------------------
   12. ALIGNEMENT ÉCRAN LARGE UNIFIÉ (1280px) & RESPONSIVE
   -------------------------------------------------------------------------- */
.top .wrap,
.crumb,
article.post.post-wide,
article.post.post-wide > .wrap,
.calc-main-area,
.max-w-7xl,
.cta-band {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.top .wrap,
.crumb,
article.post.post-wide > .wrap {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

article.post.post-wide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.post-wide > .wrap > .calc-main-area > section,
.post-wide > .wrap > .calc-main-area > div,
.post-wide > .wrap > section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

.cta-band {
  max-width: 100% !important;
  width: 100% !important;
  margin: 32px 0 0 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  article.post.post-wide {
    padding: 0 4px !important;
  }
  article.post.post-wide > .wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 640px) {
  .post-wide {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .post-wide .glass-card,
  .card-product {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  .post-wide h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 10px 0 8px !important;
  }
  .post-wide h2 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  .post-wide .lede {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }

  /* Cartes produits : maintien d'une typographie lisible sur smartphone */
  .card-product h3 {
    font-size: 15.5px !important;
  }
  .card-diag-box,
  .card-specs-box {
    font-size: 12.5px !important;
    padding: 10px 11px !important;
  }
  .card-specs-box .spec-k,
  .card-specs-box .spec-v {
    font-size: 12.5px !important;
  }
  .card-reason-box {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }

  /* Éviter le chevauchement libellé / valeur dans les curseurs */
  .param-header-row {
    flex-wrap: wrap !important;
    gap: 2px !important;
  }

  /* Grille des boutons SLA responsive */
  #sla-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  #sla-btns .sla-btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 70px !important;
    padding: 7px 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Boutons de présélection de contexte (2 lignes de 3 pour lisibilité optimale) */
  #context-quick-btns {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  #context-quick-btns .ctx-btn {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }

  /* Boutons de quantification des poids */
  #quant-weight-btns {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  #quant-weight-btns .weight-btn {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* Filtres qualification et catégories */
  .qual-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  .filter-ic-btn, .filter-cat-btn {
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
  }

  /* Cartes produits catalogue */
  #product-grid {
    gap: 12px !important;
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  #sla-btns .sla-btn {
    flex: 1 1 calc(20% - 6px) !important;
  }
}


/* --------------------------------------------------------------------------
   LIGNES HORIZONTALES ALLONGÉES & DÉPLIAGE IN-LINE (2026)
   -------------------------------------------------------------------------- */
.card-product {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer;
  box-sizing: border-box;
}

.card-product:hover {
  border-color: var(--purple) !important;
  box-shadow: 0 4px 16px rgba(104, 66, 237, 0.1) !important;
}

.row-header-interactive {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.row-col-brand-model {
  flex: 1 1 320px;
  min-width: 260px;
}

.row-col-metrics {
  flex: 1.6 1 360px;
  min-width: 280px;
}

.row-col-price-action {
  flex: 0 0 215px;
  min-width: 195px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  justify-content: center;
}

.row-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--input);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 11.5px;
}

.badge-year {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.badge-cfm {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--blue);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.specs-full-wrap table tbody tr:hover {
  background: rgba(104, 66, 237, 0.02);
}

/* Adaptation Mobile & Redroid */
@media (max-width: 900px) {
  .row-header-interactive {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .row-col-price-action {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 6px;
    width: 100%;
  }
}

/* Correction anti-débordement mobile pour les filtres et sélecteurs */
#sort-select,
#brand-select,
.calc-select,
.calc-input {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  #sort-select,
  #brand-select,
  .calc-select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .calc-search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .calc-main-area,
  #catalog-products-wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   14. STYLES D'IMPRESSION & EXPORT PDF (@media print)
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }

  header.top,
  nav.crumb,
  nav.sitemap,
  footer,
  #toast,
  .calc-mode-wrap,
  .btn-preset-opt,
  #quant-weight-btns,
  #quant-kv-btns,
  #context-quick-btns,
  #sla-btns,
  input[type="range"],
  .calc-search-wrap,
  #brand-select,
  #sort-select,
  #interconnect-filters,
  #category-filters,
  .btn-toggle-row,
  .cta,
  .cta-band,
  .lang-switch,
  #btn-copy-lan,
  #btn-print-doc,
  #btn-export-csv,
  #btn-export-copy {
    display: none !important;
  }

  .wrap,
  .max-w-7xl,
  .calc-main-area,
  .post {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .glass-card,
  .calc-infra-wrap,
  .calc-kpi-tile,
  .calc-infra-tile,
  .card-product {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    color: #0f172a !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .calc-kpi-sidebar {
    border: 1px solid #cbd5e1 !important;
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .card-product.border-qual-ok .card-details-full {
    display: block !important;
  }

  .card-product.border-qual-ko {
    display: none !important;
  }

  h1, h2, h3 {
    color: #0f172a !important;
  }
}

/* --------------------------------------------------------------------------
   13. HOMOGÉNÉITÉ DU SITE (01/10/2026) : une seule colonne, alignée sur l'en-tête
   -------------------------------------------------------------------------- */
article.post.post-wide{max-width:none;margin:0;padding:34px 0 70px}
article.post.post-wide > .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
body:has(article.post-wide) .crumb{max-width:1180px}
.post-wide .wrap > section,.calc-main-area > section,.calc-main-area > div,#catalog-products-wrap{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.calc-outils{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.calc-outil{min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:600 12.5px/1.2 var(--ff);cursor:pointer}
.calc-outil:hover{border-color:var(--purple);color:var(--purple)}
.calc-note{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
#model-recommendation-box > div{flex-wrap:wrap;gap:2px 8px}
#model-recommendation-box span{white-space:normal!important}
.calc-main-area [class*="whitespace-nowrap"]{white-space:normal}
.calc-main-area .glass-card{overflow-wrap:anywhere}
@media (pointer:coarse){.calc-outil{min-height:44px}}
@media (max-width:768px){article.post.post-wide{padding:24px 0 48px!important}article.post.post-wide > .wrap{padding:0 16px!important}}
.calc-main-area .flex.justify-between,.calc-main-area .flex.items-center.justify-between{flex-wrap:wrap;column-gap:8px}
.calc-main-area .glass-card *{min-width:0;max-width:100%}
@media (max-width:768px){body:has(article.post-wide) .crumb{padding-left:16px;padding-right:16px}}
/* Contrastes RGAA 3.2 dans le calculateur : bleu et violet clairs remplacés en thème clair */
.calc-main-area,.post-wide{--blue:#0369A1;--purple-h:#5B3FD9}
html[data-theme="dark"] .calc-main-area,html[data-theme="dark"] .post-wide{--blue:#7DD3FC;--purple-h:#C4B5FD}
html[data-theme="dark"] .badge-uma{color:#E9E3FF!important}
#qual-filter-partiel{color:#92400E}
.badge-pcie{color:#075985}
.badge-partiel{color:#92400E}
.badge-uma{color:#5B3FD9}
.badge-cfm{color:#1E5F86}
html[data-theme="dark"] .badge-partiel{color:#FCD34D}
html[data-theme="dark"] .badge-cfm{color:#7DD3FC}
.badge-uma{color:#3E22B0!important}
.btn-toggle-row,.btn-toggle-row span{color:#3E22B0!important}
html[data-theme="dark"] .calc-main-area .badge-uma{color:#E9E3FF!important}
html[data-theme="dark"] .btn-toggle-row,html[data-theme="dark"] .btn-toggle-row span{color:#D8CCFF!important}

/* Vignettes des machines (captures des pages constructeurs) */
.row-col-brand-model.hw-with-thumb { display: flex; gap: 12px; align-items: flex-start; }
.hw-with-thumb .hw-text { min-width: 0; flex: 1 1 auto; }
.hw-thumb { flex: 0 0 88px; width: 88px; height: 64px; margin: 2px 0 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hw-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.hw-photo { margin: 4px 0 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hw-photo img { max-width: min(360px, 100%); max-height: 240px; width: auto; height: auto; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.hw-photo figcaption { font-size: 11px; color: var(--muted); }
.hw-photo figcaption a { color: var(--purple); text-decoration: underline; }
@media (max-width: 640px) {
  .hw-thumb { flex-basis: 64px; width: 64px; height: 48px; }
  .row-col-brand-model.hw-with-thumb { gap: 10px; min-width: 0; }
}
@media (max-width: 640px) {
  .row-col-brand-model, .row-col-metrics, .row-col-price-action { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Version 3 (8 octobre 2026) : application générée, moteur unifié, quatre statuts
   -------------------------------------------------------------------------- */
/* Jetons absents de cette page (styles.css n'y est pas chargé) */
.calc-main-area, .post-wide { --green: #059669; --yellow: #B45309; --red: #DC2626; --card: #FFFFFF; --input: #FFFFFF; --warn: #D97706; }
html[data-theme="dark"] .calc-main-area, html[data-theme="dark"] .post-wide { --green: #34D399; --yellow: #FBBF24; --red: #F87171; --card: #17161F; --input: #1E1C28; --warn: #FBBF24; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .calc-main-area, html:not([data-theme="light"]) .post-wide { --green: #34D399; --yellow: #FBBF24; --red: #F87171; --card: #17161F; --input: #1E1C28; --warn: #FBBF24; } }
/* Collision avec .grid de blog.css */
.calc-main-area .grid, .post-wide .grid { max-width: none; padding: 0; }
/* Survol réservé aux cartes de machines */
.calc-main-area .glass-card:hover { transform: none; }
.calc-main-area .card-product:hover { border-color: var(--purple-a); }

.calc-app { margin: 18px 0 6px; }
.calc-panel { padding: 16px; border-radius: 16px; }
.calc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.calc-main-area .calc-h2 { font-size: 16px; font-weight: 800; margin: 0 0 8px; color: var(--text); line-height: 1.25; }
.calc-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
@media (min-width: 1024px) { .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.calc-main-area .calc-label, .calc-main-area .calc-field-head label { font-size: 12px; font-weight: 700; color: var(--text); margin: 0; }
.calc-main-area .calc-val { font-size: 12px; font-weight: 700; color: var(--purple); white-space: nowrap; }
.calc-main-area .calc-select { width: 100%; padding: 8px 10px; font-size: 12px; background: var(--input); color: var(--text); border: 1px solid var(--champ, #85858F); border-radius: 8px; }
.calc-btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.calc-btn-grid.calc-btn-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc-btn-grid.calc-btn-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.calc-main-area .calc-hint { font-size: 11.5px !important; margin: 0; }
.calc-main-area .calc-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.calc-main-area .calc-preset-l { display: flex; justify-content: space-between; gap: 8px; font-weight: 700 !important; color: var(--text) !important; margin: 0; }
.calc-main-area .calc-preset-d { margin: 4px 0 6px; }
.calc-ticks { position: relative; height: 16px; margin: 2px 9px 0; }
.calc-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.calc-ticks-lin { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 2px 2px 0; }
.calc-avance { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--chip, transparent); }
.calc-avance summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text); }
.calc-avance[open] { display: flex; flex-direction: column; gap: 10px; }
.calc-main-area .calc-kpi-tile { margin-bottom: 10px; }
.calc-main-area .calc-kpi-label { font-size: 12px !important; font-weight: 600 !important; color: var(--muted) !important; margin: 0; }
.calc-main-area .calc-kpi-val { font-size: 20px !important; font-weight: 800 !important; color: var(--purple) !important; margin: 2px 0 !important; font-variant-numeric: tabular-nums; }
.calc-main-area .calc-kpi-sub { font-size: 11.5px !important; margin: 0; }
.calc-main-area .calc-kpi-sub b { color: var(--text); }
.calc-main-area .calc-kpi-cout .calc-kpi-val { color: var(--green) !important; }
.calc-main-area .calc-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.calc-toast { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; padding: 8px 14px; border-radius: 10px; color: #fff; font-size: 12px;
  background: linear-gradient(120deg, #6240E6, #5B3FD9); box-shadow: 0 6px 18px rgba(98, 64, 230, .35); opacity: 0; transition: opacity .2s; }
.calc-toast.is-visible { opacity: 1; }
.calc-filtres { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 12px; }
.calc-filtres-l1 { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-filtres-l1 .calc-search { flex: 1 1 260px; }
.calc-filtres-l1 .calc-select { width: auto; flex: 0 1 260px; }
.calc-main-area .calc-search input { width: 100%; padding: 8px 12px; font-size: 13px; border: 1px solid var(--champ, #85858F); border-radius: 8px; background: var(--input); color: var(--text); }
.calc-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.calc-pills .filter-cat-btn, .calc-pills .filter-ic-btn, .calc-pills .qual-btn { padding: 5px 12px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.calc-cartes { display: flex; flex-direction: column; gap: 12px; }
.calc-main-area .hw-name { font-size: 15px; margin: 0; color: var(--text); }
.calc-main-area .hw-mem-txt { font-size: 11.5px; color: var(--muted); margin: 3px 0 6px; }
.hw-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.calc-main-area .hw-res { font-size: 12.5px !important; color: var(--text) !important; margin: 4px 0 0 !important; }
.calc-main-area .hw-res strong { color: var(--purple); }
.calc-main-area .hw-sub, .calc-main-area .hw-nc { font-size: 11.5px !important; margin: 2px 0 0 !important; }
.calc-main-area .hw-price-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.card-progress-bar.bar-warn { background: var(--warn); }
.badge-indet { background: rgba(100, 116, 139, .12); color: #334155; border: 1px solid rgba(100, 116, 139, .35); }
html[data-theme="dark"] .badge-indet { color: #CBD5E1; }
.badge-flag { background: rgba(217, 119, 6, .10); color: #92400E; border: 1px solid rgba(217, 119, 6, .35); }
html[data-theme="dark"] .badge-flag { color: #FCD34D; }
.card-product.border-qual-indet { border-left: 4px solid #94A3B8; }
.calc-main-area .hw-desc { margin: 6px 0 !important; }
.hw-specs { width: 100%; border-collapse: collapse; font-size: 12px; }
.hw-specs caption { text-align: left; font-weight: 700; font-size: 12px; color: var(--text); padding: 6px 0; }
.hw-specs th, .hw-specs td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; color: var(--text); }
.hw-specs th { width: 32%; color: var(--muted); font-weight: 600; }
.hw-incl { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0; font-size: 12px; }
@media (min-width: 768px) { .hw-incl { grid-template-columns: 1fr 1fr; } }
.calc-main-area .hw-incl-t { font-weight: 700 !important; color: var(--text) !important; margin: 0 0 4px !important; }
.hw-incl ul { margin: 0; padding-left: 18px; color: var(--muted); }
.calc-main-area .hw-tips { padding: 8px 10px; border-radius: 10px; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .25); }
.calc-main-area .card-storage-badge { white-space: normal; overflow: hidden; text-overflow: ellipsis; }
/* Tableaux statiques (lisibles sans JavaScript) */
.calc-section { margin: 28px 0; }
.table-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.post .calc-table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: 13.5px; }
.calc-table th, .calc-table td { padding: 7px 9px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.calc-table thead th { background: var(--panel, rgba(127, 127, 127, .06)); font-weight: 700; white-space: nowrap; }
.calc-table tbody th { font-weight: 700; white-space: nowrap; }
.tab-sub { color: var(--muted); font-size: 12px; }
.calc-formules li { margin: 6px 0; }
/* Contraste des boutons actifs en thème sombre */
html[data-theme="dark"] .calc-main-area .is-active { background: linear-gradient(120deg, #6240E6, #5B3FD9) !important; color: #fff !important; border-color: #6240E6 !important; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .calc-main-area .is-active { background: linear-gradient(120deg, #6240E6, #5B3FD9) !important; color: #fff !important; } }
.calc-main-area :focus-visible { outline: 2px solid #6240E6; outline-offset: 2px; }
@media (max-width: 640px) {
  .calc-panel { padding: 12px; }
  .calc-btn-grid.calc-btn-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-filtres-l1 .calc-select { flex: 1 1 100%; }
  .hw-specs th { width: 40%; }
  .calc-main-area .glass-card { overflow-wrap: break-word; hyphens: auto; }
}
@media print {
  .calc-filtres, .calc-outils, .calc-avance, .langhint, #toast, .btn-toggle-row, .btn-preset-opt { display: none !important; }
  .card-details-full { display: none !important; }
}
.post .calc-main-area p.calc-label { font-size: 12px !important; font-weight: 700 !important; color: var(--text) !important; margin: 0 !important; }
.post .calc-main-area p.calc-kpi-val { font-size: 20px !important; font-weight: 800 !important; color: var(--purple) !important; margin: 2px 0 !important; }
.post .calc-main-area .calc-kpi-cout p.calc-kpi-val { color: var(--green) !important; }
.post .calc-main-area p.calc-kpi-label { font-size: 12px !important; font-weight: 600 !important; }
#context-quick-btns .ctx-btn, #sla-btns .sla-btn { width: 100%; min-width: 0; }
#sla-btns .sla-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Classes des cartes, sans dépendre de Tailwind */
.calc-main-area .hw-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.calc-main-area .card-brand-lbl { display: block; text-transform: uppercase; font-weight: 700; }
.calc-main-area .hw-name { font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.calc-main-area .card-ref-lbl { margin-top: 2px; font-size: 12px; color: var(--muted); }
.calc-main-area .price-val { font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--text); }
.calc-main-area .card-storage-badge { margin-top: 6px; font-size: 12px; }
.calc-main-area .btn-toggle-row { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(104, 66, 237, .08); color: var(--purple); border: 1px solid rgba(104, 66, 237, .25); cursor: pointer; }
.calc-main-area .card-product { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.calc-main-area .row-header-interactive { display: flex; flex-wrap: wrap; gap: 14px; }
.calc-main-area .row-col-brand-model { flex: 1 1 300px; min-width: 0; }
.calc-main-area .row-col-metrics { flex: 2 1 360px; min-width: 0; }
.calc-main-area .row-col-price-action { flex: 0 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
@media (max-width: 640px) { .calc-main-area .row-col-price-action { align-items: flex-start; text-align: left; flex-basis: 100%; } }
.calc-main-area .card-details-full { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.calc-main-area .hw-pills .row-spec-pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--text); background: var(--card); }

[hidden] { display: none !important; }
.calc-main-area .calc-kpi-tile span:first-child, .calc-main-area .calc-kpi-tile .calc-kpi-label { white-space: normal !important; overflow-wrap: break-word; }
@media (max-width: 900px) {
  .calc-main-area .row-col-brand-model, .calc-main-area .row-col-metrics, .calc-main-area .row-col-price-action { flex: 0 0 auto; }
  .calc-main-area .row-col-price-action { align-items: flex-start; text-align: left; }
}

.calc-main-area .row-spec-pill.pill-warn { border-color: var(--warn, #b45309); color: var(--warn, #b45309); }