.view-password{
  cursor: pointer;
  pointer-events: auto;
  top: 45px;
  right: 3px ;
}
#section-body{
  padding-top:0;
  padding-bottom:0;
}


/* ── Reset léger ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Layout principal : deux colonnes côte à côte ── */
.fxt-template-layout33 {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: #eef2f7;
  font-family: var(--font);
}

.fxt-content-wrap {
  display: flex;
  width: 100%;
 max-width: calc(100% - 20px);
min-height: 90vh;
  margin: auto;
 
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(15, 39, 68, 0.13);
}

/* ── Colonne gauche : image/branding (fxt-heading-content) ── */
.fxt-heading-content {
  flex: 1;
  position: relative;
  background: #0f2744;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  min-width: 0;
}

/* Image de fond injectée via le style inline du twig */
.fxt-template-layout33 .fxt-heading-content:before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  border-radius: 0;
}

/* Overlay dégradé sombre pour lisibilité */
.fxt-heading-content::after {
  content: '';
  position: absolute;
  inset: 0;
  
  pointer-events: none;
}

/* Contenu texte positionné au-dessus de l'overlay */
.fxt-heading-content > * {
  position: relative;
  z-index: 1;
}

/* Titre/accroche dans la colonne gauche (optionnel — si ArticlesElement injecte du HTML) */
.fxt-heading-content h3,
.fxt-heading-content p {
  color: #c8d9ec;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* Badge B2B en bas de la colonne gauche */
.fxt-heading-content::before {
  /* l'image est déjà gérée par le style inline twig */
}

/* Encart features B2B — visible si la colonne gauche n'est pas vide */
.fxt-heading-content .fxt-b2b-features {
  margin-top: auto;
}

/* ── Colonne droite : formulaire (fxt-form-content) ── */
.fxt-form-content {
  flex: 1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  min-width: 0;
}

/* .fxt-main-form {
  width: 100%;
padding:20px
} */

.fxt-inner-wrap {
  width: 100%;
}

/* ── Logo ── */
.fxt-logo {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.fxt-logo img {
  height: 50px;
  width: auto;
  display: block;
}

/* ── Badge B2B au-dessus du titre ── */
.fxt-page-title::before {
  content: "ESPACE PARTENAIRES B2B";
  display: block;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-site-1);
 
  border: 1px solid var(--color-site-1);
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 0.6rem;
}

/* ── Titre page ── */
.fxt-page-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f2744;
  margin: 0 0 1.75rem;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Groupes de champs ── */
.form-group {
  margin-bottom: 1rem;
  position: relative;
}

.form-group.mb-3 {
  margin-bottom: 0.75rem;
}

/* ── Labels ── */
.fxt-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #4e6a85;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
}

/* ── Inputs ── */
.form-control {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 12px;
  font-size: 14px;
  color: #0f2744;
  background: #f5f8fb;
  border: 1px solid #c4d2e0;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
}

.form-control:focus {
  border-color: 1px solid var(--border-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.13);
}

.form-control::placeholder {
  color: #a8bdd0;
  font-size: 13px;
}

/* ── Icône œil (glyphicon Bootstrap) ── */
.view-password {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 10px; /* compense le label au-dessus */
  cursor: pointer;
  color: var(--text-color);
  font-size: 15px;
  transition: color 0.15s;
}

.view-password:hover {
  color: #378add;
}

/* ── Lien mot de passe oublié ── */
.fxt-switcher-text {
  font-size: 14px;
  color: var(--color-site-2);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.fxt-switcher-text:hover {
  color: #1a5fa0;
  text-decoration: underline;
}

/* ── Bouton de connexion ── */
.fxt-btn-fill {
  width: 100%;
  height: 44px;
  text-transform: uppercase;
  background: var(--color-site-2);
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius); /* Utilisation de votre variable */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s;
}

/* Option 1 : Assombrissement automatique (Recommandé) */
.fxt-btn-fill:hover {
  background: color-mix(in srgb, var(--color-site-2), black 15%);
}

/* Option 2 : Si vous préférez une couleur différente de votre palette */
/* .fxt-btn-fill:hover {
  background: var(--color-site-3); 
} */

.fxt-btn-fill:active {
  transform: scale(0.98);
}

/* ── Lien S'inscrire ── */
.fxt-switcher-description {
  font-size: 13px;
  color: #7a94ad;
  text-align: center;
  margin-top: 0.5rem;
}

/* ── Bloc contact (#or) ── */
#or {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e4ecf3;
  text-align: center;
}

#or p {
  font-size: 12px;
  color: var(--text-color);
  line-height: 1.9;
  margin: 0;
}

/* ── Animations (compatibilité avec les classes JS existantes) ── */
.fxt-opacity { opacity: 1; }
.fxt-transition-delay-13 { transition-delay: 0.13s; }
.fxt-transition-delay-10 { transition-delay: 0.10s; }
.fxt-transformX-R-50 { transform: none; }

/* ── Responsive : mobile ── */
@media (max-width: 680px) {
  .fxt-content-wrap {
    flex-direction: column;
    border-radius: 0;
    min-height: 100vh;
  }

  .fxt-heading-content {
    min-height: 140px;
    padding: 1.5rem;
    flex: 0 0 140px;
  }

  .fxt-form-content {
    padding: 2rem 1.25rem;
  }
}

.fxt-form-content .form-control-feedback {
  line-height: auto;
}

.a-layout {
    color: var(--color-site-3); /* A subtle red for "cancel/logout" */
    text-decoration: none;
    margin:10px auto;
    font-size: 14px;
    font-weight: 900;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}