/* « Pas à l'aise avec l'informatique ? On le fait pour vous. »

   Une ligne, jamais un pavé : ce n'est pas l'argument principal, c'est le
   filet sous l'argument principal. Voir partials/aide-humaine.blade.php pour
   la raison — la peur du « c'est compliqué » se forme AVANT le premier geste,
   et fait partir le visiteur vers une agence sans qu'il ait rien essayé. */
.aide-humaine {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 0;
    padding: 11px 14px;
    border: 1px solid #dcefe3;
    border-left: 3px solid #25d366;
    border-radius: 11px;
    background: #f4fbf7;
}
.aide-humaine__texte {
    flex: 1 1 260px;
    font-size: .87rem;
    line-height: 1.5;
    color: #33544a;
}
.aide-humaine__texte strong { color: #16452f; }
.aide-humaine__liens { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aide-humaine__wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.aide-humaine__wa:hover { background: #1eb954; }
.aide-humaine__tel {
    padding: 8px 13px;
    border: 1px solid rgba(22, 69, 47, .22);
    border-radius: 999px;
    color: #16452f;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.aide-humaine__tel:hover { border-color: rgba(22, 69, 47, .5); }

/* Variante du tunnel : la carte blanche est déjà large, on resserre.
   ⚠️ La marge du HAUT est indispensable : ce bloc vit hors du formulaire,
   il ne bénéficie donc pas de l'écart de grille. Sans elle, il colle à
   l'autorisation — « c'est trop collé » (Otman, 14-08-2026, mesuré à 0 px
   d'écart en production). */
.aide-humaine--tunnel { width: min(100%, 880px); margin: 24px auto 18px; }

@media (max-width: 560px) {
    .aide-humaine { flex-direction: column; align-items: stretch; gap: 10px; padding: 11px 13px; }
    /* ⚠️ `flex: 1 1 260px` sur le texte vaut pour la LARGEUR tant que le bloc
       est en ligne. En colonne, `flex-basis` s'applique à la HAUTEUR : le
       texte se retrouvait haut de 260 px et l'encart faisait 332 px, soit un
       tiers de l'écran — exactement le pavé qu'on voulait éviter.
       Mesuré en production le 14-08-2026. Ne pas retirer cette remise à zéro. */
    .aide-humaine__texte { flex: 0 1 auto; font-size: .84rem; }
    .aide-humaine__liens { justify-content: flex-start; }
    .aide-humaine__wa, .aide-humaine__tel { flex: 1 1 0; justify-content: center; text-align: center; }
}

/* Variante pleine largeur de l'accueil : elle traverse la grille du bloc
   « Quel visa devez-vous faire ? » au lieu de tenir dans la seule colonne de
   gauche, où elle était deux fois plus étroite que la carte du sélecteur —
   « ça prend pas toute la largeur, c'est pas équilibré » (Otman, 14-08-2026).
   ⚠️ Ne pas la remettre dans `.ov-passeport__copy`. */
.aide-humaine--pleine {
    grid-column: 1 / -1;
    margin-top: clamp(20px, 3vw, 32px);
}