/* ============================================================
   Champ téléphone à drapeaux (page Compte)
   ------------------------------------------------------------
   Habille intl-tel-input (vendorisé dans assets/vendor/, aucun CDN) avec
   NOS tokens. Chargé après la feuille de la bibliothèque, sur cette page
   seulement. Tout passe par var(--…) : le thème sombre suit tout seul,
   il n'y a pas un seul bloc [data-theme="dark"] à maintenir ici.

   Attention : sur mobile la liste des pays est déplacée à la FIN du body
   (mode plein écran). Les règles de la liste ne sont donc PAS préfixées
   par .champ-telephone, sinon elles ne s'appliqueraient plus. Cette
   feuille n'étant chargée que sur la page Compte, il n'y a pas de risque
   de fuite ailleurs.
   ============================================================ */

/* Variables de la bibliothèque, rebranchées sur nos tokens. */
:root {
  --iti-border-color: var(--line);
  --iti-border-width: 1.5px;          /* même trait que .field input */
  --iti-dropdown-bg: var(--surface);
  --iti-hover-color: color-mix(in srgb, var(--ink) 7%, transparent);
  --iti-dialcode-color: var(--ink-faint);
  --iti-search-icon-color: var(--ink-faint);
  --iti-arrow-color: var(--ink-soft);
  --iti-spacer-horizontal: 12px;
}

/* Le panneau qui contient le champ doit laisser sortir la liste des pays
   (même correctif que le calendrier de dates, .panel:has(.dp)). */
.panel:has(.champ-telephone) { overflow: visible; }
.panel:has(.champ-telephone) .panel-head { border-radius: var(--radius-card) var(--radius-card) 0 0; }

/* La bibliothèque enveloppe le champ : l'enveloppe prend toute la largeur. */
.champ-telephone .iti { display: block; width: 100%; }

/* ---------- Le bouton « pays » posé dans le champ ---------- */
.champ-telephone .iti__selected-country { border-radius: var(--radius-field) 0 0 var(--radius-field); }
.champ-telephone .iti__selected-country-primary {
  min-width: 44px;                    /* cible tactile : on ne descend pas en dessous */
  padding-inline: 12px 8px;
}
/* Focus visible au clavier, avec le même anneau que partout ailleurs. */
.champ-telephone .iti__selected-country:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-field) 0 0 var(--radius-field);
}

/* ---------- La liste des pays (inline sur ordinateur, plein écran sur mobile) ---------- */
.iti__dropdown-content {
  z-index: 30;                        /* au-dessus des panneaux suivants */
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--ink) 18%, transparent);
  overflow: hidden;
}
.iti--fullscreen-popup .iti__dropdown-content { border-radius: var(--radius-card); }

/* La bibliothèque plafonne la liste à 185px — calibré pour ses petites
   rangées d'origine. Avec nos rangées de 44px (cible tactile), ça ne
   montrait que 4 pays et la barre de défilement Mac est invisible au
   repos : on relève le plafond (8 rangées) en gardant le défilement. */
.iti__dropdown-content .iti__country-list {
  max-height: min(22rem, 55vh);
}

.iti__dropdown-content .iti__country {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--touch-target);    /* 44px : lisible et cliquable au doigt */
  padding: 6px 14px;
  font-size: 1rem;                    /* 16px : jamais de liste en petit */
  line-height: 1.35;
}
.iti__dropdown-content .iti__country-name { color: var(--ink); }
.iti__dropdown-content .iti__dial-code { color: var(--ink-faint); }
.iti__dropdown-content .iti__country.iti__highlight { background: var(--iti-hover-color); }
.iti__dropdown-content .iti__country[aria-selected="true"] { background: var(--accent-soft); }
.iti__dropdown-content .iti__country[aria-selected="true"] .iti__country-name {
  color: var(--accent-ink); font-weight: 700;
}

/* Le champ de recherche de la liste. Sur ordinateur il est DANS un .field :
   sans ces règles, la peau générique de composants.css (bordure, rayon,
   padding) l'emporte sur celle de la bibliothèque et recouvre la loupe. */
.iti__dropdown-content .iti__search-input {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface);
  border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  min-height: var(--touch-target);
  padding-block: 10px;
  padding-inline: 36px 28px;          /* place pour la loupe, à gauche */
  box-shadow: none;
}
.iti__dropdown-content .iti__search-input::placeholder { color: var(--ink-faint); }
.iti__dropdown-content .iti__search-input:focus {
  outline: none;
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 var(--accent);   /* soulignement net, sans boîte */
}

@media (prefers-reduced-motion: reduce) {
  .iti *, .iti__dropdown-content * { transition: none !important; }
}