/* ==========================================
   PAGES AUTH (LOGIN + INSCRIPTION) - FULLSCREEN SPLIT SCREEN
   ==========================================

   Layout Fnac-style : 50% Image / 50% Form
   FULLWIDTH + FULLHEIGHT

   TABLE OF CONTENTS:
   1. RESET COMPLET theme.css (Wrappers PrestaShop)
   2. Layout Split Screen 50/50
   3. Partie Gauche - Visuel + Logo
   4. Partie Droite - Form + Bouton Retour
   5. Titre Section
   6. Formulaire Styles
   7. Séparateur OU
   8. Lien Création Compte
   9. Responsive Mobile (< 768px)
   10. Responsive Tablette (768px-1023px)
   11. Page Inscription - Styles spécifiques

   ========================================== */

/* ==========================================
   1. RESET COMPLET theme.css
   ========================================== */

/* Body - Login: no scroll / Registration: scroll autorisé */
body.authentication,
body.page-authentication {
  overflow: hidden !important;
  height: 100vh !important;
  margin: 0 !important;
  background: white !important;
}

body.registration,
body.page-registration {
  overflow: hidden !important;
  height: 100vh !important;
  margin: 0 !important;
  background: white !important;
}

/* Wrapper - Padding 0 */
body.authentication #wrapper,
body.page-authentication #wrapper,
body.registration #wrapper,
body.page-registration #wrapper {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  background: white !important;
}

/* Container - Fullwidth */
body.authentication #wrapper .container,
body.page-authentication #wrapper .container,
body.registration #wrapper .container,
body.page-registration #wrapper .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Container tous breakpoints - Sécurité */
@media (min-width: 1280px) {
  body.authentication #wrapper .container,
  body.page-authentication #wrapper .container,
  body.registration #wrapper .container,
  body.page-registration #wrapper .container {
    max-width: 100% !important;
  }
}

@media (min-width: 992px) {
  body.authentication #wrapper .container,
  body.page-authentication #wrapper .container,
  body.registration #wrapper .container,
  body.page-registration #wrapper .container {
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
  body.authentication #wrapper .container,
  body.page-authentication #wrapper .container,
  body.registration #wrapper .container,
  body.page-registration #wrapper .container {
    max-width: 100% !important;
  }
}

/* Row - Pas de marges */
body.authentication #wrapper .container > .row,
body.page-authentication #wrapper .container > .row,
body.registration #wrapper .container > .row,
body.page-registration #wrapper .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Colonnes - Pas de padding Bootstrap */
body.authentication #content-wrapper,
body.page-authentication #content-wrapper,
body.registration #content-wrapper,
body.page-registration #content-wrapper,
body.authentication .col-xs-12,
body.page-authentication .col-xs-12,
body.registration .col-xs-12,
body.page-registration .col-xs-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Section main - Pas de padding */
body.authentication #main,
body.page-authentication #main,
body.registration #main,
body.page-registration #main {
  padding: 0 !important;
  margin: 0 !important;
}

/* Card PrestaShop - Neutraliser */
body.authentication .page-content.card.card-block,
body.page-authentication .page-content.card.card-block,
body.registration .page-content.card.card-block,
body.page-registration .page-content.card.card-block,
body.authentication #content,
body.page-authentication #content,
body.registration #content,
body.page-registration #content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

/* Header - Masquer (si présent) */
body.authentication #header,
body.page-authentication #header,
body.registration #header,
body.page-registration #header {
  display: none !important;
}

/* Footer - Masquer */
body.authentication #footer,
body.page-authentication #footer,
body.registration #footer,
body.page-registration #footer {
  display: none !important;
}

/* Breadcrumb - Masquer */
body.authentication .breadcrumb,
body.page-authentication .breadcrumb,
body.registration .breadcrumb,
body.page-registration .breadcrumb {
  display: none !important;
}

/* ==========================================
   2. LAYOUT SPLIT SCREEN 50/50
   ========================================== */

.mx-auth-split-container {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

/* ==========================================
   3. PARTIE GAUCHE - VISUEL + LOGO
   ========================================== */

/* ------------------------------------------
   3.1 Container Visuel
   ------------------------------------------ */

.mx-auth-visual {
  position: relative;
  height: 100vh;
  background-image: url('../../img/sculpture-maxxilot-left.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* ------------------------------------------
   3.2 Logo en Haut à Gauche
   ------------------------------------------ */

.mx-auth-logo {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  z-index: 3;
  transition: transform var(--transition-fast);
}

.mx-auth-logo img {
  height: 48px;
  width: auto;
  display: block;
}

/* ------------------------------------------
   3.3 Overlay Gradient
   ------------------------------------------ */

.mx-auth-visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 12, 8, 0.42);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-6);
  z-index: 2;
}

