L'image montre le numéro de téléphone qui se wrape sur plusieurs lignes sur les écrans moyens. Je vais afficher uniquement l'icône téléphone entre mobile et desktop.

Le numéro s'affiche avec hidden sm:inline — donc visible dès sm (640px). Je dois masquer le numéro sur les écrans moyens (entre sm et lg) en le cachant avec hidden sm:hidden lg:inline et ne garder que l'icône:

J'ai remplacé hidden sm:inline par hidden sur le numéro dans la zone mobile/tablet, de sorte que seule l'icône téléphone s'affiche entre mobile et desktop. Le numéro complet reste visible dans le menu desktop (hidden lg:flex) et dans le menu mobile overlay.

Le numéro est masqué dans le bloc mobile (lg:hidden) mais dans le Desktop CTA (hidden lg:flex), le numéro complet s'affiche toujours. Il suffit de masquer le texte du numéro dans le Desktop CTA également, en gardant uniquement l'icône:

J'ai remplacé le lien texte du numéro dans le Desktop CTA par une icône téléphone encerclée dans un bouton rond (w-9 h-9 rounded-full border border-current) en cyan. L'icône s'affiche maintenant sur tous les formats d'écran sans texte, avec un aria-label pour l'accessibilité. Le numéro complet reste uniquement dans le menu mobile overlay.