/* PRATINIUM v277 — Authentication téléphone : espacement réel entre bloc formulaire et bloc onglets

   Correction demandée : ajouter un espace horizontal visible et stable entre
   le cadran de gauche (formulaire téléphone) et le bloc de droite
   (onglets E-mail / Téléphone + création de compte), uniquement sur
   l'affichage connexion téléphone desktop.

   Pourquoi v276/v275 pouvaient sembler sans effet : le JS du module téléphone
   réinjecte/repositionne les blocs après le chargement. On force donc le
   layout sur #content et on ajoute aussi une classe JS de sécurité.
*/

@media (min-width: 992px){
  body#authentication.pratinium-auth-phone-mode #content,
  body#authentication.pratinium-auth-phone-mode #content.pratinium-auth-v277-spaced,
  body#authentication.pratinium-auth-phone-mode div#content.page-content.card.card-block{
    display:grid!important;
    grid-template-columns:640px minmax(360px,480px)!important;
    column-gap:86px!important;
    gap:0 86px!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:24px!important;
    padding-right:24px!important;
    box-sizing:border-box!important;
  }

  body#authentication.pratinium-auth-phone-mode .pratinium-phone-card-host,
  body#authentication.pratinium-auth-phone-mode section.login-form:has(> form.pratinium-phone-main-form),
  body#authentication.pratinium-auth-phone-mode section.login-form:has(> form.pl-phone-login-form){
    grid-column:1!important;
    justify-self:end!important;
    margin-left:0!important;
    margin-right:0!important;
    width:640px!important;
    max-width:640px!important;
  }

  /* Bloc de droite réel : onglets E-mail / Téléphone + lien création compte. */
  body#authentication.pratinium-auth-phone-mode #content > .register-form,
  body#authentication.pratinium-auth-phone-mode #content > .pratinium-auth-side,
  body#authentication.pratinium-auth-phone-mode #content > .auth-side,
  body#authentication.pratinium-auth-phone-mode #content > .pl-login-footer,
  body#authentication.pratinium-auth-phone-mode #content > .pl-login-tabs,
  body#authentication.pratinium-auth-phone-mode #content > .pratinium-auth-tabs,
  body#authentication.pratinium-auth-phone-mode #content > section:not(.pratinium-phone-card-host):not(.login-form):not(#login-form),
  body#authentication.pratinium-auth-phone-mode #content > div:not(.pratinium-phone-card-host):not(.login-form):not(#login-form):not(.page-content){
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start!important;
    margin-left:0!important;
    transform:none!important;
  }
}

@media (max-width: 991.98px){
  body#authentication.pratinium-auth-phone-mode #content,
  body#authentication.pratinium-auth-phone-mode #content.pratinium-auth-v277-spaced{
    display:block!important;
    max-width:100%!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
}