/*!
 * AutoTranslate.css v1.0.0
 * Styles du widget sélecteur de langue
 * Fichier optionnel — le JS injecte automatiquement ces styles si ce fichier n'est pas lié.
 */

/* ─────────────────────────────────────────────────────────
   WIDGET CONTENEUR
───────────────────────────────────────────────────────── */
#at-widget {
  position: fixed;
  z-index: 2147483647; /* toujours au-dessus */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1;
}

#at-widget * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────
   POSITIONS
───────────────────────────────────────────────────────── */
#at-widget.at-pos-bottom_right { bottom: 24px; right: 24px; }
#at-widget.at-pos-bottom_left  { bottom: 24px; left:  24px; }
#at-widget.at-pos-top_right    { top:    24px; right: 24px; }
#at-widget.at-pos-top_left     { top:    24px; left:  24px; }

/* ─────────────────────────────────────────────────────────
   BOUTON PRINCIPAL (trigger)
───────────────────────────────────────────────────────── */
.at-trigger {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:      6px 12px!important;  /* previous: 9px 14px; */

  background:    #ffffff;
  color:         #1a202c;
  border:        1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow:    0 2px 10px rgba(0, 0, 0, 0.10);

  cursor:      pointer;
  font-size:   10px; /* 14px; */
  font-weight: 500;
  white-space: nowrap;
  user-select: none;

  transition:
    box-shadow   .15s ease,
    border-color .15s ease,
    transform    .10s ease;
}

.at-trigger:hover {
  border-color: #94a3b8;
  box-shadow:   0 4px 16px rgba(0, 0, 0, 0.14);
}

.at-trigger:active {
  transform: translateY(1px);
}

.at-trigger:focus-visible {
  outline:        2px solid #3b82f6;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────
   CHEVRON
───────────────────────────────────────────────────────── */
.at-chevron {
  width:      10px;
  height:     6px;
  flex-shrink: 0;
  transition: transform .2s ease;
}

#at-widget.at-open .at-chevron {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────
   ÉTAT CHARGEMENT
───────────────────────────────────────────────────────── */
#at-widget.at-loading .at-trigger::after {
  content:       '';
  display:       inline-block;
  width:         13px;
  height:        13px;
  flex-shrink:   0;
  border:        2px solid #cbd5e0;
  border-top-color: #64748b;
  border-radius: 50%;
  animation:     at-spin .65s linear infinite;
}

@keyframes at-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────
   DROPDOWN
───────────────────────────────────────────────────────── */
.at-dropdown {
  position:     absolute;
  list-style:   none;
  min-width:    120px; /* 170px; */
  max-height:   340px;
  overflow-y:   auto;

  background:    #ffffff;
  border:        1px solid #e2e8f0;
  border-radius: 12px;
  padding:      15px 5px 5px 5px!important; /*  5px; */
  box-shadow:    0 10px 30px rgba(0, 0, 0, 0.14);

  display: none; /* caché par défaut */

  -webkit-overflow-scrolling: touch; /* défilement fluide iOS */
}

/* Positionnement vertical selon le coin */
.at-pos-bottom_right .at-dropdown,
.at-pos-bottom_left  .at-dropdown {
  bottom: calc(100% + 6px);
}

.at-pos-top_right .at-dropdown,
.at-pos-top_left  .at-dropdown {
  top: calc(100% + 6px);
}

/* Positionnement horizontal selon le coin */
.at-pos-bottom_right .at-dropdown,
.at-pos-top_right    .at-dropdown { right: 0; }

.at-pos-bottom_left  .at-dropdown,
.at-pos-top_left     .at-dropdown { left: 0; }

/* Affiché quand ouvert */
#at-widget.at-open .at-dropdown {
  display: block;
}

/* ─────────────────────────────────────────────────────────
   OPTIONS DE LANGUE
───────────────────────────────────────────────────────── */
.at-option {
  display:     flex;
  align-items: center;
  gap:         9px;
  width:       100%;
  padding:     5px 12px!important; /* 9px 10px;*/

  background:    none;
  border:        none;
  border-radius: 8px;
  cursor:        pointer;

  color:       #374151;
  font-size:   10px; /* 14px; */
  font-weight: 400;
  text-align:  left;

  transition: background .12s ease;
}

.at-option:hover {
  background: #f8fafc;
}

.at-option:focus-visible {
  outline:        2px solid #3b82f6;
  outline-offset: -2px;
}

.at-option.at-active {
  font-weight: 600;
  color:       #1d4ed8;
  background:  #eff6ff;
}

/* ─────────────────────────────────────────────────────────
   DRAPEAUX (images PNG via flagcdn.com)
   Remplacement des emojis Unicode qui ne s'affichent pas sur Windows/Chrome.
───────────────────────────────────────────────────────── */

/* Image drapeau dans le bouton principal et dans les options */
.at-flag-img {
  display:     inline-block;
  flex-shrink: 0;
  width:       16px; /* 20px; */
  height:      11px; /* 15px; */
  object-fit:  cover;
  border-radius: 2px;
  /* Légère ombre pour détacher les drapeaux blancs du fond blanc */
  box-shadow:  0 0 0 1px rgba(0, 0, 0, 0.08);
  /* Evite le flash de redimensionnement pendant le chargement */
  vertical-align: middle;
}

/* Fallback globe emoji (langues sans code pays dans le mapping) */
.at-flag-fallback {
  font-size:   18px;
  line-height: 1;
  flex-shrink: 0;
}

.at-name {
  flex: 1;
}

.at-check {
  margin-left: auto;
  color:       #1d4ed8;
  font-size:   13px;
}

/* ─────────────────────────────────────────────────────────
   SCROLLBAR SOIGNÉE (WebKit)
───────────────────────────────────────────────────────── */
.at-dropdown::-webkit-scrollbar {
  width: 4px;
}
.at-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.at-dropdown::-webkit-scrollbar-thumb {
  background:    #cbd5e0;
  border-radius: 2px;
}
.at-dropdown::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ─────────────────────────────────────────────────────────
   SUPPORT MODE SOMBRE (prefers-color-scheme)
───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .at-trigger {
    background:   #1e293b;
    color:        #f1f5f9;
    border-color: #334155;
    box-shadow:   0 2px 10px rgba(0, 0, 0, 0.4);
  }
  .at-trigger:hover {
    border-color: #475569;
    box-shadow:   0 4px 16px rgba(0, 0, 0, 0.5);
  }
  .at-dropdown {
    background:   #1e293b;
    border-color: #334155;
    box-shadow:   0 10px 30px rgba(0, 0, 0, 0.5);
  }
  .at-option {
    color: #e2e8f0;
  }
  .at-option:hover {
    background: #334155;
  }
  .at-option.at-active {
    color:      #60a5fa;
    background: #1e3a5f;
  }
  .at-check {
    color: #60a5fa;
  }
}

/* ─────────────────────────────────────────────────────────
   SUPPORT RTL
───────────────────────────────────────────────────────── */
[dir="rtl"] .at-check {
  margin-left:  0;
  margin-right: auto;
}