/* ══════════════════════════════════════════════════════════════════════════════════════════
   L'INDICATIF DANS LA MÊME PILULE QUE LE NUMÉRO (JM, le 7 octobre 2026, capture à l'appui).
   ══════════════════════════════════════════════════════════════════════════════════════════

   « Il faut que le +225 soit dans la même zone de saisie que le numéro de téléphone. » Le
   sélecteur de pays restait à côté, et le numéro seul prenait la forme de pilule : deux boîtes
   pour une seule réponse. Une pilule : l'indicatif, un trait, le numéro, comme à la connexion de
   Manage. Elle devient violette, fond lavande, dès qu'on écrit dedans.

   UNE SEULE FEUILLE, LUE PAR LE PANIER, PAR « MOI » ET PAR LA PAGE D'ARRIVÉE (index.html, où la
   cliente tape le numéro de la gérante) : le même champ a la même tête partout.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.bo-assistant .bo-phone-wrap,
.bo-moi .bo-phone-wrap,
.bo-land .bo-phone-wrap {
  height: 54px; box-sizing: border-box; display: flex; align-items: center; gap: 0 !important;
  padding: 0 6px 0 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  transition: border-color .15s, background-color .15s;
}
.bo-assistant .bo-phone-wrap:focus-within,
.bo-moi .bo-phone-wrap:focus-within,
.bo-land .bo-phone-wrap:focus-within {
  border: 2px solid var(--primary); padding: 0 5px 0 15px; background: var(--primary-bg, #F3E8FF);
}

/* L'indicatif : sans cadre, séparé du numéro par un trait. */
.bo-assistant .bo-phone-btn,
.bo-moi .bo-phone-btn,
.bo-land .bo-phone-btn {
  height: 32px; min-width: 0 !important; padding: 0 12px 0 0 !important;
  border: 0 !important; border-right: 1px solid var(--border) !important; border-radius: 0 !important;
  background: transparent !important; font-size: 16px !important; font-weight: 700;
}

/* Le numéro : il ne dessine plus sa propre pilule, c'est l'enveloppe qui la porte. */
.bo-assistant .bo-phone-wrap input[type="tel"],
.bo-moi .bo-phone-wrap input[type="tel"],
.bo-land .bo-phone-wrap input[type="tel"],
.bo-assistant .bo-phone-wrap input[type="tel"]:focus,
.bo-moi .bo-phone-wrap input[type="tel"]:focus,
.bo-land .bo-phone-wrap input[type="tel"]:focus {
  flex: 1 1 auto; width: auto !important; height: 100% !important; min-width: 0;
  padding: 0 12px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none;
}