/* ------------------------------------------
   3.4 Contenu Texte
   ------------------------------------------ */

.mx-auth-visual-content {
  width: 100%;
  max-width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Titre en haut, sous-titre en bas */
  height: 100%; /* IMPORTANT */
}

.mx-auth-visual-title {
  display: block;
  position: relative;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: white;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  top: 90%;
  transform: translateY(-90%);
  margin-bottom: 0;
}

.mx-auth-visual-title .mx-highlight {
  color: var(--mx-orange);
}

.mx-auth-visual-subtitle {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0;
  margin-top: auto; /* Pousse vers le bas */
}

/* ==========================================
   4. PARTIE DROITE - FORM + BOUTON RETOUR
   ========================================== */

/* ------------------------------------------
   4.1 Wrapper Formulaire
   ------------------------------------------ */

.mx-auth-form-wrapper {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

/* ------------------------------------------
   4.2 Bouton Retour en Haut à Gauche
   ------------------------------------------ */

.mx-auth-back {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mx-gray-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
  z-index: 2;
}

.mx-auth-back:hover {
  color: var(--mx-black);
  transform: translateX(-4px);
  text-decoration: none;
}

.mx-auth-back svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------
   4.3 Container Formulaire
   ------------------------------------------ */

.mx-auth-form-container {
  max-width: 500px;
  width: 100%;
}

/* Plus large pour inscription (plus de champs) */
.mx-auth-form-wrapper--register .mx-auth-form-container {
  max-width: 550px;
}

/* ==========================================
   5. TITRE SECTION
   ========================================== */

.mx-auth-title {
  margin-bottom: var(--space-8);
  text-align: center;
}

.mx-auth-title h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
  margin-bottom: var(--space-2);
}

.mx-auth-subtitle {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================
   6. FORMULAIRE STYLES
   ========================================== */

/* ------------------------------------------
   6.1 Structure Form-Group
   ------------------------------------------ */

.login-form {
  margin-bottom: var(--space-6);
}

/* Override PrestaShop .form-group.row */
body.authentication .login-form .form-group.row,
body.page-authentication .login-form .form-group.row {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: var(--space-4) !important;
}

body.authentication .login-form .form-group.row .col-md-3,
body.authentication .login-form .form-group.row .col-md-6,
body.page-authentication .login-form .form-group.row .col-md-3,
body.page-authentication .login-form .form-group.row .col-md-6 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------
   6.2 Labels
   ------------------------------------------ */

.login-form label,
.login-form .form-control-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-2);
  text-align: left;
}

/* ------------------------------------------
   6.3 Inputs
   ------------------------------------------ */

.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  border: 1px solid var(--mx-gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: white;
}

.login-form input:focus {
  outline: none;
  border-color: var(--mx-blue-500);
}

.login-form input:focus-visible {
  box-shadow: 0 0 0 3px rgba(70, 188, 235, 0.15);
}

/* ------------------------------------------
   6.4 Input Group (Mot de passe)
   ------------------------------------------ */

body.authentication .login-form .input-group,
body.page-authentication .login-form .input-group {
  display: flex !important;
  align-items: stretch;
  width: 100%;
}

