/* =========================================================
   Étiquette GARAN — garantie de durabilité (UE 2025/1960)
   v2 : le rendu visuel provient des SVG officiels inlinés
   (garan-pill-svg.blade.php / garan-full-svg.blade.php).
   Ce fichier ne gère QUE l'interaction (survol/clic) et le
   dimensionnement responsive — aucune couleur/police ici.
   ========================================================= */

.garan-badge {
  --garan-panel-w: 250px;

  position: relative;
  display: inline-block;
  line-height: 0; /* évite un espace blanc parasite sous le SVG inline */
  cursor: pointer;
  outline: none;
}

/* ---------- État repos : pastille compacte (SVG officiel "nested display") ---------- */

.garan-badge__pill {
  display: inline-block;
  width: 140px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #d8d8d8;
  transition: box-shadow .15s ease;
}

.garan-badge__pill svg {
  display: block;
  width: 100%;
  height: auto;
}

.garan-badge:hover .garan-badge__pill,
.garan-badge:focus-visible .garan-badge__pill,
.garan-badge.is-open .garan-badge__pill {
  box-shadow: 0 0 0 2px #003399;
}

/* ---------- État déplié : étiquette complète (SVG officiel "colour") ---------- */

.garan-badge__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: var(--garan-panel-w);

  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transform-origin: top left;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.garan-badge.garan-badge--flip-up .garan-badge__panel {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom left;
}

.garan-badge__panel-inner {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.garan-badge__panel-inner svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .garan-badge:hover .garan-badge__panel,
  .garan-badge:focus-within .garan-badge__panel {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}

.garan-badge.is-open .garan-badge__panel {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .garan-badge__panel {
    transition: none;
  }
}

@media (max-width: 380px) {
  .garan-badge {
    --garan-panel-w: min(88vw, 260px);
  }
}