/** * Écrans de conversion : paiement et connexion/inscription. * * Ces écrans sont rendus par Tutor LMS. L'essentiel de leur couleur est déjà * corrigé en amont par tutor-theme-vars.css (jetons du plugin remappés sur notre * palette). Ce fichier ne traite que ce qu'un jeton ne peut pas corriger : * les dimensions de cible tactile, les fuites de couleur peintes en dur par le * plugin, et les blocs ajoutés par le thème. * * Référence : docs/DESIGN-REVIEW.md §6.4 et §6.5. */ /* ═══════════════════════════════════════════════════════════════════════════ * 1. FUITES DE MODE CLAIR — la vraie cause, mesurée * * Le checkout charge DEUX feuilles du plugin : * • tutor-core.min.css — le design system v4, entièrement piloté par variables. * C'est celle que tutor-theme-vars.css remappe, et elle est corrigée. * • tutor.min.css — une feuille plus ancienne qui peint des couleurs * LITTÉRALES (#fff, #fafafa, #f5f5f6…). Aucune variable, donc aucun * remappage possible : c'est le seul cas où il faut surcharger la classe. * * C'est ce qui explique que le checkout soit resté en mode clair alors que le * dashboard et la zone d'apprentissage, eux, étaient corrects : ces derniers * n'utilisent que le design system v4. * * Chaque sélecteur ci-dessous correspond à un élément relevé par le détecteur de * fuites (fond dont la moyenne RVB dépasse 200) sur /paiement/ en visiteur * anonyme. C'est le cas n°3 de la hiérarchie de DESIGN-REVIEW §3.9 : `!important` * en dernier recours, groupé et commenté, parce que la variable n'existe pas. * ═══════════════════════════════════════════════════════════════════════════ */ /* Couleurs de TEXTE littérales — « Détails de la commande », « Moyen de paiement » s'affichaient en quasi-noir sur fond noir : 1,02:1. */ .tutor-checkout-page .tutor-color-black, .tutor-checkout-page .tutor-color-secondary, .tutor-login-wrap .tutor-color-black { color: var(--dsa-text) !important; } /* * `.tutor-color-subdued` vaut #5B616F en dur dans les deux feuilles héritées, soit * 3,11:1 sur nos fonds — échec AA. C'est la classe qui porte le texte de * consentement « J'accepte les conditions générales de vente » : une mention * juridiquement requise ne peut pas être sous le seuil de lisibilité. * Le jeton de texte secondaire est à 6,94:1. */ .tutor-color-subdued { color: var(--dsa-text-muted) !important; } /* * Nom du moyen de paiement (« Stripe ») : couleur littérale rgb(33, 37, 41) * posée par tutor-front.min.css, soit 1,15:1. Aucune variable en jeu, donc * surcharge de classe obligatoire. */ .tutor-checkout-payment-options .tutor-payment-item-content, .tutor-checkout-payment-options .tutor-checkout-payment-item-content { color: var(--dsa-text) !important; } /* Surfaces claires du récapitulatif et des moyens de paiement. */ .tutor-checkout-page .tutor-checkout-details-inner, .tutor-checkout-page .tutor-checkout-payment-options, .tutor-checkout-page .tutor-payment-instructions, .tutor-checkout-page .tutor-apply-coupon-form, .tutor-checkout-page .tutor-modal-content-white, .tutor-modal-content.tutor-modal-content-white { background-color: var(--dsa-surface) !important; color: var(--dsa-text-body) !important; border-color: var(--dsa-border) !important; } .tutor-checkout-page .tutor-checkout-coupon-badge { background-color: var(--dsa-lime-a14) !important; color: var(--dsa-lime) !important; } /* Moyen de paiement sélectionné : le bleu pâle par défaut du plugin (#E9EDFB) devient un panneau teinté lime, cohérent avec l'état actif du reste du site. */ .tutor-checkout-page .tutor-checkout-payment-item { background-color: var(--dsa-surface-raised) !important; border: 1px solid var(--dsa-border-input) !important; color: var(--dsa-text-body) !important; } .tutor-checkout-page .tutor-checkout-payment-item.active { background-color: var(--dsa-lime-a14) !important; border-color: var(--dsa-lime) !important; } /* * L'ENCRE DU BOUTON PRIMAIRE — le dernier maillon du CTA. * * `tutor.min.css` pose `.tutor-btn-primary { color: #fff }` en dur, sans passer * par --tutor-text-primary-inverse. Le fond est désormais lime (via l'échelle de * marque), mais du blanc sur notre lime donne 1,24:1 : le libellé « Payer * maintenant » serait resté illisible sur un bouton pourtant corrigé. * Avec notre encre sombre : 14,68:1. */ .tutor-btn-primary, .tutor-btn.tutor-btn-primary, #tutor-checkout-pay-now-button { color: var(--dsa-lime-ink) !important; background-color: var(--dsa-lime) !important; } .tutor-btn-primary:hover, #tutor-checkout-pay-now-button:hover { background-color: var(--dsa-lime-hover) !important; color: var(--dsa-lime-ink) !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 2. CIBLES TACTILES ET CHAMPS — WCAG 2.2 SC 2.5.8 * * Relevé : champs à 38-40px de haut, case de consentement à 24px (le strict * minimum de la norme, sans marge), boutons de tunnel sous 44px. * * `font-size: 1rem` sur les champs n'est pas cosmétique : sous 16px, iOS zoome * automatiquement au focus et casse la mise en page du tunnel sur mobile. * ═══════════════════════════════════════════════════════════════════════════ */ /* * `!important` nécessaire ici : `tutor.min.css` cible ces champs par CLASSE * (.tutor-form-control { background: #F5F5F6 }), ce qui l'emporte sur un * sélecteur d'élément. Sans lui, les champs restaient en mode clair. */ /* * Non restreint à un conteneur : le formulaire de connexion est aussi rendu dans * une MODALE, en dehors de .tutor-checkout-page. Des sélecteurs scopés laissaient * donc quatre champs en mode clair, invisibles tant que la modale n'est pas * ouverte — exactement le genre de fuite que personne ne voit en recette. * Le thème est dark-only : il n'y a aucun contexte où un champ clair serait juste. */ .tutor-form-control, .tutor-checkout-page input:not([type="checkbox"]):not([type="radio"]), .tutor-checkout-page select, .tutor-login-wrap input:not([type="checkbox"]):not([type="radio"]), .tutor-login-wrap select, .tutor-modal input:not([type="checkbox"]):not([type="radio"]), .tutor-modal select { min-height: var(--dsa-field-h); /* En rem : sous 16px, iOS zoome automatiquement au focus et casse la mise en page du tunnel sur mobile. */ font-size: 1rem !important; background-color: var(--dsa-surface-raised) !important; color: var(--dsa-text) !important; /* Jeton INTERACTIF, pas le décoratif : un contour de champ doit atteindre 3:1 (SC 1.4.11). Le jeton de carte est à 1,80:1. */ border: 1px solid var(--dsa-border-input) !important; border-radius: var(--dsa-radius-md); } .tutor-checkout-page input::placeholder, .tutor-login-wrap input::placeholder { color: var(--dsa-text-faint) !important; } /* ═══════════════════════════════════════════════════════════════════════════ * ADRESSE DE FACTURATION — défaire la « pile jointe » du plugin * * `tutor-front.min.css` transforme volontairement ce bloc en une pile de champs * soudés, à la manière de l'Address Element de Stripe : * .tutor-checkout-billing .tutor-billing-fields .tutor-form-label → display: none * .tutor-checkout-billing .tutor-billing-fields .tutor-mb-16 → margin-bottom: 0 * .tutor-checkout-billing .tutor-billing-fields .tutor-form-control→ border-radius: 0 * + `tutor-g-0` sur la grille, donc aucune gouttière * * Ce parti pris ne tient que si les champs n'ont PAS de contour individuel : chez * Stripe, seul le bloc entier est encadré. Avec nos bordures à 3:1 (obligatoires, * SC 1.4.11), chaque champ redessine son cadre et les bordures se doublent entre * voisins — d'où l'impression de champs tassés et d'angles incohérents. * * On revient donc à un formulaire à champs distincts : labels visibles, gouttières * réelles, rayon homogène. Les sélecteurs reprennent la même profondeur que ceux * du plugin (trois classes) pour l'emporter sans surenchère. * ═══════════════════════════════════════════════════════════════════════════ */ /* * Réafficher les labels. Un formulaire d'adresse en placeholders seuls perd son * étiquetage dès la première frappe : impossible de relire ce qu'attend un champ * au moment de vérifier sa commande. */ .tutor-checkout-billing .tutor-billing-fields .tutor-form-label { display: block !important; margin-bottom: var(--dsa-space-3xs) !important; font-size: var(--dsa-step--1); font-weight: 500; color: var(--dsa-text-muted) !important; } /* Espacement vertical entre les rangées de champs. */ .tutor-checkout-billing .tutor-billing-fields .tutor-mb-16 { margin-bottom: var(--dsa-space-s) !important; } /* Gouttière horizontale entre deux champs côte à côte (motif de grille standard : marge négative sur la rangée, padding sur les colonnes). */ .tutor-checkout-billing .tutor-billing-fields .tutor-row { margin-inline: calc(var(--dsa-space-2xs) * -1) !important; } .tutor-checkout-billing .tutor-billing-fields [class*="tutor-col-"] { padding-inline: var(--dsa-space-2xs) !important; } /* Rayon homogène sur tous les champs — le plugin les mettait à 0 au milieu de la pile et n'arrondissait que les extrémités. */ .tutor-checkout-billing .tutor-billing-fields .tutor-form-control { border-radius: var(--dsa-radius-md) !important; /* Le padding du plugin (0 10px) colle le texte au bord. */ padding: 0 var(--dsa-space-xs) !important; } /* Les