body.authentication .login-form .input-group .form-control,
body.page-authentication .login-form .input-group .form-control {
  display: block !important;
  flex: 1;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body.authentication .login-form .input-group-btn,
body.page-authentication .login-form .input-group-btn {
  display: flex !important;
  align-items: center;
  width: 100px;
  flex: 0 0 auto;
}

body.authentication .login-form .input-group-btn button,
body.page-authentication .login-form .input-group-btn button {
  height: 100%;
  width: 100%;
  padding: 0 var(--space-4);
  background: var(--mx-orange-50) !important;
  color: var(--mx-gray-700);
  border: 1px solid var(--mx-gray-300);
  border-left: none;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

body.authentication .login-form .input-group-btn button:hover,
body.page-authentication .login-form .input-group-btn button:hover {
  background: var(--mx-gray-200);
  color: var(--mx-black);
}

/* ------------------------------------------
   6.5 Lien "Mot de passe oublié"
   ------------------------------------------ */

.forgot-password {
  text-align: right;
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
}

.forgot-password a {
  font-size: var(--fs-sm);
  color: var(--mx-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.forgot-password a:hover {
  color: var(--mx-blue);
  text-decoration: underline;
}

/* ------------------------------------------
   6.6 Bouton Submit
   ------------------------------------------ */

body.authentication .login-form button[type="submit"],
body.page-authentication .login-form button[type="submit"] {
  width: 100%;
}

/* ------------------------------------------
   6.7 Messages Erreur/Succès
   ------------------------------------------ */

body.authentication .alert,
body.page-authentication .alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
}

body.authentication .alert-danger,
body.page-authentication .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

body.authentication .alert-success,
body.page-authentication .alert-success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

/* ==========================================
   7. SÉPARATEUR OU
   ========================================== */

.mx-auth-separator {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  text-align: center;
}

.mx-auth-separator::before,
.mx-auth-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mx-gray-300);
}

.mx-auth-separator span {
  font-size: var(--fs-sm);
  color: var(--mx-gray-500);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

/* Hook social login */
.displayCustomerLoginFormAfter {
  margin-bottom: var(--space-6);
}

/* ==========================================
   8. LIEN CRÉATION COMPTE
   ========================================== */

.no-account {
  text-align: center;
  margin-top: var(--space-6);
}

.no-account p {
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  margin: 0;
}

.no-account a {
  color: var(--mx-blue);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.no-account a:hover {
  color: var(--mx-blue);
  text-decoration: underline;
}

/* ==========================================
   9. RESPONSIVE MOBILE (< 768px)
   ========================================== */

@media (max-width: 767px) {

  /* Body LOGIN - Scroll autorisé */
  body.authentication:not(.registration),
  body.page-authentication:not(.page-registration) {
    overflow: visible !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  /* Body REGISTER - Scroll autorisé */
  body.registration,
  body.page-registration {
    overflow: visible !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  /* ------------------------------------------
     9.1 Layout Stack Vertical
     ------------------------------------------ */

  .mx-auth-split-container {
    position: relative !important;
    grid-template-columns: 1fr;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* ------------------------------------------
     9.2 Partie Gauche - Réduite
     ------------------------------------------ */
  
  .mx-auth-visual {
    height: 20vh;
    min-height: 100px;
    order: 1;
  }
  
  .mx-auth-logo {
    top: var(--space-4);
    left: var(--space-4);
    
  }
  
  .mx-auth-logo img {
    height: 28px;
  }
  
  .mx-auth-visual-overlay {
    padding: var(--space-6);
  }
  
  .mx-auth-visual-title {
    font-size: var(--fs-base);
    margin-top: var(--space-3);
  }
  
  .mx-auth-visual-subtitle {
    display: none;
  }
  
  /* ------------------------------------------
     9.3 Partie Droite - Agrandie
     ------------------------------------------ */

  /* LOGIN wrapper - pas de padding bottom excessif */
  .mx-auth-form-wrapper:not(.mx-auth-form-wrapper--register) {
    height: auto !important;
    min-height: auto !important;
    order: 2;
    padding: var(--space-6) var(--space-4);
    overflow-y: visible !important;
  }

  /* REGISTER wrapper - padding bottom pour scroll */
  .mx-auth-form-wrapper--register {
    height: auto !important;
    min-height: auto !important;
    order: 2;
    padding: var(--space-6) var(--space-4);
    padding-bottom: var(--space-16);
    overflow-y: visible !important;
  }

  /* REGISTER - réduire margin-top du titre */
  .mx-auth-form-wrapper--register .mx-auth-title {
    margin-top: var(--space-4);
  }

  .mx-auth-back {
    top: var(--space-4);
    left: var(--space-4);
  }

  .mx-auth-form-container {
    padding-top: var(--space-8);
  }

  .mx-auth-title h1,
  .mx-auth-title h2 {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-1);
  }

  .forgot-password {
    margin-bottom: var(--space-2);
  }

  /* Créer un compte - plus d'espace au-dessus */
  .no-account {
    margin-top: var(--space-6);
  }
}

/* ==========================================
   10. RESPONSIVE TABLETTE (768px-1023px)
   ========================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Body LOGIN - Scroll autorisé sur tablette */
  body.authentication:not(.registration),
  body.page-authentication:not(.page-registration) {
    overflow: visible !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  /* Body REGISTER - Scroll autorisé sur tablette */
  body.registration,
  body.page-registration {
    overflow: visible !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  /* Container - position relative + stack vertical pour scroll */
  .mx-auth-split-container {
    position: relative !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Partie gauche - hauteur réduite */
  .mx-auth-visual {
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
  }

  .mx-auth-visual-subtitle {
    display: none;
  }

  /* LOGIN wrapper - pas de padding excessif */
  .mx-auth-form-wrapper:not(.mx-auth-form-wrapper--register) {
    height: auto !important;
    min-height: auto !important;
    overflow-y: visible !important;
  }

  /* REGISTER wrapper - padding bottom */
  .mx-auth-form-wrapper--register {
    height: auto !important;
    min-height: auto !important;
    overflow-y: visible !important;
    padding-bottom: var(--space-16);
  }

  /* REGISTER - réduire margin-top du titre */
  .mx-auth-form-wrapper--register .mx-auth-title {
    margin-top: var(--space-4);
  }

  /* Titre h1/h2 sur tablette */
  .mx-auth-title h1,
  .mx-auth-title h2 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-1);
  }

  .mx-auth-visual-title {
    font-size: var(--fs-2xl);
  }

  .mx-auth-form-container {
    max-width: 450px;
    margin-top: var(--space-16);
  }

  .mx-auth-logo img {
    height: 42px;
  }

  .forgot-password {
    margin-bottom: var(--space-2);
  }

  /* Créer un compte - plus d'espace au-dessus */
  .no-account {
    margin-top: var(--space-8);
  }
}

/* ==========================================
   11. PAGE INSCRIPTION - Styles spécifiques
   ========================================== */

/* Body registration - PAS de scroll sur body, seulement sur form-wrapper */

/* Variante visuel inscription */
.mx-auth-visual--register {
  background-image: url('../../img/register-maxxilot-left.webp');
}

/* Liste des avantages - centré horizontalement en row */
.mx-auth-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: flex-start;
  gap: var(--space-8);
}

.mx-auth-benefits li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 120px;
}

.mx-auth-benefits li {
  padding: 1rem;
  border-radius: var(--radius-full);
}
.mx-auth-benefits li .mx-icon-wrapper {
  background: var(--mx-orange-500);
  padding: 1rem;
  border-radius: var(--radius-full);
}
.mx-auth-benefits li span {
font-weight: var(--fw-bold);
text-transform: uppercase;
} 

/* Icon wrapper pour bg éventuel */
.mx-auth-benefits .mx-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mx-auth-benefits .mx-icon-wrapper svg,
.mx-auth-benefits .mx-icon-wrapper i {
  color: #fff;
  width: 32px;
  height: 32px;
}

/* Form wrapper inscription - Base (toutes tailles) */
.mx-auth-form-wrapper--register {
  align-items: flex-start;
  padding-bottom: var(--space-16);
}

/* Form wrapper inscription - DESKTOP ONLY : scroll interne */
@media (min-width: 1024px) {
  .mx-auth-form-wrapper--register {
    overflow-y: auto !important;
    height: 100vh !important;
    padding-top: calc(var(--space-12) + 40px);
  }
}

/* Champs formulaire inscription */
.register-form {
  margin-bottom: var(--space-6);
}

/* ----------------------------------------
   Sections du formulaire
   ---------------------------------------- */

/* Réorganisation sections page inscription uniquement */
body#registration .mx-register-fields {
  display: flex;
  flex-direction: column;
}

body#registration .mx-form-section--type { order: 1; }
body#registration .mx-form-section--pro { order: 2; }
body#registration .mx-form-section--credentials { order: 3; }
body#registration .mx-form-section--personal { order: 4; }
body#registration .mx-form-section--preferences { order: 5; }
body#registration .mx-form-section--rgpd { order: 6; }
body#registration .mx-required-notice { order: 7; }

.mx-form-section {
  margin-bottom: 0;
}

/* Pas de margin-bottom sur la dernière section avant le bouton */
.mx-form-section:last-of-type {
  margin-bottom: var(--space-4);
}

.mx-form-section-header {
  margin-bottom: var(--space-4);
}

.mx-form-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--mx-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mx-gray-200);
}

