/* ==========================================================================
   B2V - Comparateur (styles)
   Cree le 31/08/2026. Purement additif.
   ========================================================================== */

/* --- Bouton sur les cartes ----------------------------------------------- */
.b2v-cmp-btn{
  margin-left:.5rem;
  padding:.62rem 1rem;
  border:1px solid #e3d9c4;
  border-radius:8px;
  background:#fff;
  color:#60222D;
  font:inherit;
  font-size:.875rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.b2v-cmp-btn:hover{ border-color:#60222D; background:#FFFBF2; }
.b2v-cmp-btn.is-on{ background:#60222D; border-color:#60222D; color:#fff; }
.b2v-cmp-btn:focus-visible{ outline:2px solid #60222D; outline-offset:2px; }

/* --- Barre flottante ------------------------------------------------------ */
.b2v-cmp-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9998;
  background:#111827;
  color:#fff;
  box-shadow:0 -4px 20px rgba(17,24,39,.22);
  animation:b2vBarIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes b2vBarIn{ from{ transform:translateY(100%); } to{ transform:none; } }

.b2v-cmp-bar-in{
  max-width:1200px;
  margin:0 auto;
  padding:.85rem clamp(1rem,4vw,2rem);
  display:flex;
  align-items:center;
  gap:.85rem;
  flex-wrap:wrap;
}
.b2v-cmp-lab{ font-weight:700; letter-spacing:.02em; }
.b2v-cmp-chips{ display:flex; gap:.5rem; flex-wrap:wrap; flex:1 1 auto; }

.b2v-cmp-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  max-width:230px;
  padding:.35rem .6rem .35rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:.8125rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.b2v-cmp-chip button{
  border:0; background:none; color:#E0C26A;
  font-size:1.05rem; line-height:1; cursor:pointer; padding:0 2px;
}
.b2v-cmp-hint{ font-size:.8125rem; opacity:.7; }
.b2v-cmp-close{
  border:0; background:none; color:#fff;
  font-size:1.4rem; line-height:1; cursor:pointer; opacity:.6; padding:0 .3rem;
}
.b2v-cmp-close:hover{ opacity:1; }
.b2v-cmp-bar .ev-btn{ background:#E0C26A; color:#111827; }

/* --- Tableau de comparaison ---------------------------------------------- */
.b2v-cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.b2v-cmp-t{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
}
.b2v-cmp-t th,
.b2v-cmp-t td{
  padding:.9rem 1rem;
  border-bottom:1px solid #ececec;
  text-align:left;
  vertical-align:middle;
}
.b2v-cmp-t thead th{ border-bottom:2px solid #F3ECDC; vertical-align:top; }

.b2v-cmp-lbl{
  width:190px;
  color:#6f6f76;
  font-weight:500;
  font-size:.9375rem;
  background:#FFFBF2;
  position:sticky;
  left:0;
  z-index:1;
}

.b2v-cmp-vis{
  display:block;
  aspect-ratio:16/10;
  border-radius:10px;
  margin-bottom:.6rem;
  min-width:190px;
}
.b2v-cmp-t thead h3{ margin:0; font-size:1rem; line-height:1.3; }
.b2v-cmp-t thead h3 a{ color:#111827; text-decoration:none; }
.b2v-cmp-t thead h3 a:hover{ color:#60222D; }

.b2v-cmp-t tbody tr:nth-child(even) td,
.b2v-cmp-t tbody tr:nth-child(even) .b2v-cmp-lbl{ background:#fdfcf9; }

/* Meilleure valeur de la ligne */
.b2v-cmp-top{
  font-weight:700;
  color:#60222D;
  position:relative;
}
.b2v-cmp-top::after{
  content:"";
  position:absolute;
  left:.45rem; top:50%;
  width:4px; height:4px;
  border-radius:50%;
  background:#E0C26A;
  transform:translateY(-50%);
}

.b2v-cmp-oui{ color:#1f7a4d; font-weight:700; }
.b2v-cmp-part{ color:#a87f2e; font-weight:600; }

.b2v-cmp-note{
  margin:1.1rem 0 0;
  color:#6f6f76;
  font-size:.8125rem;
  max-width:70ch;
}

.b2v-cmp-vide{
  text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;
  background:#FFFBF2;
  border:1px solid #F3ECDC;
  border-radius:16px;
}
.b2v-cmp-vide h3{ margin:0 0 .6rem; color:#111827; }
.b2v-cmp-vide p{ margin:0 auto .9rem; max-width:52ch; color:#6f6f76; }
.b2v-cmp-vide .ev-btn{ margin:.35rem; }

@media (max-width:640px){
  .b2v-cmp-bar-in{ gap:.6rem; padding:.7rem 1rem; }
  .b2v-cmp-chip{ max-width:150px; }
  .b2v-cmp-lbl{ width:140px; font-size:.875rem; }
}

@media (prefers-reduced-motion: reduce){
  .b2v-cmp-bar{ animation:none !important; }
  .b2v-cmp-btn{ transition:none !important; }
}