/* --------------------------------------------------------------------------- Corrections d'interface — améliorations volontaires par rapport au site source. Aucune ne modifie l'identité graphique (couleurs, polices, formes) : il s'agit uniquement d'alignements défectueux. Chargé APRÈS le bundle principal. ------------------------------------------------------------------------ */ /* 1. Bouton « afficher le mot de passe » Le site source le positionnait avec un décalage fixe (-10.8px) qui le plaçait 11px sous le centre du champ. Centrage optique exact. */ .password-field { position: relative; } .password-field button, .password-field .password-toggle, .password-field [data-toggle-password] { top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; } /* 2. Zone de clic : 44x44px minimum (recommandation WCAG 2.5.8 / Apple HIG). Le bouton fait déjà 44px, on garantit que l'icône reste centrée dedans. */ .password-field button .icon, .password-field [data-toggle-password] .icon { display: block; } /* --------------------------------------------------------------------------- 3. Widget d'accessibilite OneTap Par defaut il se place en bas a droite, exactement sur le bouton du chatbot (mesure : les deux a 2px pres, OneTap au-dessus avec un z-index maximal). On le deplace en onglet discret sur le bord droit, centre verticalement — position habituelle des widgets d'accessibilite. IMPORTANT — specificite : le plugin utilise .onetap-container-toggle .onetap-toggle (0,0,2,0) en !important et des variantes en media queries qui forcent « top: unset ». Une regle « .onetap-toggle » (0,0,1,0) perd donc l'arbitrage, meme en !important : entre deux declarations !important, c'est la specificite qui tranche en premier. On passe a (0,0,2,2) avec body + button. ------------------------------------------------------------------------ */ body .onetap-container-toggle button.onetap-toggle { position: fixed !important; bottom: auto !important; top: 50% !important; right: 0 !important; left: auto !important; margin: 0 !important; margin-bottom: 0 !important; transform: translateY(-50%) !important; width: 46px !important; height: 46px !important; min-width: 0 !important; border-radius: 10px 0 0 10px !important; box-shadow: 0 2px 12px rgba(28, 28, 26, 0.18) !important; opacity: 0.75; transition: opacity var(--duration-base, 250ms) var(--ease-standard, ease), width var(--duration-base, 250ms) var(--ease-standard, ease); } body .onetap-container-toggle button.onetap-toggle:hover, body .onetap-container-toggle button.onetap-toggle:focus-visible { opacity: 1; width: 54px !important; } /* Le chatbot doit rester cliquable en toutes circonstances */ .chatbot { z-index: var(--z-chatbot, 150); } /* Sur mobile, l'onglet est plus discret encore pour ne pas gener la lecture. Meme specificite elevee, sinon les media queries du plugin reprennent la main (elles forcent top:unset / bottom:0 / margin-bottom:20px). */ @media (max-width: 599px) { body .onetap-container-toggle button.onetap-toggle { top: 50% !important; bottom: auto !important; left: auto !important; right: 0 !important; margin-bottom: 0 !important; width: 38px !important; height: 38px !important; opacity: 0.65; } } /* --------------------------------------------------------------------------- 4. Variante « erreur » du bloc .alert Le bundle ne définit que .alert--info et .alert--demo. Le message d'accès refusé (role-guard.js) a besoin d'une variante d'erreur : on reprend exactement les couleurs deja utilisees par le site pour les messages d'erreur (.auth-feedback[data-state="error"]), donc aucune couleur nouvelle n'est introduite dans l'identite graphique. ------------------------------------------------------------------------ */ .alert--error { background: #fdeceb; color: var(--color-error); border: 1px solid var(--color-error); } .alert--error h1 { margin-block-start: 0; color: inherit; } .alert--error a.btn { text-decoration: none; } /* --------------------------------------------------------------------------- 5. Champ e-mail de la newsletter Le bloc newsletter est posé sur une photo sombre : la règle de couleur héritée met le texte en blanc. Mais le champ, lui, a un fond blanc — le texte saisi devenait donc invisible (blanc sur blanc). On force la couleur de texte du site sur le champ lui-même, sans toucher au reste du bloc ni aux couleurs de la charte. ------------------------------------------------------------------------ */ .newsletter-form input[type="email"], .newsletter-form input[type="text"], #newsletter-email { color: var(--color-text, #1c1c1a); -webkit-text-fill-color: var(--color-text, #1c1c1a); caret-color: var(--color-text, #1c1c1a); } .newsletter-form input[type="email"]::placeholder, #newsletter-email::placeholder { color: var(--color-text-muted, rgba(28, 28, 26, 0.7)); -webkit-text-fill-color: var(--color-text-muted, rgba(28, 28, 26, 0.7)); opacity: 1; } /* Saisie automatique du navigateur : même correction, sinon Chrome réapplique sa propre couleur de texte sur fond jaune pâle. */ .newsletter-form input:-webkit-autofill { -webkit-text-fill-color: var(--color-text, #1c1c1a); box-shadow: 0 0 0 1000px var(--color-white, #fff) inset; } /* --------------------------------------------------------------------------- 6. Onglet OneTap — habillage « flèche » L'extension affiche son logo rond bleu, hors charte et très visible. On masque son image et on dessine à la place un onglet fin collé au bord droit, portant un simple chevron. Couleurs issues de la charte (--color-forest sur --color-primary). Le bouton reste un vrai