/*
 * Le choix de la langue : le select natif, et le pave a drapeaux qui le
 * remplace quand le script est la (cf. webroot/js/langues.js et
 * templates/element/choixLangue.php).
 *
 * Les couleurs sont celles de theme.css : le pave doit passer pour un champ
 * ordinaire dans un formulaire, et pour un bouton discret dans la barre haute.
 *
 * Les tailles sont en px, pas en rem : la feuille sert deux mises en page qui
 * n'ont pas la meme base. L'application charge milligram, qui pose 1rem a
 * 10px ; la vitrine et les pages legales ne le chargent pas, 1rem y vaut 16px,
 * et le selecteur y sortait 1,6 fois plus gros.
 */

.langue {
  position: relative;
}

/* Enrichi, le select reste dans le formulaire mais sort de l'affichage.
   display:none le retirerait aussi de l'envoi sur certains navigateurs ;
   il est donc seulement rendu invisible et insensible. */
.langue--enrichi .langue-source {
  height: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.langue-etiquette {
  display: block;
}

.langue-drapeau {
  border: 1px solid var(--itt-border, #e3e8ee);
  border-radius: 2px;
  display: block;
  height: 14px;
  width: 21px;
}

.langue-vignette {
  display: inline-flex;
  flex: 0 0 auto;
}

/* La langue affichee hors formulaire : fiche d'un compte. */
.langue-etiquette-valeur {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

/* ------------------------------------------------------------- Le bouton --- */

.langue-bouton {
  align-items: center;
  background: var(--itt-surface, #fff);
  border: 1px solid var(--itt-border-strong, #cbd4de);
  border-radius: var(--itt-radius-sm, 5px);
  color: var(--itt-text, #1f2933);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  height: auto;
  letter-spacing: normal;
  line-height: 1.5;
  margin: 0;
  padding: 6px 26px 6px 8px;
  position: relative;
  text-transform: none;
  width: 100%;
}

/* Le chevron, trace en CSS : une image de plus pour deux traits serait du
   poids pour rien. */
.langue-bouton::after {
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  height: 6px;
  opacity: .6;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-70%) rotate(45deg);
  width: 6px;
}

/* milligram passe tout bouton survole ou focalise en texte blanc sur gris :
   la couleur est donc reposee ici, sans quoi le nom de la langue disparait. */
.langue-bouton:hover,
.langue-bouton:focus {
  background: var(--itt-surface, #fff);
  border-color: var(--itt-accent, #3d7fc1);
  color: var(--itt-text, #1f2933);
}

.langue-bouton:focus-visible {
  box-shadow: var(--itt-focus, 0 0 0 3px rgba(61, 127, 193, .25));
  outline: none;
}

/* -------------------------------------------------------------- La liste --- */

.langue-liste {
  background: var(--itt-surface, #fff);
  border: 1px solid var(--itt-border, #e3e8ee);
  border-radius: var(--itt-radius, 8px);
  box-shadow: var(--itt-shadow-lg, 0 4px 12px rgba(16, 24, 40, .08));
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 280px;
  min-width: 100%;
  overflow-y: auto;
  padding: 4px;
  position: absolute;
  top: 100%;
  z-index: 60;
}

.langue-liste:focus {
  outline: none;
}

.langue-option {
  align-items: center;
  border-radius: var(--itt-radius-sm, 5px);
  cursor: pointer;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  white-space: nowrap;
}

.langue-option--survol {
  background: var(--itt-accent-soft, #eaf2fb);
}

.langue-option[aria-selected="true"] {
  font-weight: 650;
}

/* ------------------------------------------------------------- Le bandeau --- */

/* Dans la barre haute, le choix doit se faire remarquer moins qu'un lien :
   pas de cadre tant que le pointeur n'est pas dessus. */
.langue--bandeau {
  display: inline-block;
}

.langue-forme {
  display: inline-block;
  margin: 0;
}

.langue--bandeau .langue-bouton {
  background: transparent;
  border-color: transparent;
  font-size: 13px;
  padding: 4px 22px 4px 6px;
  width: auto;
}

.langue--bandeau .langue-bouton:focus {
  background: transparent;
  border-color: transparent;
}

.langue--bandeau .langue-bouton:hover {
  background: var(--itt-surface-alt, #fafbfc);
  border-color: var(--itt-border, #e3e8ee);
}

.langue--bandeau .langue-liste {
  left: auto;
  right: 0;
}

/* Le nom de la langue tient dans la barre tant qu'elle est large ; en dessous,
   le drapeau suffit a reconnaitre la sienne. */
@media only screen and (max-width: 600px) {
  .langue--bandeau .langue-nom {
    display: none;
  }
}

/* ------------------------------------- Les pages publiques : des liens --- */

/* Un <details> natif : le depliant fonctionne sans script. */
/* Meme gabarit que le choix du bandeau de l'application : meme taille de
   texte que son corps (14px), meme bouton discret. */
.langue-liens {
  display: inline-block;
  font-size: 14px;
  position: relative;
}

.langue-liens > summary {
  list-style: none;
}

.langue-liens > summary::-webkit-details-marker {
  display: none;
}

.langue-liens > summary.langue-bouton {
  background: transparent;
  border-color: transparent;
  font-size: 13px;
  padding: 4px 22px 4px 6px;
  width: auto;
}

.langue-liens > summary.langue-bouton:hover {
  background: var(--itt-surface-alt, #fafbfc);
  border-color: var(--itt-border, #e3e8ee);
}

.langue-liens[open] > summary.langue-bouton::after {
  transform: translateY(-20%) rotate(-135deg);
}

.langue-liens .langue-liste {
  right: 0;
  left: auto;
}

.langue-liens .langue-option {
  padding: 0;
}

.langue-liens .langue-option > a {
  align-items: center;
  border-radius: var(--itt-radius-sm, 5px);
  color: inherit;
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  text-decoration: none;
  white-space: nowrap;
}

.langue-liens .langue-option > a:hover,
.langue-liens .langue-option > a:focus-visible {
  background: var(--itt-accent-soft, #eaf2fb);
}

.langue-liens .langue-option--courante > a {
  font-weight: 650;
}

/* Repli sans JavaScript : le bouton d'envoi du bandeau. */
.langue-valider {
  font-size: 12px;
  margin: 0 0 0 6px;
  padding: 3px 10px;
}