/* =========================================================
   Accords Mets & Vins (Alsace) — Premium UI (FIX)
   File: /assets/css/mets-vins.css
   - Fix chevauchement badge/titre
   - Replace bruns par bordeaux dégradé
   ========================================================= */

:root{
  --mv-bg: rgba(255,255,255,.04);
  --mv-card: rgba(255,255,255,.06);
  --mv-card2: rgba(255,255,255,.08);
  --mv-line: rgba(255,255,255,.10);
  --mv-text: rgba(255,255,255,.92);
  --mv-muted: rgba(255,255,255,.66);
  --mv-soft: rgba(255,255,255,.12);

  /* === Bordeaux premium (remplace les bruns) === */
  --mv-bdx-1: #220913;   /* bordeaux très sombre */
  --mv-bdx-2: #4a0e22;   /* bordeaux profond */
  --mv-bdx-3: #7b1233;   /* bordeaux rubis */
  --mv-bdx-4: #c21b4a;   /* accent bordeaux */
  --mv-bdx-glow: rgba(194, 27, 74, .18);

  /* Or */
  --mv-primary: #ffcc00;
  --mv-primary2: #ffb000;

  --mv-ok: rgba(50, 205, 50, .95);
  --mv-warn: rgba(255, 170, 0, .95);
  --mv-low: rgba(255, 90, 90, .95);

  --mv-shadow: 0 18px 50px rgba(0,0,0,.35);
  --mv-radius: 18px;
  --mv-radius2: 22px;
}

.content h1{ margin-bottom: 6px; }

.mv-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 14px;
}

.mv-badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius: 999px;

  /* Bordeaux premium (au lieu du brun) */
  background:
    radial-gradient(120% 160% at 15% 15%, rgba(194,27,74,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(194,27,74,.20);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  min-width: 260px;
}

.mv-badge__icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius: 12px;

  background:
    radial-gradient(140% 140% at 25% 20%, rgba(194,27,74,.28), rgba(0,0,0,.14));
  border:1px solid rgba(194,27,74,.28);
  font-size:18px;
}
.mv-badge__title{ color: var(--mv-text); font-weight: 800; letter-spacing: .2px; }
.mv-badge__sub{ color: var(--mv-muted); font-size: 12.5px; }

.mv-card{
  /* Bordeaux dégradé (remplace le rendu brun) */
  background:
    radial-gradient(130% 180% at 12% 8%, rgba(194,27,74,.14), transparent 58%),
    linear-gradient(180deg, var(--mv-card2), var(--mv-card));
  border:1px solid var(--mv-line);
  border-radius: var(--mv-radius2);
  box-shadow: var(--mv-shadow);
  padding: 14px;
}

.mv-card--controls{ margin: 12px 0 14px; }
.mv-controls{
  display:grid;
  grid-template-columns: 1.25fr 1fr 0.8fr 1fr;
  gap:12px;
  align-items:end;
}

.mv-field label{
  display:block;
  font-size: 13px;
  color: var(--mv-muted);
  margin: 0 0 6px;
}

.mv-input{
  width:100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid var(--mv-soft);
  background: rgba(10, 18, 32, .35);
  color: var(--mv-text);
  outline:none;
}
.mv-input::placeholder{ color: rgba(255,255,255,.45); }

/* Focus + glow bordeaux premium */
.mv-input:focus{
  border-color: rgba(194,27,74,.35);
  box-shadow: 0 0 0 4px rgba(194,27,74,.10);
}

.mv-field--range{ padding: 2px 0; }

.mv-rangeHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.mv-rangeValue{
  font-size: 12px;
  color: rgba(255,255,255,.75);
  padding: 3px 8px;
  border:1px solid var(--mv-line);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.mv-range{ width:100%; accent-color: var(--mv-primary); }
.mv-rangeLabels{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,.52);
}

.mv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

.mv-btn{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--mv-line);
  background: rgba(255,255,255,.05);
  color: var(--mv-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  user-select:none;
  text-decoration:none;
}

