/**
 * Page Identification : mise en forme des erreurs portees par une case a cocher.
 *
 * Meme raison d'etre que checkout-back.css et home-cta.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 (back-office uniquement). Un fichier au
 * nom neuf a de surcroit une URL neuve — il echappe donc au cache long servi
 * sans cache-busting sur les feuilles du theme.
 *
 * Le bug corrige : `.checkbox-line` est un conteneur flex d'une seule ligne
 * (main.css), et ui.js injecte le message d'erreur DANS ce conteneur
 * (renderRegisterFieldError -> container.appendChild). Le <p> devenait donc un
 * troisieme item de la meme ligne et s'affichait A DROITE du libelle « J'ai lu
 * et j'accepte les conditions generales du site » au lieu de dessous.
 *
 * `flex-wrap: wrap` + une base de 100% sur le message le renvoient sur sa
 * propre ligne, sans toucher a l'alignement case/libelle du cas nominal.
 *
 * La derniere regle traite un second defaut visible sur la meme capture : le
 * libelle passait bien en rouge (live-overrides.css) mais le lien « conditions
 * generales du site » qu'il contient gardait `color: #000`, d'ou un libelle
 * bicolore. La couleur d'erreur est celle deja utilisee par le theme (#b30000).
 */
body#authentication .checkbox-line {
  flex-wrap: wrap;
}

body#authentication .checkbox-line .auth-inline-error {
  flex: 0 0 100%;
  margin-top: 4px;
}

body#authentication .checkbox-line.is-invalid label,
body#authentication .checkbox-line.is-invalid label a {
  color: #b30000;
}

/**
 * Ticket « Mise en forme » : sur la page Identification, le libelle de la case
 * newsletter passait SOUS la case au lieu de commencer a sa droite.
 *
 * C'est un effet de bord du `flex-wrap: wrap` ci-dessus. Un item flex est place
 * sur la ligne courante d'apres sa taille de base — ici la largeur max-content
 * du libelle (« J'accepte de recevoir les infos et recommandations de FLAASH
 * via sa newsletter », ~430 px) — avant tout retrecissement. La colonne du
 * formulaire d'inscription ne fait que 335 px : le libelle ne « tenait » donc
 * pas a cote de la case et basculait sur la ligne suivante, ou il se retrecit
 * ensuite a la largeur du conteneur. Le libelle CGV, lui, occupe deux colonnes
 * (684 px) et ne montrait pas le defaut.
 *
 * `flex: 1 1 0` donne au libelle une base nulle : il reste sur la ligne de la
 * case et son texte se replie a l'interieur de l'espace restant. Le message
 * d'erreur garde sa base de 100% et donc sa propre ligne.
 */
body#authentication .checkbox-line > input[type="checkbox"] {
  flex: 0 0 auto;
}

body#authentication .checkbox-line > label {
  flex: 1 1 0;
  min-width: 0;
}

/**
 * Ticket « Placement du reCAPTCHA » : le widget s'affichait dans la colonne de
 * gauche, entre la case newsletter et la case CGV. La production le place dans
 * la colonne de droite, juste au-dessus du bouton de validation et a la meme
 * largeur.
 *
 * Le conteneur a donc ete deplace dans `.auth-register-actions` (voir
 * templates/customer/_partials/register-form.tpl). Ce bloc etait une ligne flex
 * (`justify-content: flex-end`, live-overrides.css) qui alignait le seul bouton
 * a droite ; il porte maintenant deux enfants et doit les empiler.
 *
 * `align-items: flex-end` garde l'alignement a droite du cas nominal, et la
 * largeur de 304px est celle du widget Google par defaut — la meme que celle
 * deja imposee au bouton (`.register-btn`), d'ou deux blocs exactement alignes
 * comme en production.
 */
body#authentication .auth-register-actions {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
}

body#authentication .auth-register-actions .auth-captcha {
  width: 304px;
  max-width: 100%;
  margin-top: 0;
}

/* Message d'erreur injecte par ui.js juste apres le conteneur (widget non
   coche) : il doit occuper la largeur du bloc et non celle de son texte. */
body#authentication .auth-register-actions .auth-inline-error {
  width: 304px;
  max-width: 100%;
  margin: 0;
  text-align: left;
}

/* Le theme fait passer le bouton en pleine largeur sous 767px : le widget suit,
   dans la limite de sa largeur incompressible de 304px (iframe Google). */
@media (max-width: 767px) {
  body#authentication .auth-register-actions {
    align-items: stretch;
  }

  body#authentication .auth-register-actions .auth-captcha,
  body#authentication .auth-register-actions .auth-inline-error {
    width: 100%;
  }
}