/* Pages "Connexion" / "Créer un compte" - styles spécifiques
   (le socle commun .mj-page vient de modules/mj_pagestyle/views/css/mj-pages.css,
   chargé directement par <link> dans customer/authentication.tpl et
   customer/registration.tpl : ces pages n'ont pas de contrôleur/module
   custom, donc pas de registerStylesheet).

   Les formulaires (login-form.tpl, customer-form.tpl) passent par le
   moteur de rendu générique de PrestaShop (_partials/form-fields.tpl,
   partagé par TOUTES les pages du site : adresses, checkout...). On ne
   touche pas ce fichier partagé : on restyle juste sa sortie Bootstrap
   (.form-group.row / .col-md-*) via CSS, strictement scopé à .mj-auth. */

/* .mj-page section a un padding-top de 3.2rem par défaut (socle partagé
   mj-pages.css) ; .login-form a aussi un margin-top de 15px côté thème
   natif (theme.css) : on remet les deux à 0 spécifiquement ici. */
.mj-auth #connexion-form { padding-top: 0; }
.mj-auth .login-form { margin-top: 0; padding: 0; }

.mj-auth .auth-grid {
  display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem;
  max-width: 34rem; margin: 0 auto;
  background: transparent;
}

.mj-auth .auth-side {
  background: #fff; border-radius: 1.1rem; padding: 1.5rem 1.8rem;
  box-shadow: 0 20px 45px -28px rgba(19, 61, 31, .3), 0 0 0 1px rgba(19, 61, 31, .06);
  text-align: center;
}
.mj-auth .auth-side h3 {
  font-size: 1.05rem; margin: 0 0 .5rem; color: var(--mj-green-fonce); font-weight: 800;
}
.mj-auth .auth-side p {
  color: #54604f; line-height: 1.55; font-size: .92rem; margin: 0 0 1.1rem;
}

.mj-auth .auth-main {
  background: transparent; padding: 0 1.4rem;
}

/* ---------- Champs génériques (form-fields.tpl, Bootstrap col-md-*) ---------- */
.mj-auth .form-group.row { display: block; margin: 0 0 1.1rem; }
.mj-auth .form-group.row .col-md-3,
.mj-auth .form-group.row .col-md-6 {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100%;
  padding-left: 0; padding-right: 0;
}
.mj-auth .form-control-label {
  display: block; font-weight: 700; color: var(--mj-green-fonce); font-size: .9rem;
  margin-bottom: .4rem;
}
.mj-auth .form-control-label.required::after { content: " *"; color: var(--mj-orange-mj); }
.mj-auth .form-control,
.mj-auth input[type="text"],
.mj-auth input[type="email"],
.mj-auth input[type="password"],
.mj-auth input[type="date"],
.mj-auth select.form-control {
  border: 1.5px solid rgba(19, 61, 31, .16); border-radius: .65rem;
  padding: .7rem .9rem; font: inherit; font-size: .92rem; color: var(--mj-ink);
  background: #fdfdfb; width: 100%; transition: border-color .2s ease; height: auto;
}
.mj-auth .form-control:focus,
.mj-auth input:focus,
.mj-auth select:focus {
  outline: none; border-color: var(--mj-green-mj); box-shadow: none;
}
.mj-auth .form-control-comment {
  color: #8a938a; font-size: .8rem; margin-top: .3rem;
}

/* Mot de passe (bouton afficher/masquer) : la même balise <button> change
   simplement le type de l'input voisin (password <-> text, via le JS natif
   du thème) — on ne touche à rien côté logique. Repris sur le même
   principe que le bouton "S'abonner" de la newsletter (footer) : bouton
   en position absolue superposé sur le champ, plutôt qu'à côté en flex.
   Icône œil / œil barré à la place du texte "Montrer"/"Cacher" — la
   classe .mj-pw-visible est ajoutée par un petit script propre à ces
   pages (voir fin de authentication.tpl/registration.tpl), en plus du
   :has() ci-dessous : les deux mécanismes donnent le même résultat. */
/* !important nécessaire : le thème a des règles plus spécifiques que
   .mj-auth .input-group-btn .btn sur ce bouton précis —
   .input-group .input-group-btn > .btn[data-action="show-password"]
   (4 sélecteurs de classe, remet "background" en gris et annule l'image)
   et #wrapper .btn (sélecteur d'ID, encore plus fort). */
