/* ======================================================================== Composant sélecteur de préfixe téléphonique — partagé opaddock Prefix : opd-tel- ======================================================================== */ /* La bordure, le rayon et le halo de focus appartiennent au GROUPE, jamais a chacune de ses deux moities. Quand le bouton et le champ portaient chacun les leurs, deux defauts apparaissaient sur leur ligne de jonction (constates le 11/09/2026 sur l'inscription oPaddock) : - le halo de focus du champ, large de 4 px, se dessinait PAR-DESSUS le bouton de prefixe -- d'ou l'impression de superposition ; - au focus, les deux bordures viraient au vert de part et d'autre de la jonction, qui paraissait alors deux fois plus epaisse. Poser les trois sur le wrap rend le champ composite indivisible, et rend la collision impossible a reintroduire. */ .opd-tel-wrap { display: flex; align-items: stretch; gap: 0; width: 100%; border: 1.5px solid var(--slate-200, #e2e8f0); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; /* Decoupe les angles des deux enfants sur le rayon du groupe. Sans risque pour la liste des pays : le JS la deplace vers (portail). */ overflow: hidden; } .opd-tel-wrap:hover { border-color: var(--slate-300, #cbd5e1); } .opd-tel-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); } /* ── Bouton pays (desktop) ── */ .opd-tel-btn { flex-shrink: 0; display: flex; align-items: center; gap: 6px; height: 49px; /* 52 - les 1.5 px de bordure du wrap, de chaque cote */ padding: 0 12px; /* Une SEULE ligne separe les deux moities : celle-ci. Le champ n'en pose pas. */ border: none; border-right: 1.5px solid var(--slate-200, #e2e8f0); border-radius: 0; background: var(--slate-50, #f8fafc); cursor: pointer; transition: background .2s; font-family: inherit; font-size: 14px; color: var(--slate-700, #374151); white-space: nowrap; min-width: 90px; } .opd-tel-btn:hover { background: rgba(var(--primary-rgb), .06); } .opd-tel-flag { font-size: 18px; line-height: 1; } .opd-tel-code { font-size: 13px; font-weight: 600; color: var(--slate-600, #475569); letter-spacing: .3px; } .opd-tel-chevron { font-size: 11px; color: var(--slate-400, #9ca3af); transition: transform .2s; margin-left: 2px; } .opd-tel-wrap.dropdown-open .opd-tel-chevron { transform: rotate(180deg); } /* ── Champ numéro ── */ .opd-tel-input { flex: 1; min-width: 0; height: 49px; /* Ni bordure ni halo : ils sont sur le wrap. Les remettre ici rejouerait exactement le defaut de superposition decrit plus haut. */ border: none; border-radius: 0; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--fg, #0f172a); background: #fff; outline: none; box-sizing: border-box; } .opd-tel-input:focus { outline: none; box-shadow: none; } .opd-tel-input::placeholder { color: var(--slate-400, #9ca3af); } /* ── Select natif (mobile uniquement) ── */ .opd-tel-native { display: none; } @media (max-width: 768px) { .opd-tel-native { display: block; flex-shrink: 0; height: 49px; padding: 0 6px 0 10px; border: none; border-right: 1.5px solid var(--slate-200, #e2e8f0); border-radius: 0; background: var(--slate-50, #f8fafc); font-family: inherit; font-size: 15px; color: var(--slate-700, #374151); cursor: pointer; outline: none; -webkit-appearance: auto; appearance: auto; min-width: 80px; max-width: 100px; } .opd-tel-native:focus { outline: none; box-shadow: none; } /* le halo est sur le wrap */ /* Cacher le bouton custom et le dropdown sur mobile */ .opd-tel-btn { display: none !important; } .opd-tel-dropdown { display: none !important; } .opd-tel-input { height: 49px; } } /* ── Dropdown liste pays (portail body, position:fixed via JS) ── */ .opd-tel-dropdown { display: none; flex-direction: column; background: #fff; border: 1.5px solid var(--slate-200, #e2e8f0); border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, .14); max-height: 260px; overflow: visible; } .opd-tel-dropdown.is-open { display: flex; } .opd-tel-list { overflow-y: scroll; flex: 1; max-height: 260px; min-height: 0; border-radius: 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; position: relative; } .opd-tel-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 14px; transition: background .12s; border-bottom: 1px solid var(--slate-100, #f1f5f9); } .opd-tel-item:last-child { border-bottom: none; } .opd-tel-item:hover { background: var(--primary-50, #f0fdf4); } .opd-tel-item.is-selected { background: rgba(var(--primary-rgb), .08); font-weight: 600; } .opd-tel-item-flag { font-size: 18px; flex-shrink: 0; } .opd-tel-item-name { flex: 1; color: var(--slate-700, #374151); font-size: 13.5px; } .opd-tel-item-code { color: var(--slate-400, #9ca3af); font-size: 12.5px; font-weight: 500; }