/* Loecsen login modal — self-contained, site-wide */
.loecsen-login-modal-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  /* Au-dessus du menu (#dl z 10000/10001) — sinon Connexion depuis Téléchargement = rien */
  z-index: 100050 !important;
  pointer-events: auto !important;
  opacity: 0;
}
.loecsen-login-modal-overlay.is-open {
  display: block !important;
  opacity: 1;
}
.loecsen-login-modal-overlay.is-open.is-closing {
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.18s ease;
}

#DivLogin.loecsen-login-modal {
  display: none;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
  max-height: 80vh !important;
  height: auto !important;
  border-radius: 16px;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  z-index: 100051;
  overflow: hidden;
  overflow-x: hidden;
  background-color: #fff;
  padding: 0;
  pointer-events: auto;
  box-sizing: border-box !important;
  opacity: 0;
}
#DivLogin.loecsen-login-modal.is-open,
#DivLogin.loecsen-login-modal.act {
  display: flex !important;
  flex-direction: column;
  opacity: 1;
}
#DivLogin.loecsen-login-modal.is-open.is-closing,
#DivLogin.loecsen-login-modal.act.is-closing {
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .loecsen-login-modal-overlay,
  #DivLogin.loecsen-login-modal {
    transition: none !important;
  }
}

#DivLogin.loecsen-login-modal .loecsen-login-modal__dialog,
#DivLogin.loecsen-login-modal .infos {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  /* Pas de flex:1 + min-height:0 ici : avec height:auto sur #DivLogin,
     ça écrasait .tabs-content à 0 → popup blanche (ex. depuis onglet DL). */
  flex: 0 1 auto;
  min-height: auto;
  /* Scroll only in .tabs-content so title + tabs never leave the viewport */
  overflow: hidden;
  overflow-x: hidden;
  background: #fff;
}

#DivLogin.loecsen-login-modal .title {
  margin: 0;
  font-size: 26px !important;
  color: var(--newblue, #29a9a4) !important;
  font-weight: 700 !important;
  letter-spacing: normal;
  padding: 10px 20px !important;
  background: #fff;
  background-image: linear-gradient(to right top, #f7eec7, #ffe0ca, #ffd7dd, #f7d5f4, #d1d9ff);
  line-height: 40px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  border-radius: 16px 16px 0 0;
  /* Croix sur emplacement réservé : titre flex — le texte va à la ligne,
     jamais sous la croix. */
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#DivLogin.loecsen-login-modal .title .close,
#DivLogin.loecsen-login-modal .title .close.icon {
  width: 15px !important;
  height: 15px !important;
  fill: var(--newblue, #29a9a4) !important;
  color: var(--newblue, #29a9a4) !important;
  cursor: pointer;
  float: none; /* était inline-end : sans effet sur un item flex */
  margin: 7px 0 !important;
  margin-inline-start: auto !important; /* croix au bout inline (droite en LTR) */
  flex-shrink: 0;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
}
#DivLogin.loecsen-login-modal .title .close:hover {
  fill: #ff6550 !important;
}

#DivLogin.loecsen-login-modal #t_not_co1,
#DivLogin.loecsen-login-modal #t_co1,
#DivLogin.loecsen-login-modal .help-text.notaccount {
  display: none !important;
}

/* Onglets : isolés du reset `* a` / `h3` / `button` des pages compactes (dl, vocab…).
   Trait actif = largeur du libellé (::after), pas 50 % de la modale.
   Barre toujours visible (scroll dans .tabs-content uniquement). */
#DivLogin.loecsen-login-modal .tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #f3f4f6 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
#DivLogin.loecsen-login-modal .tabs h3 {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  float: none !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
#DivLogin.loecsen-login-modal .tabs h3 a,
#DivLogin.loecsen-login-modal .tabs h3 a:link,
#DivLogin.loecsen-login-modal .tabs h3 a:visited {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 14px 8px 12px !important;
  color: #666 !important;
  text-decoration: none !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  float: none !important;
}
#DivLogin.loecsen-login-modal .tabs h3 a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: transparent;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}
#DivLogin.loecsen-login-modal .tabs h3 a.active,
#DivLogin.loecsen-login-modal .tabs h3 a.active:link,
#DivLogin.loecsen-login-modal .tabs h3 a.active:visited {
  color: var(--newblue, #29a9a4) !important;
  font-weight: 700 !important;
  background: transparent !important;
}
#DivLogin.loecsen-login-modal .tabs h3 a.active::after {
  width: min(100%, 9.5em);
  background: var(--newblue, #29a9a4);
}