.mx-form-section-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ----------------------------------------
   Toggle Particulier / Professionnel
   ---------------------------------------- */

.mx-account-type-toggle {
  display: flex;
  gap: var(--space-3);
}

.mx-account-type-option {
  flex: 1;
  cursor: pointer;
}

.mx-account-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mx-account-type-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--mx-black);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-black);
  transition: all var(--transition-fast);
}

.mx-account-type-label svg {
  width: 20px;
  height: 20px;
}

.mx-account-type-option--active .mx-account-type-label {
  border-color: var(--mx-black);
  background: var(--mx-black);
  color: white;
}

.mx-account-type-option--active .mx-account-type-label svg {
  color: white;
}

/* Section pro - animation */
.mx-form-section--pro {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Notice champs obligatoires - bas à droite */
.mx-required-notice {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  font-weight: var(--fw-normal);
  text-align: right;
  margin: 0;
}

.mx-asterisk {
  color: #dc3545;
  font-weight: var(--fw-bold);
}

/* Form container - flex column */
.register-form form,
.register-form #customer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Container des champs - flex column */
.register-form .mx-register-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Réduire l'écart pour les checkboxes simples (sans em) */
.register-form .form-group:has(span.custom-checkbox):not(:has(em)) {
  margin-bottom: 0;
}

/* Checkboxes avec em (newsletter, privacy) - spacing spécifique */
.register-form .form-group:has(span.custom-checkbox):has(em) {
  margin-bottom: var(--space-2);
}

/* Override structure form-group PrestaShop */
.register-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: var(--space-4) !important;
}

