/* ========================================================================== Smakoo — feuille de surcharge des pages d'authentification (connexion · inscription · mot de passe oublié) -------------------------------------------------------------------------- Posee APRES auth.css et crossplatform.css dans layout/auth/auth.phtml : elle gagne donc l'egalite de specificite par l'ordre de chargement. Ce qui est corrige ici, avec la mesure qui l'a mis en evidence (audit du 04/10/2026, largeurs 320 / 375 / 414 / 768 / 1024 / 1440) : 1. `height:100vh` sur le conteneur et sur la coquille mobile : la barre d'adresse d'iOS rend 100vh plus haut que la zone visible, ce qui pousse le bas du formulaire sous la ligne de flottaison. -> 100dvh. 2. Champs et boutons a 40 px de haut, police de saisie a 14 px : sous les 44 px exiges au doigt, et iOS agrandit la page des que l'on touche un champ sous 16 px. -> 48 px et 16 px sur mobile. 3. Bouton oeil (afficher/masquer le mot de passe) : zone cliquable mesuree a 18 x 14 px. -> 44 x 44 px. 4. La rangee Jour / Mois / Annee : trois listes de 68 / 104 / 79 px tassees dans 256 px a 320 px de large. -> deux colonnes puis l'annee en pleine largeur. 5. Aucun etat de focus visible (`button:focus,input:focus{outline:0}` dans auth.css) : impossible de suivre la navigation au clavier. -> anneau de focus de 3 px. 6. Aucune prise en charge de « mouvement reduit ». 7. Boutons au degrade violet/rouge de l'ancien theme, etrangers a la palette Smakoo (rose #E0245E) utilisee sur la vitrine. 8. `.auth-main-wrap` fige a `width:400px`. Contraintes tenues : aucun filtre SVG, aucun calcul en 100vw, la balise viewport n'est pas touchee, seuls `transform` et `opacity` sont animes. ========================================================================== */ :root{ --accent:#1DA1F2; --accent-fonce:#0E8BD4; --like:#E0245E; --like-fonce:#C4184C; --encre:#0d0c22; --cible:44px; } /* -------------------------------------------------------------------------- 1. Hauteur de page : dvh et non vh -------------------------------------------------------------------------- */ .bl-main-wrap{min-height:100vh;min-height:100dvh} .h-screen{height:100vh;height:100dvh} @media (max-width:768px){ .xs\:h-screen{height:100vh;height:100dvh} } /* -------------------------------------------------------------------------- 2. La carte ne depasse jamais la largeur disponible -------------------------------------------------------------------------- */ .auth-main-wrap{max-width:100%} /* -------------------------------------------------------------------------- 3. Couleurs de marque (alignees sur la vitrine) -------------------------------------------------------------------------- */ .auth-main-wrap .bl-btn.bl-bg{ background:var(--like); box-shadow:0 8px 22px rgba(224,36,94,.26); } .auth-main-wrap .bl-btn.bl-bg:hover{ background:var(--like-fonce); animation:none; } .auth-main-wrap .bl-btn.bl-bg:disabled, .auth-main-wrap .bl-btn.bl-bg.disable-btn{background:#C9A9B4} .auth-main-wrap a{color:inherit;cursor:pointer} .auth-main-wrap .text-blPrimary{color:var(--like)} .auth-main-wrap a.bl-btn,.auth-main-wrap .bl-trans-btn{cursor:pointer} /* -------------------------------------------------------------------------- 4. Focus visible (accessibilite clavier) -------------------------------------------------------------------------- */ .auth-main-wrap a:focus-visible, .auth-main-wrap button:focus-visible, .auth-main-wrap input:focus-visible, .auth-main-wrap select:focus-visible, .bl-main-wrap > div > div > a:focus-visible{ outline:3px solid var(--like); outline-offset:2px; border-radius:4px; } /* -------------------------------------------------------------------------- 4bis. Champs et boutons : 48 px de haut et police de saisie de 16 px PARTOUT, pas seulement sur mobile. Deux raisons de ne pas s'en tenir au seul mobile : · un champ de moins de 16 px declenche l'agrandissement automatique d'iOS sur TOUT appareil tactile — une tablette de 1024 px en est un ; · un palier a 768 px creerait une rupture visible (champs de 48 px d'un cote, 40 px de l'autre) pour un gain nul. Les hauteurs de 40 px venaient de .bl-input / .bl-btn-md dans auth.css. -------------------------------------------------------------------------- */ .bl-input{height:48px;font-size:16px} .bl-btn-md{height:48px;min-height:48px;font-size:15px} .bl-trans-btn{height:48px;min-height:48px;font-size:15px} .h-40{height:48px} .auth-main-wrap .bl-input{height:48px;font-size:16px} /* Les decorations posees en absolu suivaient la hauteur de 40 px. */ .bl-input-prefix{top:14px} .bl-input-with-suffix-text{top:14px} .bl-input-with-success{top:19px} /* WCAG 2.5.8 : 24 px minimum pour tout pointeur. */ #reg_checkbox{width:24px;height:24px;flex:0 0 auto} /* Le selecteur vise le vrai emplacement : la ligne « Deja membre ? » et ses soeurs sont les freres de .auth-main-wrap, pas ses enfants. */ [data-page] > div.text-center > a.underline{display:inline-flex;align-items:center;min-height:24px} .auth-main-wrap form a.text-blPrimary{display:inline-flex;align-items:center;min-height:24px} /* -------------------------------------------------------------------------- 5. Le logo est un lien : cible tactile de 44 px -------------------------------------------------------------------------- */ .flex-both-center > div > a{ display:flex;align-items:center;justify-content:center; min-height:var(--cible); } /* -------------------------------------------------------------------------- 6. Zone du bouton « afficher le mot de passe » : 44 x 44 px -------------------------------------------------------------------------- */ .bl-input-with-suffix-icon{ top:50%;right:6px;transform:translateY(-50%); padding:15px 13px; display:flex;align-items:center;justify-content:center; } .bl-input-with-suffix-wrap .bl-input{padding-right:56px} /* -------------------------------------------------------------------------- 7. Mobile : cibles tactiles de 44 px -------------------------------------------------------------------------- */ @media (max-width:768px){ #reg_checkbox{width:24px;height:24px;flex:0 0 auto} .auth-main-wrap label[for=reg_checkbox]{font-size:13px;line-height:1.5} .auth-main-wrap .text-14{font-size:15px} /* Place APRES .text-14 : les champs portent la classe `text-14`, et a specificite egale c'est la derniere regle qui gagne. Sans cet ordre, la police de saisie restait a 15 px et iOS continuait de zoomer. */ .auth-main-wrap .bl-input{height:48px;font-size:16px} /* Liens autonomes de bas de carte (« Creez votre compte », « Se connecter ») : cible de 44 px. Les liens a l'interieur d'une phrase (conditions generales, politique de confidentialite) restent en ligne : WCAG 2.5.8 les exempte explicitement. */ [data-page] > div.text-center > a.underline, .auth-main-wrap form a.text-blPrimary{ display:inline-flex;align-items:center;min-height:var(--cible);padding:0 6px; } } /* Le doigt a besoin de place : les rangees de listes passent a la ligne. `:has()` cible uniquement les rangees qui contiennent un