/* ============================================================
   EDOUARGOT — Placement badge Rue des Jardins
   Cible :
   <div class="edo-photo-badge edo-photo-badge-family">...</div>

   Objectif :
   - éviter que l'image soit collée au bord sur mobile ;
   - garder la couleur et l'esprit visuel existants ;
   - améliorer l'alignement desktop et mobile.
   ============================================================ */

/* Base desktop/tablette */
html body .edo-photo-badge.edo-photo-badge-family {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  max-width: min(92%, 620px) !important;
  box-sizing: border-box !important;

  padding: 10px 16px !important;
  margin-left: clamp(14px, 2vw, 28px) !important;
  margin-right: clamp(14px, 2vw, 28px) !important;

  overflow: hidden !important;
}

/* Image Rue des Jardins */
html body .edo-photo-badge.edo-photo-badge-family img[src="/images/ruedesjardins02.png"],
html body .edo-photo-badge.edo-photo-badge-family img[src*="ruedesjardins02.png"] {
  flex: 0 0 auto !important;
  display: block !important;

  width: 46px !important;
  height: 32px !important;
  object-fit: cover !important;
  border-radius: 9px !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
}

/* Bloc texte */
html body .edo-photo-badge.edo-photo-badge-family .edo-family-lines {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1.15 !important;
}

html body .edo-photo-badge.edo-photo-badge-family .edo-family-text,
html body .edo-photo-badge.edo-photo-badge-family .edo-family-date {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Mobile : on rentre le badge dans l'écran avec une vraie marge */
@media (max-width: 768px) {
  html body .edo-photo-badge.edo-photo-badge-family {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    max-width: calc(100vw - 32px) !important;

    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 9px 12px !important;
    gap: 9px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .edo-photo-badge.edo-photo-badge-family img[src="/images/ruedesjardins02.png"],
  html body .edo-photo-badge.edo-photo-badge-family img[src*="ruedesjardins02.png"] {
    width: 42px !important;
    height: 30px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .edo-photo-badge.edo-photo-badge-family .edo-family-lines {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body .edo-photo-badge.edo-photo-badge-family .edo-family-text {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body .edo-photo-badge.edo-photo-badge-family .edo-family-date {
    display: block !important;
    margin-top: 2px !important;
  }
}

/* Très petit mobile */
@media (max-width: 420px) {
  html body .edo-photo-badge.edo-photo-badge-family {
    max-width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  html body .edo-photo-badge.edo-photo-badge-family img[src="/images/ruedesjardins02.png"],
  html body .edo-photo-badge.edo-photo-badge-family img[src*="ruedesjardins02.png"] {
    width: 38px !important;
    height: 28px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }
}