/* ========================================================================
   CHAMP TÉLÉPHONE « indicatif + numéro » -- composant partagé (préfixe eqm-tel-)
   ------------------------------------------------------------------------
   Rendu : shared/functions/eqm_tel.php (PHP) et shared/assets/js/eqm-tel.js
   (jumeau JS). Servi tel quel par les trois applications : Equimondo et le
   back-office par un lien symbolique dans leur css/, oPaddock par /assets/.

   Pattern « Préfixe téléphonique » de docs/DESIGN_SYSTEM.html : le drapeau
   et l'indicatif sont UN SEUL champ avec le numéro.

   ⚠️ LA BORDURE, LE RAYON ET LE HALO APPARTIENNENT AU CONTENEUR, jamais à
   ses deux moitiés (leçon d'opd-phone-prefix.css, 11/09/2026) : sinon le halo
   du numéro se dessine par-dessus le sélecteur, et la jonction paraît deux
   fois plus épaisse au focus.

   ⚠️ LES ENFANTS SONT CIBLÉS PAR `div.eqm-tel > …` (spécificité ≥ 0,2,2) : les
   pages hôtes posent souvent `.mon-modal input { border: … }` (0,1,1 à 0,2,1),
   qui redonnerait un cadre au numéro -- deux cadres au lieu d'un, sans que
   personne n'ait touché à ce fichier.
   ======================================================================== */

div.eqm-tel {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    border: 1.5px solid #cbd5e1;          /* --field-line du design system */
    border-radius: 12px;
    background: #fff;
    overflow: hidden;                      /* découpe les angles des deux moitiés */
    transition: border-color .2s ease, box-shadow .2s ease;
}
div.eqm-tel:hover { border-color: rgba(var(--primary-rgb), .45); }
div.eqm-tel:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .13);
}
div.eqm-tel:has(:disabled) { background: #f8fafc; opacity: .75; }

/* -- L'indicatif : une FACE (drapeau + « +1 ») sous un <select> natif transparent --
   La face est ce que l'on voit ; le <select>, posé dessus à opacité nulle, est ce
   que l'on clique, ce que le clavier atteint et ce que lit un lecteur d'écran
   (aria-label). Sa liste ouverte garde les libellés complets (« +1 (CA/US) »).
   Afficher ce libellé long dans le champ fermé le tronquait en « +1 (C… » dans
   une colonne de 250 px. */
div.eqm-tel > .eqm-tel-pref {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 5.25rem;                    /* « 🇨🇦 +1 » et son chevron, bordure comprise */
    padding: 0 1.85rem 0 .8rem;
    border-right: 1.5px solid #e2e8f0;    /* la SEULE ligne entre les deux moitiés */
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 11px 7px;
    transition: background-color .2s ease;
}
div.eqm-tel > .eqm-tel-pref:hover { background-color: rgba(var(--primary-rgb), .06); }
div.eqm-tel > .eqm-tel-pref:focus-within { background-color: rgba(var(--primary-rgb), .10); }
.eqm-tel-face {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    pointer-events: none;                  /* le clic traverse jusqu'au <select> */
    font-size: .9rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: .01em;
}
.eqm-tel-drapeau { font-size: 1.15rem; line-height: 1; }
.eqm-tel-drapeau:empty { display: none; }
div.eqm-tel > .eqm-tel-pref > select.eqm-tel-ind {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px;                       /* >= 16 px : iOS ne zoome pas à l'ouverture */
}
div.eqm-tel > .eqm-tel-pref > select.eqm-tel-ind:disabled { cursor: not-allowed; }

/* -- Le numéro -- */
div.eqm-tel > input.eqm-tel-num {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: .6rem .95rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    color: #1e293b;
    letter-spacing: .01em;
}
div.eqm-tel > input.eqm-tel-num::placeholder { color: #64748b; font-weight: 400; opacity: 1; }
div.eqm-tel > input.eqm-tel-num:focus { border: none; box-shadow: none; outline: none; }
div.eqm-tel > input.eqm-tel-num:disabled { cursor: not-allowed; }

/* Champ obligatoire laissé vide, après une tentative d'envoi. Rouge en dur, et
   non au thème : une erreur doit rester reconnaissable (cf. eqm-select.css). */
/* Les pages hôtes signalent une erreur sur le CHAMP (aria-invalid, ou leur
   classe : `is-err` d'oPaddock, `rei-input-err` de la réinscription) : le
   cadre étant porté par le conteneur, c'est lui qui doit rougir. */
div.eqm-tel:has(> input.eqm-tel-num:user-invalid),
div.eqm-tel:has(> input.eqm-tel-num[aria-invalid="true"]),
div.eqm-tel:has(> input.eqm-tel-num.is-err),
div.eqm-tel:has(> input.eqm-tel-num.rei-input-err) {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

/* Variante compacte (lignes de tableau, listes répétées) : ≥ 44 px tout de même. */
div.eqm-tel.eqm-tel-sm { min-height: 44px; border-radius: 10px; }

@media (max-width: 480px) {
    div.eqm-tel > .eqm-tel-pref { min-width: 0; padding-left: .65rem; padding-right: 1.6rem; background-position: right .55rem center; }
    div.eqm-tel > input.eqm-tel-num { padding-left: .75rem; padding-right: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    div.eqm-tel, div.eqm-tel > .eqm-tel-pref { transition: none; }
}