.mj-auth .input-group { position: relative; }
.mj-auth .input-group .form-control { padding-right: 3.4rem !important; }
.mj-auth .input-group-btn { display: contents; }
.mj-auth .input-group-btn .btn {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 2.9rem !important; padding: 0 !important;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
  border: none !important;
  border-radius: 0 .65rem .65rem 0 !important;
  background-color: var(--mj-green-mj) !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 1.2rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") !important;
  cursor: pointer; transition: background-color .2s ease;
}
/* #wrapper .btn:hover et button:hover (thème) appliquent tous deux un
   transform:translateY(...) au survol — annulé ici. */
.mj-auth .input-group-btn .btn:hover {
  background-color: #87a617 !important; transform: none !important;
}
.mj-auth .input-group:has(input.js-visible-password[type="text"]) .input-group-btn .btn,
.mj-auth .input-group-btn .btn.mj-pw-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.7 10.7 0 0 1 12 5c6.4 0 10 7 10 7a13.4 13.4 0 0 1-3 3.9M6.2 6.2C3.7 8 2 12 2 12s3.6 7 10 7a9.9 9.9 0 0 0 3.9-.8'/%3E%3Cpath d='M9.9 10a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E") !important;
}

/* Case à cocher / radio (custom-checkbox, custom-radio) : le label
   contient du texte brut avec un <br> (ex. "Recevoir notre
   newsletter<br><em>...</em>") — un display:flex sur le label mettait
   ce texte et sa description sur la même ligne (le <br> est ignoré en
   layout flex). On revient à l'affichage naturel du thème (icône en
   inline-block, texte qui suit en flux normal, <br> respecté). */
.mj-auth .custom-checkbox label,
.mj-auth .radio-inline {
  font-size: .88rem; color: #3c463d; line-height: 1.6; font-weight: 400; cursor: pointer;
}
.mj-auth .custom-checkbox em { color: #6b756a; font-style: normal; font-size: .84rem; }
.mj-auth .custom-checkbox a { color: var(--mj-orange-mj); font-weight: 700; }

/* Erreurs de champ / de formulaire */
.mj-auth .help-block { margin-top: .4rem; }
.mj-auth .help-block ul { list-style: none; margin: 0; padding: 0; }
.mj-auth .alert-danger {
  display: block; background: #fbeaea; color: #9c2b24;
  border-radius: .6rem; padding: .6rem .8rem; font-size: .85rem; margin: 0 0 .5rem;
}

/* Notifications pleine largeur (pages password-*.tpl : $errors/$successes
   rendus à la main, hors moteur générique de champs). */
.mj-auth .mj-notif {
  border-radius: .8rem; padding: 1rem 1.2rem; margin: 0 0 1.4rem; font-size: .92rem;
}
.mj-auth .mj-notif ul { margin: 0; padding-left: 1.1rem; }
.mj-auth .mj-notif-success { background: #eef6ec; color: #1e5b2e; }
.mj-auth .mj-notif-error { background: #fbeaea; color: #9c2b24; }
.mj-auth .password-new-email {
  color: #54604f; font-size: .9rem; margin: 0 0 1.4rem;
}

/* ---------- Liens / actions ---------- */
.mj-auth .forgot-password { margin: -.4rem 0 1.3rem; text-align: right; }
.mj-auth .forgot-password a,
.mj-auth .no-account a,
.mj-auth .register-form > p a {
  color: var(--mj-orange-mj); font-weight: 700; text-decoration: none; font-size: .88rem;
}
.mj-auth .forgot-password a:hover,
.mj-auth .no-account a:hover,
.mj-auth .register-form > p a:hover { text-decoration: underline; }

.mj-auth .no-account { margin-top: 1.4rem; text-align: center; }
.mj-auth .register-form > p { margin: 0 0 1.6rem; font-size: .9rem; color: #54604f; }

.mj-auth .form-footer { margin-top: 1.5rem; }
.mj-auth .form-footer .btn,
.mj-auth .form-footer button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: .85rem 1.7rem; border-radius: .8rem; border: none;
  background: var(--mj-orange-mj); color: #fff; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.mj-auth .form-footer .btn:hover,
.mj-auth .form-footer button[type="submit"]:hover {
  background: #d75f05; transform: translateY(-2px); color: #fff;
}
.mj-auth .register-form .form-footer { display: flex; justify-content: flex-end; }

.mj-auth hr { border: none; border-top: 1px solid rgba(19, 61, 31, .1); margin: 1.6rem 0; }