/* ====================================================================
   COPAINS POILUS — TUNNEL FIT  (tunnel-fit.css)
   ────────────────────────────────────────────────────────────────────
   Correctifs responsive MOBILE du tunnel « Proposer ses services »
   (inscription-petsitter + étapes 2/3/4). Chargé EN DERNIER, après le
   <style> inline de chaque page → gagne dans la cascade à spécificité égale.

   Problèmes corrigés (débordement horizontal ≤414px) :
     1. Champ téléphone (.phone-num) : flex:1 sans min-width:0 → l'input ne
        rétrécit pas sous sa largeur intrinsèque et pousse le formulaire.
     2. Header tunnel (.tnav / .nav-right) : logo + « Déjà inscrit ? Se
        connecter » + langue trop larges → on compacte et on masque le
        libellé nu « Déjà inscrit ? » (redondant avec le bouton).
     3. Barre de progression (.prog-lbl) : libellés en white-space:nowrap
        plus larges que leur boîte → on les masque en mobile (le nom de
        l'étape reste affiché dans l'en-tête de carte + la barre %).

   ROLLBACK : retirer le <link> tunnel-fit.css des pages, ou vider ce fichier.
   ==================================================================== */

/* 1. Champ téléphone : autoriser l'input flex à rétrécir (fix flexbox).
      Sans risque hors mobile (flex:1 remplit de toute façon l'espace). */
.phone-wrap { flex-wrap: wrap; }
.phone-num  { min-width: 0; }

/* 3b. Tablette (≤768px, sidebar masquée) : les libellés d'étapes en
      white-space:nowrap dépassent leur boîte de 80px et provoquent un
      micro-débordement horizontal. On les autorise à passer à la ligne. */
@media (max-width: 768px) {
  .prog-lbl { white-space: normal; }
}

/* 2 + 3. Traitement mobile (téléphones jusqu'aux petites tablettes). */
@media (max-width: 480px) {
  .tnav { padding: 10px 14px; }

  /* font-size:0 masque le TEXTE NU « Déjà inscrit ? » (pas d'élément à
     cibler) ; on restaure la taille sur les enfants réels (langue + bouton). */
  .nav-right      { font-size: 0; gap: 8px; }
  .nav-right > *  { font-size: 0.82rem; }
  .btn-signin     { padding: 6px 13px; font-size: 0.82rem; }

  /* Libellés d'étapes masqués en mobile : cercles + barre % suffisent,
     et l'en-tête de carte affiche déjà le nom de l'étape courante. */
  .prog-lbl { display: none; }
}