.mv-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* Bouton principal -> bordeaux premium (au lieu du brun) */
.mv-btn--primary{
  border-color: rgba(194,27,74,.34);
  background:
    radial-gradient(140% 200% at 20% 20%, rgba(194,27,74,.22), transparent 58%),
    linear-gradient(180deg, rgba(194,27,74,.14), rgba(255,255,255,.05));
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.mv-btn--primary:hover{
  border-color: rgba(194,27,74,.55);
  box-shadow: 0 14px 38px rgba(0,0,0,.30);
}

.mv-btn--ghost{
  background: transparent;
  border-style:dashed;
}

.mv-tip{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(194,27,74,.18);
  background:
    radial-gradient(130% 180% at 12% 10%, rgba(194,27,74,.16), transparent 60%),
    rgba(0,0,0,.12);
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

.mv-results{ margin-top: 10px; }

.mv-empty{
  text-align:center;
  padding: 26px 10px 18px;
  border-radius: var(--mv-radius2);
  border:1px dashed rgba(194,27,74,.26);
  background:
    radial-gradient(130% 180% at 10% 10%, rgba(194,27,74,.14), transparent 65%),
    rgba(0,0,0,.10);
}
.mv-empty__icon{ font-size: 38px; margin-bottom: 8px; }
.mv-empty__title{ font-weight: 800; color: var(--mv-text); }
.mv-empty__sub{ margin-top: 4px; }

.mv-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* =========================================================
   ✅ FIX CHEVAUCHEMENT TEXTE (comme ta capture)
   - Le badge "Accord Signature" ne doit PAS recouvrir le titre
   - On réserve une zone en haut de la carte
   - On place le badge en haut à droite
   ========================================================= */
.mv-wine{
  position:relative;
  overflow:hidden;
  padding-top: 46px; /* réserve de place pour le badge */
}

.mv-pillScore{
  position:absolute;
  top: 12px;
  right: 12px;      /* <-- au lieu de gauche */
  left: auto;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  white-space: nowrap;
}

.mv-pillScore.is-3{ border-color: rgba(50,205,50,.35); background: rgba(50,205,50,.10); }
.mv-pillScore.is-2{ border-color: rgba(255,170,0,.35); background: rgba(255,170,0,.10); }
.mv-pillScore.is-1{ border-color: rgba(255,90,90,.35); background: rgba(255,90,90,.10); }

.mv-wine__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.mv-wine__title{
  font-weight: 900;
  color: var(--mv-text);
  line-height: 1.15;

  /* protection si long titre */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.mv-wine__sub{
  color: var(--mv-muted);
  font-size: 13px;
  margin-top: 4px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.mv-stars{
  display:inline-flex;
  gap: 2px;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  font-size: 13px;
  white-space:nowrap;
}

.mv-bullet{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 10px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mv-bullet__ico{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius: 12px;
  background:
    radial-gradient(140% 160% at 25% 20%, rgba(194,27,74,.16), rgba(255,255,255,.06));
  border:1px solid rgba(194,27,74,.18);
  font-size: 16px;
  flex: 0 0 auto;
}
.mv-bullet__txt{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.35;
}
.mv-bullet__txt b{ color: rgba(255,255,255,.93); }

.mv-profile{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background:
    radial-gradient(130% 200% at 10% 0%, rgba(194,27,74,.12), transparent 60%),
    rgba(255,255,255,.04);
  border:1px solid rgba(194,27,74,.14);
}

.mv-profileHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}
.mv-profileHead .muted{ font-size: 12.5px; }

.mv-bar{
  height: 12px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow:hidden;
}
.mv-bar > span{
  display:block;
  height: 100%;
  width: 50%;
  border-radius: 999px;

  /* bordeaux -> or (premium) */
  background: linear-gradient(90deg, rgba(194,27,74,.70), rgba(255,204,0,.65));
}

.mv-barLabels{
  display:flex;
  justify-content:space-between;
  margin-top: 8px;
  font-size: 11.5px;
  color: rgba(255,255,255,.52);
}

.mv-ctaRow{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.mv-cta{
  flex: 1 1 auto;
  min-width: 180px;
  justify-content:center;
  border-color: rgba(194,27,74,.40);
  background:
    radial-gradient(140% 200% at 20% 20%, rgba(194,27,74,.22), transparent 58%),
    linear-gradient(180deg, rgba(194,27,74,.12), rgba(255,255,255,.05));
}

.mv-chip{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(194,27,74,.18);
  background:
    radial-gradient(140% 200% at 10% 10%, rgba(194,27,74,.12), transparent 60%),
    rgba(0,0,0,.10);
  font-size: 12px;
  color: rgba(255,255,255,.72);
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.mv-chip strong{ color: rgba(255,255,255,.92); font-weight: 800; }

.mv-card--footer{ margin-top: 14px; }
.mv-foot{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mv-foot__item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(194,27,74,.14);
  background:
    radial-gradient(130% 200% at 10% 10%, rgba(194,27,74,.12), transparent 62%),
    rgba(0,0,0,.08);
}
.mv-foot__icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius: 14px;
  background:
    radial-gradient(140% 160% at 25% 20%, rgba(194,27,74,.16), rgba(255,255,255,.06));
  border:1px solid rgba(194,27,74,.18);
  font-size: 16px;
}
.mv-foot__title{ font-weight: 900; color: rgba(255,255,255,.92); }
.mv-foot__sub{ font-size: 13px; }

/* Responsive */
@media (max-width: 1100px){
  .mv-controls{ grid-template-columns: 1fr 1fr; }
  .mv-badge{ min-width: unset; }
  .mv-foot{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .mv-head{
    flex-direction:column;
    align-items:stretch;
  }
  .mv-grid{ grid-template-columns: 1fr; }
  .mv-actions .mv-btn{ flex: 1 1 auto; justify-content:center; }

  .mv-pillScore{ font-size: 11.5px; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce){
  .mv-btn{ transition:none; }
  .mv-btn:hover{ transform:none; }
}

/* Select + dropdown options plus dark (meilleure lisibilité) */
.mv-input{
  background: rgba(7, 10, 18, .78) !important;
  border-color: rgba(255,255,255,.16);
}

/* Liste déroulante (options) */
.mv-input option{
  background: #0a0f1c;   /* très dark */
  color: rgba(255,255,255,.92);
}

/* Hover/selected (suivant navigateurs) */
.mv-input option:checked,
.mv-input option:hover{
  background: #151c2f;
  color: #fff;
}

/* Améliore aussi la lisibilité du placeholder */
.mv-input::placeholder{
  color: rgba(255,255,255,.55);
}