/* PHAR-934 : page de connexion « e-mail d'abord » (Gone_HyvaCheckout::connexion.phtml), aux couleurs du tunnel (tunnel.css :
   variables, encart Kare, croix de l'e-mail, connexion sociale). Une seule carte centrée. */
/* sélecteur renforcé : la CSS prod de la page compte colle le conteneur à gauche */
body.ps-compte #ps-login-container.login-container { display: block; width: 100%; max-width: 480px; margin: 8px auto 40px !important; padding: 0; float: none; }
.ps-cnx {
    background: #fff; border: 1px solid var(--ps-bord); border-radius: 14px; padding: 24px; color: var(--ps-texte);
    display: flex; flex-direction: column; gap: 14px;
}
.ps-cnx [x-cloak] { display: none !important; }
.ps-cnx__titre { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--ps-texte); }
.ps-cnx__intro, .ps-cnx__texte { margin: 0; font-size: 14px; color: var(--ps-texte-2); }
.ps-cnx__form, .ps-cnx__bloc { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ps-cnx__champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ps-cnx__champ > label { font-size: 13px; font-weight: 700; color: var(--ps-texte); margin: 0; }
.ps-cnx__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .ps-cnx__deux { grid-template-columns: 1fr; } }
.ps-cnx__saisie { position: relative; display: block; }
.ps-cnx .ps-cnx__input {
    width: 100%; min-height: 48px; height: 48px; border: 1px solid #b8c0c8; border-radius: 10px; background: #fff;
    font-size: 16px; padding: 0 12px; color: var(--ps-texte); box-shadow: none;
}
.ps-cnx .ps-cnx__saisie .ps-cnx__input { padding-right: 44px; }
.ps-cnx .ps-cnx__input:focus { border-color: var(--ps-texte); box-shadow: 0 0 0 2px rgba(30, 42, 50, .15); outline: none; }
.ps-cnx .ps-cnx__input[readonly] { background: var(--ps-fond); }
.ps-cnx .is-erreur, .ps-cnx [aria-invalid="true"] { border-color: var(--ps-rouge) !important; }
.ps-cnx__erreur { font-size: 13px; font-weight: 600; color: #b3123f; }
.ps-cnx__aide { font-size: 12px; color: var(--ps-texte-2); }
.ps-cnx__aide.is-ok { color: var(--ps-vert-texte); }
.ps-cnx__aide.is-ok::before { content: "✓ "; }
.ps-cnx__ok { margin: 0; padding: 12px 14px; border-radius: 10px; background: #eef7e9; color: var(--ps-vert-texte); font-size: 14px; }

/* boutons : principal rouge du tunnel ; liens soulignés */
.ps-cnx .ps-cnx__bouton {
    width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: var(--ps-rouge); color: #fff;
    font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 16px;
}
.ps-cnx .ps-cnx__bouton:hover, .ps-cnx .ps-cnx__bouton:focus { background: var(--ps-rouge-fonce); color: #fff; border: 0; }
.ps-cnx .ps-cnx__bouton:disabled { opacity: .6; cursor: wait; }
.ps-cnx .ps-cnx__lien {
    align-self: center; background: none; border: 0; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--ps-texte);
    text-decoration: underline; cursor: pointer;
}
.ps-cnx .ps-cnx__lien:hover, .ps-cnx .ps-cnx__lien:focus { background: none; color: var(--ps-texte); text-decoration: none; border: 0; box-shadow: none; }

/* croix de l'e-mail (dessin dans tunnel.css) et œil du mot de passe, dans le champ */
.ps-cnx .ps-email-effacer { right: 10px; }
.ps-cnx .ps-cnx__oeil {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0;
    border-radius: 6px; box-shadow: none; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6670' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
.ps-cnx .ps-cnx__oeil[aria-pressed="true"] { opacity: .55; }
.ps-cnx .ps-cnx__oeil:hover, .ps-cnx .ps-cnx__oeil:focus { background-color: var(--ps-fond); border: 0; }

/* lettre d'information */
.ps-cnx__case { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ps-texte-2); cursor: pointer; margin: 0; }
.ps-cnx__case input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; }

/* encart Kare : celui du tunnel, sans marge propre (l'écart vient de la colonne) */
.ps-cnx .ps-kare { margin: 0; }
.ps-cnx .ps-kare__bouton { flex: 1; }

/* connexion sociale : boutons pleine largeur du tunnel ; la CSS prod de la page compte (ronds) est neutralisée */
.ps-cnx__social { margin: 0; }
.ps-cnx .amsl-socials-checkout .amsl-social-wrapper, .ps-cnx .amsl-socials-checkout .amsl-social-login { margin: 0; padding: 0; width: 100%; max-width: none; }
.ps-cnx .amsl-socials-checkout .amsl-button-wrapper { width: 100%; margin: 0; }
.ps-cnx .amsl-socials-checkout .amsl-button-form { width: 100%; margin: 0; }
.ps-cnx .amsl-socials-checkout .amsl-title { display: none; }
.ps-cnx .amsl-socials-checkout .amsl-button { box-shadow: none; }
.ps-cnx .amsl-socials-checkout .amsl-separator { position: static; width: auto; height: auto; border: 0; margin: 0 0 12px; }
.ps-cnx .amsl-socials-checkout .amsl-separator .amsl-icon {
    position: static; display: inline; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
    font-size: 13px; line-height: 1; color: var(--ps-texte-2); transform: none;
}
/* boutons sociaux identiques au tunnel (Thomas 27/10) : la CSS prod de la page compte (compte-prod.css) les faisait hauts de 65 px,
   sans marge intérieure, avec ses propres icônes ; sélecteurs renforcés par body.ps-compte */
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-buttons { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-button-wrapper { height: auto; min-height: 0; padding: 0; margin: 0; border: 0; }
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-button {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; min-height: 44px; padding: 0 16px;
    border: 1px solid #b8c0c8; border-radius: 10px; background-color: #fff; color: var(--ps-texte); font-size: 14px; font-weight: 600;
    line-height: normal; box-shadow: none; margin: 0; padding: 0 16px !important;
}
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-button:hover { border-color: var(--ps-texte); background-color: #fff; color: var(--ps-texte); }
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-social-icon {
    display: block; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; background-position: center; background-repeat: no-repeat; background-size: contain !important;
}
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-separator { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--ps-texte-2); font-size: 13px; }
/* icônes du tunnel (tunnel.css), la CSS prod impose les siennes et leur taille */
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-button.-google .amsl-social-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PG1hc2sgaWQ9ImEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIzMSIgaGVpZ2h0PSIzMyI+PHBhdGggZD0iTS4xMDIgMTYuNTJDLS4yMDggOC4yNjUgNi45MTYuNjM1IDE1LjA1Ni41MzZjNC4xNS0uMzYgOC4xODYgMS4yNzYgMTEuMzI2IDMuOTQ0LTEuMjg4IDEuNDM4LTIuNTk5IDIuODU5LTMuOTk4IDQuMTktMi43NjUtMS43MDUtNi4wOTMtMy4wMDUtOS4zMjMtMS44NS01LjIxIDEuNTA1LTguMzY2IDcuNzUxLTYuNDM4IDEyLjkyNiAxLjU5NyA1LjQwNSA4LjA3MiA4LjM3IDEzLjE0NyA2LjEgMi42MjgtLjk1NSA0LjM2LTMuNDE2IDUuMTItNi4wNjEtMy4wMTEtLjA2MS02LjAyMy0uMDIzLTkuMDM1LS4xMDctLjAwOC0xLjgyLS4wMTUtMy42MzItLjAwOC01LjQ1IDUuMDIzLS4wMDggMTAuMDUzLS4wMjQgMTUuMDgzLjAyMi4zMDkgNC40NTctLjM0IDkuMjI3LTMuMTkzIDEyLjgwNC0zLjkwOSA1LjEwNy0xMS4xMyA2LjYwNS0xNy4wMDMgNC42MDJDNC41IDI5LjU3OC0uMDM0IDIzLjIwMi4xMDIgMTYuNTJ6IiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxnIG1hc2s9InVybCgjYSkiPjxwYXRoIGQ9Ik0tOS43NjIgMzQuMzZWMi4zMzVsMjAuOTQgMTYuMDE0LTIwLjk0IDE2LjAxM3oiIGZpbGw9IiNGQkJDMDUiLz48cGF0aCBkPSJNLTkuNzYyIDIuMzM1bDIwLjk0IDE2LjAxMyA4LjYyMy03LjUxNEw0OS4zNjMgNi4wM3YtMTcuMjQ1SC05Ljc2MnYxMy41NXoiIGZpbGw9IiNFQTQzMzUiLz48cGF0aCBkPSJNLTkuNzYyIDM0LjM2TDI3LjE5IDYuMDNsOS43MzEgMS4yMzIgMTIuNDQxLTE4LjQ3N1Y0Ny45MUgtOS43NjJWMzQuMzZ6IiBmaWxsPSIjMzRBODUzIi8+PHBhdGggZD0iTTQ5LjM2MyA0Ny45MUwxMS4xNzggMTguMzQ4bC00LjkyNy0zLjY5Nkw0OS4zNjMgMi4zMzRWNDcuOTF6IiBmaWxsPSIjNDI4NUY0Ii8+PC9nPjwvc3ZnPg==); }
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-button.-apple .amsl-social-icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAjCAYAAABo4wHSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKGSURBVHgBvVddbtpAEJ5dm1SVIuq8EcWm7glK3/pWOEGSExAe+9T2BE1OUHqCuDcIJ4Ab1Jygq5IfHi1qpApsb2ccg4xrO1HszSeBl9ldvp31zM63DGqCgdjfb34CkF36fX096xWN1aEGHB5aJ5rGLokbgOFDTsrGVyZtt9v9KAJn1yqnZXMYVECr1bJ1fe9X1h4E/M18LkTRPA4VoOsvLrM2KcEpI6xESl5ugiZFKMKQXzw098mkmtbo5hD2HvKyEiljzE6aHkD0fbnk7x5DGM8t6jBNsysl73AOb9EPDyN0GobryRz/mfpxdzGIAtv3ddfzhEfjcSHH6LGN3QZj4GbnFJJSzuk6+5ZMzoGcYN8P9M5FEuOeiJ1BnKMFM6QcLpd/LjzEf6SW1Sayz6AA6LlYr1c98nr7Tk2z/VUVIYF2rtHYG1M7PpGOjqwzfJyDQlB0Y4ycbkk5Z+SlUsJ0OnHLsk6Kg6YeRJH8kk4njmF9DEohJ3d3s6u0hWPId0AhMJ1GWRtFrw0KwVjkQg6pAc+MSqXtMQhDZuSReqAQKGM6eaQClEJ+yFo45ugUlIJ1qYjskGoauKAYpBTvlUZCulrxK1APgw77DXFc2kzz9Tird1QBa6sTpwzncgTPBDwBDxJS7oDi1NkgDKWjUQNVxN9m89VLbHZBIajE3d7OPm5PJF3nQzKCUshYE29JhRAeHs4DUARS/jc3M4faWrpjsVgI3OYDbL6HGpEoh4Hv56jBDVCk/cRHXXXWwwvVjhDPvSri++0FQTQuIXZJTFMDi7SN3zQur0SS+j+dz3+LtLH0qogen+PW9JHAJiL8jHyfD0nRZ8eSomSM95MF0HLcINAGeVeNfzUoF3Ix/HhxAAAAAElFTkSuQmCC); }
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-button.-amazon .amsl-social-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MyIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0Y5MCIgZD0iTTM4Ljg2OCAzNC42ODVDMzQuMTYgMzguMTUxIDI3LjMzNSA0MCAyMS40NTggNDAgMTMuMjIgNDAgNS44MDIgMzYuOTU3LjE5IDMxLjg5NmMtLjQ0LS4zOTgtLjA0Ni0uOTQuNDgzLS42M0M2LjczIDM0Ljc4NCAxNC4yMTcgMzYuOSAyMS45NTMgMzYuOWM1LjIxNiAwIDEwLjk1NC0xLjA3OCAxNi4yMy0zLjMxNC43OTgtLjMzOCAxLjQ2NS41Mi42ODUgMS4wOTh6Ii8+PHBhdGggZmlsbD0iI0Y5MCIgZD0iTTQwLjgyNiAzMi40NWMtLjYtLjc2OS0zLjk3OS0uMzY0LTUuNDk1LS4xODQtLjQ2My4wNTYtLjUzMy0uMzQ1LS4xMTctLjYzNCAyLjY5MS0xLjg5MSA3LjEwNy0xLjM0NSA3LjYyMi0uNzExLjUxNS42MzctLjEzNCA1LjA1Ny0yLjY2MyA3LjE2Ny0uMzg4LjMyNC0uNzU4LjE1MS0uNTg1LS4yNzkuNTY4LTEuNDE1IDEuODQtNC41ODggMS4yMzgtNS4zNnoiLz48cGF0aCBmaWxsPSIjMjIxRjFGIiBkPSJNMjQuMzczIDE2LjQ0NVYxNS4zM2MtMy43NjMgMC03LjczOC43OTctNy43MzggNS4xODggMCAyLjIyNCAxLjE2NCAzLjczIDMuMTYzIDMuNzMgMS40NjQgMCAyLjc3NC0uODkgMy42MDEtMi4zNCAxLjAyNS0xLjc4Mi45NzQtMy40NTUuOTc0LTUuNDYyek0yOS42MiAyOWMtLjM0NC4zMDQtLjg0MS4zMjYtMS4yMy4xMjMtMS43MjctMS40Mi0yLjAzNC0yLjA4LTIuOTg2LTMuNDM0LTIuODU1IDIuODgzLTQuODc1IDMuNzQ1LTguNTggMy43NDUtNC4zNzcgMC03Ljc4OC0yLjY3My03Ljc4OC04LjAyNiAwLTQuMTggMi4yOTEtNy4wMjggNS41NDgtOC40MTkgMi44MjYtMS4yMzEgNi43NzItMS40NDkgOS43ODgtMS43ODl2LS42NjZjMC0xLjIyNS4wOTUtMi42NzQtLjYzLTMuNzMxLS42MzctLjk1LTEuODUyLTEuMzQtMi45Mi0xLjM0LTEuOTg0IDAtMy43NTYgMS4wMDYtNC4xODggMy4wOTMtLjA4OC40NjMtLjQzMi45Mi0uOS45NDJsLTUuMDUxLS41MzdjLS40MjUtLjA5NC0uODkzLS40MzQtLjc3Ni0xLjA3OUMxMS4wNzIgMS44MjYgMTYuNTk4IDAgMjEuNTQ4IDBjMi41MzIgMCA1Ljg0LjY2NiA3Ljg0IDIuNTY1IDIuNTMyIDIuMzQgMi4yOSA1LjQ2MiAyLjI5IDguODZ2OC4wMjdjMCAyLjQxMiAxLjAxIDMuNDcgMS45NjIgNC43NzQuMzM3LjQ2My40MSAxLjAyMS0uMDE0IDEuMzY5LTEuMDYyLjg3Ny0yLjk1IDIuNTA3LTMuOTkgMy40MkwyOS42MjEgMjkiLz48L3N2Zz4=); }
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-button.-facebook .amsl-social-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM3IDM3LjI4VjIwLjY2OGg1LjU3NmwuODM1LTYuNDc0SDEyLjM3VjEwLjA2YzAtMS44NzUuNTItMy4xNTIgMy4yMDktMy4xNTJsMy40MjgtLjAwMnYtNS43OWMtLjU5My0uMDgtMi42MjgtLjI1Ni00Ljk5Ni0uMjU2LTQuOTQzIDAtOC4zMjcgMy4wMTctOC4zMjcgOC41NTh2NC43NzVILjA5NHY2LjQ3NWg1LjU5VjM3LjI4aDYuNjg2eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==); }
/* fond gris et coins arrondis du bloc Amasty (CSS Hyvä du module) : le tunnel n'en a pas (Thomas 27/10) */
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-social-login,
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-social-wrapper,
body.ps-compte .ps-cnx .amsl-socials-checkout .amsl-login-page { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
/* règle du mot de passe : pastilles grises qui passent au vert une fois remplies */
.ps-cnx__regles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ps-texte-2); }
.ps-cnx__regle { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--ps-fond); }
/* même place pour le point et la coche : les pastilles ne bougent pas quand elles passent au vert */
.ps-cnx__regle::before {
    content: ""; flex: 0 0 10px; width: 10px; height: 10px; line-height: 10px; text-align: center; font-size: 11px;
    background: radial-gradient(circle, #b8c0c8 3px, transparent 3.5px);
}
.ps-cnx__regle.is-ok { background: #eef7e9; color: var(--ps-vert-texte); }
.ps-cnx__regle.is-ok::before { content: "✓"; background: none; }
.ps-cnx__regles-titre.is-ok { color: var(--ps-vert-texte); }