/* Choix de l'indicatif pays (site et console) */
.hp { position: relative; display: flex; align-items: stretch; gap: 0; width: 100%; }
.hp > input { flex: 1; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.hp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 .7rem; border: 2px solid var(--rule, #d0d4da); border-right: 0; border-radius: 12px 0 0 12px; background: var(--soft, #f2f4f6); color: inherit; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hp-flag { font-size: 1.25em; line-height: 1; }
.hp-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(22rem, 92vw); background: var(--paper, var(--bg, #fff)); color: var(--ink, var(--fg, #111)); border: 1.5px solid currentColor; border-radius: 12px; box-shadow: 0 14px 34px -10px rgba(0,0,0,.4); padding: 8px; }
.hp-q { width: 100%; border: 1.5px solid var(--rule, #d0d4da); border-radius: 10px; padding: .6rem .75rem; font: inherit; background: transparent; color: inherit; }
.hp-list { max-height: 16rem; overflow-y: auto; margin-top: 6px; overscroll-behavior: contain; }
.hp-list button { display: grid; grid-template-columns: 1.8em minmax(0,1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: .5rem .5rem; border-radius: 8px; cursor: pointer; }
.hp-list button:hover, .hp-list button.hp-at { background: var(--soft, #f2f4f6); }
.hp-list button[aria-selected="true"] .hp-n { font-weight: 700; }
.hp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-d { opacity: .7; font-variant-numeric: tabular-nums; }
.hp-sep { height: 1px; background: var(--rule, #d0d4da); margin: 6px 4px; }
.hp-none { margin: 10px 6px; opacity: .7; }