.register-form .form-group .col-md-3,
.register-form .form-group .col-md-6,
.register-form .form-group .col-md-9 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Labels */
.register-form label,
.register-form .form-control-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-2);
  text-align: left;
}

/* Inputs */
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="text"],
.register-form input[type="tel"],
.register-form input[type="date"],
.register-form select,
.register-form .form-control {
  width: 100% !important;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  border: 1px solid var(--mx-gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: white;
}

.register-form input:focus,
.register-form select:focus {
  outline: none;
}

.register-form input:focus-visible,
.register-form select:focus-visible {
  border-color: var(--mx-blue-500);
  box-shadow: 0 0 0 3px rgba(70, 188, 235, 0.15);
}

/* Select custom arrow */
.register-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 20px;
  padding-right: calc(var(--space-4) + 24px);
}

/* ------------------------------------------
   Radio buttons (civilité) - En ligne
   ------------------------------------------ */

/* Container des radios en row */
.register-form .form-group:has(input[type="radio"]) .col-md-6,
.register-form .form-group:has(.custom-radio) .col-md-6 {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-4);
}

.register-form .custom-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  margin: 0;
}

/* Radios register - utilise design system form-elements.css */

.register-form .custom-radio label {
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  margin: 0;
  cursor: pointer;
}

/* ------------------------------------------
   Checkboxes (CGV, newsletter) - Structure PrestaShop
   Structure: span.custom-checkbox > label > input + span + texte
   ------------------------------------------ */

/* Container du form-group pour checkbox - fullwidth */
.register-form .form-group:has(span.custom-checkbox) {
  display: block !important;
}

.register-form .form-group:has(span.custom-checkbox) .col-md-6,
.register-form .form-group:has(span.custom-checkbox) .js-input-column {
  width: 100% !important;
  max-width: 100% !important;
}



.register-form span.custom-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  height: fit-content !important;
}

/* Masquer la 3e colonne vide (col-md-3 form-control-comment) */
.register-form .form-group > .col-md-3.form-control-comment {
  display: none !important;
}

/* Supprimer le ::after du form-group (clearfix Bootstrap) */
.register-form .form-group.row::after,
.register-form .form-group.row::before {
  display: none !important;
  content: none !important;
}

/* Texte d'aide sous les inputs (span.form-control-comment dans .col-md-6) */
.register-form .col-md-6 .form-control-comment,
.register-form .js-input-column .form-control-comment {
  display: block;
  font-size: var(--fs-xs) !important;
  font-style: normal;
  color: var(--mx-gray-500) !important;
  line-height: 1.4;
  margin-top: var(--space-1);
  margin-bottom: 0;
}

/* Texte italique (em) dans les checkboxes - DANS le flux */
.register-form span.custom-checkbox em {
  display: block !important;
  font-size: var(--fs-xs) !important;
  font-style: italic;
  color: var(--mx-gray-500) !important;
  line-height: 1.4;
  margin-top: var(--space-1);
  position: relative !important;
}

