/* HEADER */

.blocuser .elementor-nav a,
.blocuser .elementor-nav a:hover,
.blocuser .elementor-nav a span {
  flex-direction: column;
  padding: 0;
}
.blocuser a svg {
  width: 2em;
  height: 2em;
}

#monpanier .elementor-cart__toggle a {
  flex-direction: column;
}

#monpanier .elementor-button-icon .elementor-screen-only {
  position: static !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  border: none !important;
  font-size: 16px;
  display: block;
}

#monpanier .elementor-button-icon .elementor-screen-only:before {
  content: "Mon ";
  font-weight: bold;
}

#monpanier .elementor-button-icon[data-counter]::before {
  right: 1em !important;
}

#franco .elementor-widget-container::before {
  content: "FRANCO";
  font-size: 12px;
  color: #000;
}

#franco .elementor-cart__toggle::before {
  content: "300 €";
  font-weight: bold;
  font-size: 12px;
  color: #000;
}

#franco .elementor-cart__toggle { display: inline; }
#franco .elementor-button { display: block; }


/* MINIATURE */

.produit-compact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.liste-produits-compact .produit-compact:not(:first-child) .produit-titre-col { display: none; }

.produit-titre-col {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.produit-compact .qty-wrapper { width: 30%; text-align: center; }
.produit-compact .product-reference { width: 30%; text-align: center; }
.produit-compact .product-value-feature { width: 20%; text-align: center; }
.produit-compact .product-price-ht { width: 20%; text-align: center; }

.product-value-feature { text-align: center; }

.qty-wrapper .input-group.quantity-selector {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qty-wrapper .btn.btn-touchspin {
  border: 2px solid #ccc;
  width: 35px;
  height: 35px;
  color: #000;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  display: flex;
  justify-content: center;
}

body .qty-wrapper .js-cart-line-product-quantity {
  padding: 0;
  max-height: 30px;
  border: 2px solid #eee;
  text-align: center;
}

/* PANIER */

body .elementor-cart__products .elementor-cart__product-image { display: none; }

#payment-confirmation {
  text-align: center;
}





/* Custom CSS for the add on on LOG IN PAGES  */



/*--- SECTION POUR TITRE EN HAUT  ---*/

.custom-login-title {
  text-align: center;
  margin-bottom: 20px;
}

.custom-login-title h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.custom-login-title h4 {
  font-size: 22px;
  color: #666;
}


/* Set the full background of the login page to white */
html,
body,
.authentication-page,
.authentication-page .main-content {
  background-color: #ffffff !important;
}

.authentication-page .main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f6f6f6;
  padding: 30px;
}

/* Remove card/box styling around login */
.login-form {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
}


/* Optional: fine-tune the width */
.login-form form {
  width: 100%;
  max-width: 400px;
}

/* Optional: center the form vertically */
.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  padding: 30px;
}


/*--- SECTION BOUTON CONTACTER NOUS EN BAS ---*/

.contact-button-container {
  text-align: center;
  margin-top: 15px;
}

