/**
 * Parcours « mot de passe oublie » : les trois pages du controleur password,
 * et l'alignement du widget reCAPTCHA dans la modale de l'en-tete.
 *
 * Meme raison d'etre que auth-form.css et checkout-back.css : le fichier vit
 * dans le module parce que le theme ne se met a jour que par un reimport
 * complet, indisponible sur la preprod et la production (back-office
 * uniquement). Un fichier au nom neuf a de surcroit une URL neuve, servie avec
 * ?version=N — il echappe donc au cache long applique aux feuilles du theme,
 * qui elles partent sans cache-busting.
 *
 * ── 1. Les pages ────────────────────────────────────────────────────────────
 * Le theme n'avait aucun gabarit pour customer/password-email, password-new et
 * password-infos : ils tombaient sur ceux de `classic`, ecrits pour Bootstrap 4
 * alors que theme.yml declare `use_parent_assets: false`. Aucune des classes
 * utilisees la-bas (form-group, col-md-*, hidden-xs-down, btn-primary) n'existe
 * dans la boutique : le formulaire sortait colle au bord gauche, les DEUX
 * boutons de soumission s'affichaient l'un a cote de l'autre, et le retour a la
 * connexion s'ouvrait sur un carre vide (icone `material-icons`, police jamais
 * chargee).
 *
 * Les trois gabarits sont desormais ecrits par le theme (deployes par
 * deployThemePatch) et reprennent la charpente de la page Identification. Il ne
 * reste ici que ce qui leur est propre : la largeur de colonne, le pave
 * d'introduction, les deux listes d'alerte et le lien de retour.
 *
 * ── 2. Le widget reCAPTCHA de la modale ─────────────────────────────────────
 * `.flaash-forgot-form__recaptcha` n'avait aucune regle. La ligne du champ
 * (.flaash-forgot-form__row) est une grille 30% / 70% — libelle a gauche, champ
 * a droite — mais le conteneur du widget est un bloc a part, place APRES cette
 * grille : il se calait donc au bord gauche du corps de la modale, decale de
 * 30% vers la gauche par rapport au champ « Identifiant » et au bouton
 * « Envoyer » (qui, lui, portait deja `padding-left: 30%`). Le widget Google
 * fait 302px de large, quoi qu'on lui demande : on aligne son conteneur, pas sa
 * taille.
 */

/* ── Pages du parcours ─────────────────────────────────────────────────────── */

body#password .pwd-panel {
  max-width: 440px;
}

body#password .pwd-intro {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #4a4a4a;
}

body#password .pwd-form {
  margin: 0;
}

body#password .pwd-policy {
  margin-top: 2px;
}

/**
 * Les deux listes gardent les noms de classe de `classic` : ils sont le contrat
 * entre ces pages et la modale de l'en-tete, qui poste en AJAX sur la meme URL
 * puis relit la reponse avec `.ps-alert-success` / `.ps-alert-error li`
 * (assets/js/ui.js, sendResetRequest). Les renommer casserait l'affichage du
 * message dans la modale, sans erreur visible.
 */
body#password .ps-alert-error,
body#password .ps-alert-success {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

body#password .ps-alert-error .item,
body#password .ps-alert-success .item {
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.45;
}

body#password .ps-alert-error .item + .item,
body#password .ps-alert-success .item + .item {
  margin-top: 8px;
}

body#password .ps-alert-error .item {
  border-color: #f2c4c4;
  background: #fdecec;
  color: #b02121;
}

body#password .ps-alert-success .item {
  border-color: #bfe3bf;
  background: #eaf7ea;
  color: #1f7a1f;
}

/**
 * Widget reCAPTCHA du formulaire de la page. Meme convention que celui de la
 * page Identification (auth-form.css) et celui de la modale plus bas : 304px
 * est la largeur incompressible de l'iframe Google, `max-width: 100%` borne le
 * conteneur sans jamais elargir la colonne.
 *
 * `hidden` reste pose par le gabarit tant que ui.js n'a pas rendu le widget :
 * sans module ni cles, rien ne doit apparaitre. On ne surcharge donc pas
 * `display` ici — le reset de l'attribut est le fait du JavaScript.
 */
body#password .pwd-captcha {
  width: 304px;
  max-width: 100%;
  margin-top: 4px;
  overflow-x: auto;
}

/* Message injecte par ui.js quand la case n'est pas cochee (blocage
   d'ergonomie ; la validation qui fait foi est celle de l'override serveur). */
body#password .pwd-captcha-error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #b02121;
}

body#password .pwd-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 12px;
  color: #282828;
  text-decoration: underline;
}

body#password .pwd-back__ico {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

body#password .pwd-back__ico svg {
  width: 100%;
  height: 100%;
}

/* ── Widget reCAPTCHA de la modale « J'ai oublie mon mot de passe » ────────── */

.flaash-forgot-form__recaptcha {
  width: 304px;
  max-width: 100%;
  margin-top: 16px;
  margin-left: 30%;
}

/**
 * Sous 768px la grille de la modale passe a une seule colonne
 * (live-overrides.css) : le retrait de 30% n'a plus lieu d'etre, et le widget
 * s'aligne sur le champ comme tout le reste. Meme convention que le widget de
 * la page Identification (auth-form.css) : 304px est la largeur incompressible
 * de l'iframe Google, `max-width: 100%` borne le conteneur sans jamais elargir
 * la modale.
 */
@media (max-width: 767px) {
  .flaash-forgot-form__recaptcha {
    margin-left: 0;
    overflow-x: auto;
  }
}