/* Form-group avec em : ajouter du padding pour le contenu */
.register-form .form-group:has(span.custom-checkbox em) {
  padding-bottom: var(--space-2);
}

.register-form span.custom-checkbox label {
  flex: 1 !important;
  display: block !important;
  cursor: pointer;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-normal) !important;
  color: var(--mx-gray-700) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: left !important;
}

.register-form span.custom-checkbox label a {
  color: var(--mx-blue-500);
}

/* Wrapper texte checkbox (asterisk + label) */
.register-form .mx-checkbox-wrapper {
  display: flex;
  height: fit-content;
  gap: 5px;
}

/* Label texte - vertical pour wrapping propre */
.register-form .mx-checkbox-label {
  flex-direction: column;
  align-items: flex-start;
}

/* Input checkbox custom - Visible et stylé avec flexbox */
.register-form span.custom-checkbox input[type="checkbox"],
.register-form .custom-checkbox input[type="checkbox"] {
  position: static !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  margin-top: 2px !important;
  padding: 0 !important;
  cursor: pointer;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: white !important;
  transition: all 0.2s ease;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Checked = carré noir (style moderne, sans checkmark) */
.register-form span.custom-checkbox input[type="checkbox"]:checked,
.register-form .custom-checkbox input[type="checkbox"]:checked {
  background: #000 !important;
  border-color: #000 !important;
}

.register-form span.custom-checkbox input[type="checkbox"]:focus,
.register-form .custom-checkbox input[type="checkbox"]:focus {
  outline: none !important;
}

.register-form span.custom-checkbox input[type="checkbox"]:focus-visible,
.register-form .custom-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mx-blue-500) !important;
  outline-offset: 2px !important;
}

/* Container du texte checkbox - structure simplifiée (plus de material-icons) */
/* IMPORTANT: Override les règles de theme.css qui ciblent input + span */
.register-form span.custom-checkbox .mx-checkbox-text,
.register-form .custom-checkbox .mx-checkbox-text,
.register-form span.custom-checkbox input[type="checkbox"] + span.mx-checkbox-text,
.register-form .custom-checkbox input[type="checkbox"] + span.mx-checkbox-text {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: var(--fs-sm) !important;
  color: var(--mx-gray-700) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ------------------------------------------
   Input Group (Mot de passe avec bouton Afficher)
   ------------------------------------------ */

.register-form .input-group,
.register-form .field-password-policy .input-group {
  display: flex !important;
  align-items: stretch;
  width: 100%;
}

.register-form .input-group .form-control {
  flex: 1;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.register-form .input-group .input-group-btn {
  display: flex !important;
  align-items: center;
  width: 100px;
  flex: 0 0 auto;
}

/* Spécificité haute pour override theme.css .input-group .input-group-btn>.btn */
.register-form .input-group .input-group-btn > button.btn,
.register-form .input-group .input-group-btn > .btn,
.register-form .input-group-btn button {
  height: 100%;
  width: 100%;
  padding: 0 var(--space-4) !important;
  background: var(--mx-orange-50) !important;
  color: var(--mx-gray-700) !important;
  border: 1px solid var(--mx-gray-300) !important;
  border-left: none !important;
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: none !important;
}

/* Password policy indicator */
.register-form .field-password-policy {
  position: relative;
}

.register-form .password-strength-feedback {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
}

/* Form footer */
.register-form .form-footer {
  margin-top: var(--space-6);
}

/* Help text sous les champs */
.register-form .form-control-comment {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  margin-top: var(--space-1);
}

/* Lien "Déjà un compte" */
.already-account {
  text-align: center;
  margin-top: var(--space-4);
}

.already-account p {
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  margin: 0;
}

.already-account a {
  color: var(--mx-blue-500);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.already-account a:hover {
  text-decoration: underline;
}

/* Alertes/erreurs formulaire */
.register-form .alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}

.register-form .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}


/* ------------------------------------------
   11.1 Responsive Mobile Inscription
   ------------------------------------------ */

@media (max-width: 767px) {

  .mx-auth-visual--register {
    height: 15vh;
    min-height: 80px;
  }

  .mx-auth-benefits {
    display: none;
  }

  .mx-auth-form-wrapper--register {
    min-height: 85vh;
    padding: var(--space-6) var(--space-4);
  }

  /* Notice champs obligatoires - centrée sur mobile */
  .register-form .mx-required-notice {
    text-align: center;
    margin: var(--space-2) 0 var(--space-1) 0;
  }

  /* Réduire espacement form-footer mobile */
  .register-form .form-footer {
    margin-top: var(--space-2);
  }

  /* Séparateur OU - réduit */
  .mx-auth-separator {
    margin: var(--space-3) 0;
  }

  /* Lien "Déjà un compte" - réduit */
  .already-account {
    margin-top: var(--space-2);
  }

  /* Dernière section avant bouton - espace réduit */
  .mx-form-section:last-of-type {
    margin-bottom: var(--space-1);
  }

  /* Form-group checkboxes - margin réduit */
  .register-form .form-group {
    margin-bottom: var(--space-2) !important;
  }

  /* Checkbox avec em - padding 0 */
  .register-form .form-group:has(span.custom-checkbox em) {
    padding-bottom: 0;
  }

  /* Dernier checkbox (confidentialité) - margin 0 */
  .register-form .form-group:has(span.custom-checkbox):last-child {
    margin-bottom: 0 !important;
  }

  /* Gap entre sections réduit */
  .register-form form,
  .register-form #customer-form {
    gap: var(--space-2);
  }
}