.contact-us-button {
  width: 100%;
  max-width: 600px;
  padding: 12px 24px;
  font-size: 14px;
  background-color: #000000;  /* ✅ Black background */
  color: #cceaff;           /* ✅ White text */
  border: none;
  border-radius: 12px;        /* ✅ Rounded corners */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ✅ Hover: lighter grey background, darker text */
.contact-us-button:hover {
  background-color: #e0e0e0;
  color: #222222;
}

@media screen and (max-width: 768px) {
  .contact-us-button {
    max-width: 90%;         /* Shrinks button to fit smaller screens */
    font-size: 13px;        /* Slightly smaller text */
    padding: 10px 16px;     /* Less padding to fit content */
    word-wrap: break-word;  /* Allow text to wrap if needed */
    white-space: normal;    /* Allow multi-line if text is long */
  }
}

@media screen and (max-width: 480px) {
  .contact-us-button {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/*--- SECTION BOUTON CONNEXION  ---*/

#submit-login {
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 14px;
  width: auto;                /* Let content define the width */
  max-width: none;            /* Remove max width */
  margin: 10px 0 0 auto;      /* Push to the right */
  display: block;
  transition: all 0.3s ease;
}

/* Hover effect */
#submit-login:hover {
  background-color: #e0e0e0;
  color: #222222;
}


/*--- SECTION DU LOGO A GAUCHE ---*/

.logo-container {
  text-align: center;
  margin-top: 20px;
}

.login-logo {
  width: auto;
  max-width: 300px;    /* or smaller if needed */
  max-height: 260px;    /* limits vertical height */
  display: block;
  margin: 10px auto 0;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 850px) {
  .login-logo {
    max-width: 70%;
    max-height: 160px;
  }

  .login-split-left {
    padding: 20px; /* reduce padding if needed */
  }
}

/*---- SECTION POUR Une question / Créer un compte / Mot de passe oublié -----*/
.authentication-page .no-account {
  text-align: center;
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.authentication-page .no-account a {
  font-size: 18px;
  color: #555555;
}



/* === MESSAGE DERREUR SECTION  === */

.login-alert-container {
  width: 100%;
  padding: 20px 15px 0;
  display: flex;
  justify-content: center;
}

.login-alert-container .alert.alert-danger {
  max-width: 600px;
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  padding: 12px 20px;
}


/*--- SECTION CONCERNANT LES FIELD DE EMAIL ET PASSWORD ---*/

.authentication-page input.form-control {
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 12px;
  padding: 10px 12px;
  color: #000000;
  font-size: 14px;
  width: 100%;
  display: block;
}

.authentication-page .login-form {
  display: flex;
  justify-content: center;
  width: 100%;
}

.authentication-page .login-form form {
  max-width: 600px;
  width: 100%;
}

.authentication-page input.form-control:focus {
  border-color: #000000;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  outline: none;
}

/* Hide the "Afficher" button */
.authentication-page .input-group .input-group-btn,
.authentication-page [data-action="show-password"] {
  display: none !important;
}

/* Restore full rounding by breaking input-group layout */
.authentication-page .input-group {
  display: block !important;
}

.authentication-page .input-group .form-control {
  border-radius: 12px !important;
}

/* Force labels to display on top of inputs */
.authentication-page .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Stack labels above inputs on all screen sizes */
.authentication-page .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Make sure labels are full width and left-aligned */
.authentication-page .form-control-label {
  width: 100% !important;
  text-align: left !important;
  font-weight: 600; /* optional: make labels bolder */
  margin-bottom: 6px; /* space below label */
}

/* Override PrestaShop column grid forcing side-by-side layout */
.authentication-page .form-group > .col-md-3,
.authentication-page .form-group > .col-md-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
}

/* Flatten the layout inside form groups to stop side-by-side behavior */
.authentication-page .form-group.row {
  display: flex;
  flex-direction: column !important;
  align-items: stretch !important;
  margin: 0;
}

/* Force inner column divs to take full width */
.authentication-page .form-group.row > [class^="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
  padding: 0 !important;
}



/* === SPLIT LAYOUT SEPARATION DES SECTION === */
.login-split-wrapper {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100%;
  background-color: #ffffff;
}

.login-split-left {
  width: 40%;
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.login-split-right {
  width: 60%;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  align-items: stretch;
}
/* Optional: Add vertical separator */
.login-split-left {
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
}

/* Big centered logo on left */
.login-logo-large {
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

/* Mobile fallback */
@media screen and (max-width: 768px) {
  .login-split-wrapper {
    flex-direction: column;
  }

  .login-split-left,
  .login-split-right {
    width: 100%;
    border: none;
  }

  .login-logo-large {
    max-width: 180px;
    margin-bottom: 20px;
  }
}