#DivLogin.loecsen-login-modal .tabs-content {
  padding: 0.5em 1.5em 1.5em;
  flex: 0 1 auto;
  min-height: 12rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
}
#DivLogin.loecsen-login-modal .tabs-content > [id$="tab-content"] {
  display: none !important;
}
#DivLogin.loecsen-login-modal .tabs-content > [id$="tab-content"].active {
  display: block !important;
  background-color: #fff;
}

/* Même colonne que l’onglet Inscription (80 % / max 350px) */
#DivLogin.loecsen-login-modal form.tab,
#DivLogin.loecsen-login-modal .signup-form.tab,
#DivLogin.loecsen-login-modal #login-tab-content {
  width: 80%;
  margin: 10px auto;
  box-sizing: border-box;
  max-width: 350px;
}

#DivLogin.loecsen-login-modal #known-user {
  display: none;
}
#DivLogin.loecsen-login-modal #known-user.is-visible {
  display: block;
}

#DivLogin.loecsen-login-modal .hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: #000;
  text-align: center;
  height: 1.5em;
  opacity: 0.5;
}
#DivLogin.loecsen-login-modal .hr-text:before {
  content: "";
  background: linear-gradient(to right, transparent, #818078, transparent);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
#DivLogin.loecsen-login-modal .hr-text:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  padding: 0 0.5em;
  line-height: 1.5em;
  color: #818078;
  background-color: #fcfcfa;
}

#DivLogin.loecsen-login-modal .auth_google,
#DivLogin.loecsen-login-modal button.auth_google {
  transition: background-color 0.3s, box-shadow 0.3s;
  margin: 0 0 15px !important;
  padding: 12px 16px 12px 42px !important;
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  color: #757575 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  align-self: stretch !important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 12px 11px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box !important;
}

#DivLogin.loecsen-login-modal form .input,
#DivLogin.loecsen-login-modal .form-control {
  box-sizing: border-box !important;
  color: #000;
  font-family: inherit;
  padding: 0.8em 0 10px 0.8em;
  border: 1px solid #cfcfcf;
  outline: 0;
  display: inline-block;
  margin: 0 0 0.8em 0;
  padding-right: 2em;
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
}

#DivLogin.loecsen-login-modal .passwordc {
  position: relative;
}
#DivLogin.loecsen-login-modal .toggle-password {
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
  transform: translateY(-10%) scale(0.8);
}
#DivLogin.loecsen-login-modal .toggle-password svg {
  fill: grey;
}

#DivLogin.loecsen-login-modal form .button,
#DivLogin.loecsen-login-modal #connect {
  border-radius: 15px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box !important;
  display: block;
  padding: 10px;
  background: var(--newblue, #3b82f6);
  border: 0;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  margin: 15px 0;
  font-weight: 700;
  font-size: 16px;
}

#DivLogin.loecsen-login-modal .login-form {
  width: 100%;
  font-size: 14px;
  margin: 0;
  max-width: none;
}

#DivLogin.loecsen-login-modal #legal_link {
  font-size: 14px;
  text-decoration: underline;
  color: var(--newblue, #1e3a5f);
}

#DivLogin.loecsen-login-modal .link {
  text-decoration: underline;
  color: var(--newblue, #1e3a5f);
  cursor: pointer;
}
#DivLogin.loecsen-login-modal .help-text {
  font-size: 16px;
  text-align: inherit;
  margin-top: 0.6em;
  margin-bottom: 15px;
  font-weight: 500;
}
#DivLogin.loecsen-login-modal .info {
  color: var(--grey-1, #888);
  font-size: 15px;
}
#DivLogin.loecsen-login-modal .progress-bar-button {
  margin: 10px auto;
  float: none;
  text-align: center;
  padding: 0 20px;
  border-radius: 5px;
  text-transform: uppercase;
  cursor: pointer;
  width: -webkit-fill-available;
  max-width: 250px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ora, #ff6550);
  color: #fff;
}
#DivLogin.loecsen-login-modal .cos {
  padding: 0 0 10px;
}
#DivLogin.loecsen-login-modal .status:not(:empty) {
  padding: 10px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  color: red;
  background: #ffeeee;
}
#DivLogin.loecsen-login-modal .form_error {
  color: red;
  margin-bottom: 10px;
}

/* Connected / account panels: hide tab bar when shown by app logic */
#DivLogin.loecsen-login-modal.is-connected .tabs,
#DivLogin.loecsen-login-modal.is-connected .tabs-content {
  display: none !important;
}
#DivLogin.loecsen-login-modal.is-connected .infos {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
}
#DivLogin.loecsen-login-modal #account-tab-content,
#DivLogin.loecsen-login-modal #code-tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
}