.fi {
  display: inline-block;
  width: 1.33em;
  height: 1em;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  margin-right: 0.5rem;
}

/* Drapeaux des pays FELTP */
.fi-bf {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23de2110' d='M0 0h3v1H0z'/%3E%3Cpath fill='%23009639' d='M0 1h3v1H0z'/%3E%3Cpath fill='%23fcd116' d='M0 .5h1.5v1H0z'/%3E%3Cpath fill='%23de2110' d='M.75 .5l.3.3-.3.3-.3-.3z'/%3E%3C/svg%3E");
}

.fi-tg {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath fill='%23006a4e' d='M0 0h5v3H0z'/%3E%3Cpath fill='%23fdd100' d='M0 0h5v.6H0zM0 1.2h5v.6H0zM0 2.4h5v.6H0z'/%3E%3Cpath fill='%23de2110' d='M0 0h2v1.8H0z'/%3E%3Cpath fill='%23ffffff' d='M1 .9l.31.23-.12-.38h.38l-.31-.23L1 .9z'/%3E%3C/svg%3E");
}

.fi-sn {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009639' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fcd116' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce1126' d='M2 0h1v2H2z'/%3E%3Cpath fill='%23009639' d='M1.5 1l.2.15-.08-.25h.25l-.2-.15L1.5 1z'/%3E%3C/svg%3E");
}

.fi-ml {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009639' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fcd116' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce1126' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}

.fi-ne {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6'%3E%3Cpath fill='%23e05206' d='M0 0h7v2H0z'/%3E%3Cpath fill='%23ffffff' d='M0 2h7v2H0z'/%3E%3Cpath fill='%23009639' d='M0 4h7v2H0z'/%3E%3Ccircle fill='%23e05206' cx='3.5' cy='3' r='.8'/%3E%3C/svg%3E");
}

.fi-ci {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23f77f00' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23ffffff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23009639' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}

.fi-gh {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23ce1126' d='M0 0h3v.67H0z'/%3E%3Cpath fill='%23fcd116' d='M0 .67h3v.66H0z'/%3E%3Cpath fill='%23009639' d='M0 1.33h3v.67H0z'/%3E%3Cpath fill='%23000000' d='M1.5 1l.2.15-.08-.25h.25l-.2-.15L1.5 1z'/%3E%3C/svg%3E");
}

.fi-ng {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23008751' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23ffffff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23008751' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}

/* Drapeaux de quelques pays majeurs */
.fi-fr {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002395' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23ffffff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ed2939' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}

.fi-us {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Cpath fill='%23b22234' d='M0 0h19v10H0z'/%3E%3Cpath stroke='%23fff' stroke-width='.77' d='M0 .77h19M0 2.31h19M0 3.85h19M0 5.38h19M0 6.92h19M0 8.46h19M0 10h19'/%3E%3Cpath fill='%233c3b6e' d='M0 0h9.5v5.38H0z'/%3E%3C/svg%3E");
}

.fi-gb {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0v30h60V0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
}

.fi-de {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath fill='%23000' d='M0 0h5v1H0z'/%3E%3Cpath fill='%23dd0000' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23ffce00' d='M0 2h5v1H0z'/%3E%3C/svg%3E");
}

.fi-ca {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath fill='%23ff0000' d='M0 0h25v50H0zM75 0h25v50H75z'/%3E%3Cpath fill='%23ffffff' d='M25 0h50v50H25z'/%3E%3Cpath fill='%23ff0000' d='M50 35l-5-15 5-5 5 5z'/%3E%3C/svg%3E");
}

/* Drapeaux par défaut pour les pays sans icône spécifique */
.fi-xx, .fi-default {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23cccccc' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23999999' stroke='%23666666' stroke-width='.1' d='M.5 .5h2v1h-2z'/%3E%3C/svg%3E");
}

/* Classe pour aligner les drapeaux dans les dropdowns */
.flag-dropdown-item {
  display: flex;
  align-items: center;
}

.flag-dropdown-item .fi {
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* Style pour les drapeaux dans les select */
select.form-control option {
  padding-left: 2rem;
}