/* /assets/css/responsive-fixes.css */
/* Harmony Funéraire — Responsive design system safeguards */
/* Version : 20260529 */

/* ============================================================
   Utilitaires anti-césure pour textes sensibles
   ============================================================ */
.hf-nowrap,
.hf-country,
.hf-phone {
  white-space: nowrap;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* ============================================================
   CTA téléphone
   ============================================================ */
.hf-cta-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  line-height: 1;
  font-size: clamp(12px, 3.35vw, 14px);
  padding-inline: clamp(10px, 2.8vw, 14px);
}

.hf-cta-call .hf-phone {
  flex-shrink: 0;
}

.hf-call-short {
  display: none;
}

@media (max-width: 390px) {
  .hf-cta-call .hf-call-long {
    display: none;
  }

  .hf-cta-call .hf-call-short {
    display: inline;
  }
}

/* ============================================================
   Route destination : Toulouse → États-Unis
   ============================================================ */
.hf-route {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
  flex-wrap: wrap;
}

.hf-route .hf-country {
  white-space: nowrap;
  hyphens: none;
}

/* ============================================================
   Lien avec flèche
   ============================================================ */
/* Note : white-space:nowrap retiré du conteneur et du span texte —
   les textes longs doivent pouvoir wrapper (contact.html, dom-tom.html).
   Seule la flèche reste inline-block pour ne pas casser en milieu de glyphe. */
.hf-arrow-link > span[aria-hidden="true"] {
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   Bouton email
   ============================================================ */
.hf-email-btn {
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.hf-email-short {
  display: none;
}

.hf-email-full {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 430px) {
  .hf-email-short {
    display: inline;
  }

  .hf-email-full {
    display: none;
  }
}