/* ------------------------------------------
   11.2 Responsive Tablette Inscription
   ------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {

  .mx-auth-form-wrapper--register {
    padding: var(--space-6);
  }

  .mx-form-section {
    margin-bottom: var(--space-4);
  }

  /* Layout titre gauche/bas + benefits droite */
  .mx-auth-visual-content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
  }

  .mx-auth-visual-title {
    align-self: flex-end;
    flex: 1;
    top: 0;
    transform: none;
  }

  .mx-auth-benefits {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: var(--space-1);
    align-self: stretch;
  }

  .mx-auth-benefits li {
    font-size: var(--fs-xs);
    padding: .5rem;
    max-width: fit-content;
    align-items: flex-end;
  }

  .mx-auth-benefits li .mx-icon-wrapper {
    padding: .5rem;
  }
}


/* ==========================================
   12. MOT DE PASSE OUBLIE
   ========================================== */

/* Reset backgrounds transparents */
body#password #main .page-content,
body#password #main .page-footer,
body#password #main .page-header,
body#password #content,
body#password .card,
body#password .card-block {
  background: transparent;
  border: none;
  box-shadow: none;
}

body#password #content {
  padding: 0;
}

/* Label aligné à gauche + required */
body#password label,
body#password .label {
  text-align: left;
}

body#password .mx-label::after {
  content: ' *';
  color: var(--mx-error);
}

/* Container centre */
.mx-password-container {
  max-width: 450px;
  margin: 0 auto;
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-lg);
}

/* Intro text */
.mx-password-intro {
  color: var(--mx-gray-600);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

/* Email affiche */
.mx-password-email {
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-700);
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  background: var(--mx-gray-50);
  border-radius: var(--radius-md);
}

/* Form group */
.mx-password-container .mx-form-group {
  margin-bottom: var(--space-4);
}

.mx-password-container .mx-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
  margin-bottom: var(--space-2);
}

.mx-password-container .mx-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  border: 1px solid var(--mx-gray-300);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mx-password-container .mx-input:focus {
  outline: none;
  border-color: var(--mx-blue-500);
  box-shadow: 0 0 0 3px rgba(70, 188, 235, 0.15);
}

/* Bouton submit */
.mx-password-container .mx-btn-full {
  width: 100%;
  margin-top: var(--space-4);
}

/* Alertes */
.mx-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.mx-alert svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.mx-alert p {
  margin: 0;
  font-size: var(--fs-sm);
}

.mx-alert-error {
  background: var(--mx-error-light);
  border: 1px solid var(--mx-error);
  color: var(--mx-error);
}

.mx-alert-success {
  background: var(--mx-success-light);
  border: 1px solid var(--mx-success);
  color: var(--mx-success);
}

.mx-alert-success p {
  color: var(--mx-success);
}

/* Lien retour */
.mx-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mx-gray-600);
  font-size: var(--fs-sm);
  text-decoration: none;
  margin-top: var(--space-4);
  transition: color 0.2s ease;
}

.mx-back-link:hover {
  color: var(--mx-orange-500);
}

.mx-back-link svg {
  width: 16px;
  height: 16px;
}

/* Page footer centrage */
body#password-recovery .page-footer,
body#password .page-footer {
  text-align: center;
}