/* ===================================================================== MANIÈRE CUT PLUS — UNE SEULE FAMILLE DE BOUTONS --------------------------------------------------------------------- À charger EN DERNIER parmi les feuilles de style. Sa place dans l'ordre est ce qui le fait fonctionner : à spécificité égale, la dernière règle l'emporte, et toutes celles ci-dessous sont écrites à une seule classe — exactement comme celles qu'elles corrigent. LE PROBLÈME MESURÉ Cinquante-sept règles de boutons ont leur propre forme, réparties sur quatre feuilles. On y compte NEUF rayons différents (6, 8, 9, 10, 11, 12, 14 px…), DOUZE tailles de police et trois graisses — pour trois rôles réels : l'action principale, l'action secondaire, l'action discrète. Chaque module a refait la sienne, sans mauvaise raison : il n'y avait rien à réutiliser. Le résultat se voit sur un même écran, où deux boutons de même importance n'ont ni la même hauteur, ni le même rayon. CE QUE CE FICHIER NORMALISE, ET CE QU'IL LAISSE Il unifie la FORME : rayon, hauteur, rembourrage, police, graisse, transition. Il ne touche PAS aux COULEURS. C'est délibéré — la couleur d'un bouton porte son rôle (rouge pour couper, vert pour WhatsApp, neutre pour annuler), et la réécrire d'ici aurait mélangé deux décisions différentes en une seule livraison. Les couleurs sont le chantier 03. AUCUN FICHIER HTML N'EST MODIFIÉ. Les soixante classes existantes restent en place, avec leurs noms et leurs gestionnaires : on ne renomme rien, on ne casse aucun onclick. C'est ce qui rend ce changement réversible — retirer cette feuille rend l'ancien état. ===================================================================== */ :root { /* L'échelle. Trois hauteurs suffisent : le pouce sur un chantier demande 44 px, l'écran dense en tolère 38, une action secondaire dans une liste 32. */ --b-h: 42px; --b-h-petit: 34px; --b-h-grand: 50px; /* Les rayons viennent du vocabulaire commun : j'avais dû les inventer ici faute d'échelle partagée, ce qui faisait un quatrième jeu de jetons. Ils y sont revenus. */ --b-r: var(--rayon-s, 10px); --b-r-petit: var(--rayon-s, 8px); /* Rembourrage HORIZONTAL seulement : le vertical est posé à part, pour qu'un bouton dont le texte revient à la ligne ne colle pas ses bords. Il se resserre sur les écrans étroits — 26 px de chaque côté dans une carte de tarif de 117 px ne laissent plus de place au texte. */ --b-pad-x: clamp(12px, 3.5vw, 18px); --b-pad-x-petit: clamp(10px, 3vw, 13px); --b-pad-x-grand: clamp(14px, 4vw, 26px); --b-pad-y: 9px; --b-pad-y-petit: 6px; --b-pad-y-grand: 12px; --b-taille: .88rem; --b-taille-petit: .81rem; --b-taille-grand: .98rem; --b-graisse: 700; --b-transition: background .18s ease, border-color .18s ease, color .18s ease, filter .18s ease; } /* ===================================================================== 1. LA FORME COMMUNE --------------------------------------------------------------------- Tous les boutons de texte de l'application. Volontairement écrit en une seule liste : c'est la liste elle-même qui documente l'ampleur du problème, et elle rétrécira à chaque module remis au propre. ===================================================================== */ .btn-add, .btn-optimize, .btn-v-add, .btn-unlock, .btn-trial, .btn-trial-new, .btn-trial-sub, .btn-install, .btn-download, .btn-directory, .btn-customize, .btn-guide-portal, .btn-about-portal, .btn-google-signin, .btn-google-signout, .btn-wa-with-email, .btn-whatsapp-portal, .btn-order-sub, .btn-price-order, .btn-hero-primary, .btn-hero-secondary, .btn-topbar, .btn-topbar-primary, .btn-upsell-primary, .btn-upsell-secondary, .btn-accept-priv, .btn-refuse-priv, .btn-share-option, .btn-sidebar-action, .btn-modern-action, .dv-btn, .mc-btn-plein, .mc-btn-plat, .mc-btn-google, .mc6-btn, .pa-btn, .pa-btn-sec, .tb-btn, .tb-abo-b, .ent-btn, .rp-faire, .an-invite-b, .an-btn-pos, .an-btn-itineraire, .mp-btn-recu, /* Les modules ajoutés au fil du temps — stock de chutes, reprise d'un devis en chantier, gestionnaire de chantiers — avaient chacun refait la leur. Ce sont de vrais boutons d'action : ils entrent dans la famille. Les cartes de navigation (.nav-item, .mm-tete, .mbn-item) n'y entrent PAS : ce sont des éléments de liste sur plusieurs lignes, pas des actions, et les enfermer dans une hauteur les aurait écrasés. */ .mcc-btn, .mcc-btn-valider, .mdc-btn, .mdc-btn-plat, .mdc-btn-devis, .mm-btn, .mc6-btn-plein, .mc6-btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--b-h); padding: var(--b-pad-y) var(--b-pad-x); border-radius: var(--b-r); border-width: 1px; border-style: solid; font-family: inherit; font-size: var(--b-taille); font-weight: var(--b-graisse); line-height: 1.25; text-align: center; text-decoration: none; /* PAS de white-space: nowrap. Je l'avais mis, et il tronquait quatre boutons sur un écran de 375 px : « Choisir cette formule » demande 135 px dans une carte de tarif qui en fait 117. Le français est plus long que l'anglais, et une carte de tarif sur téléphone est étroite. On laisse le texte revenir à la ligne ; min-height fait grandir le bouton au lieu de le laisser couper. */ white-space: normal; overflow-wrap: break-word; cursor: pointer; transition: var(--b-transition); } /* Ce qui doit rester libre de s'étirer sur toute la largeur garde ce droit : c'est une décision de mise en page, pas de forme. */ .mc-btn-block, .pa-btn, .btn-unlock, .btn-trial-new, .btn-guide-portal, .btn-whatsapp-portal, .btn-wa-with-email { display: flex; width: 100%; } /* ===================================================================== 2. LES DEUX AUTRES TAILLES ===================================================================== */ /* PETIT — dans une liste, une carte, une barre d'outils dense. */ .dv-btn-petit, .btn-delete-small, .btn-topbar, /* .btn-topbar-primary appartient à la barre du haut : lui donner la taille standard suffisait, sur un écran de 375 px, à faire passer le nom de la marque sur deux lignes. Une barre dense a ses propres proportions — c'est ce que la taille « petit » sert à dire. */ .btn-topbar-primary, .mm-champ-inline + .mm-ico, .pa-btn-fin, .tb-btn-fin, .an-onglet, .mc6-btn-petit { min-height: var(--b-h-petit); padding: var(--b-pad-y-petit) var(--b-pad-x-petit); border-radius: var(--b-r-petit); font-size: var(--b-taille-petit); } /* GRAND — les endroits où la taille dit quelque chose. Ce groupe ne contenait d'abord que les boutons d'achat et l'action principale du devis. Les deux actions qui ouvrent réellement l'outil — se connecter, activer un code — étaient restées en taille standard. Mesuré sur le portail : « Choisir cette formule » 65 px « Essai gratuit » 50 px « Se connecter avec Google » 42 px « Activer maintenant » 42 px Le portail vendait plus fort qu'il n'ouvrait. Pire, .btn-unlock portait à l'origine padding:17px et font-weight:900 : c'était déjà un grand bouton, et en réunissant la famille je l'avais rangé avec les moyens. Il retrouve son rang. */ .btn-hero-primary, .btn-price-order, .btn-unlock, .btn-google-signin, .dv-btn-large { min-height: var(--b-h-grand); padding: var(--b-pad-y-grand) var(--b-pad-x-grand); font-size: var(--b-taille-grand); } /* Sur 23 boutons visibles au portail, « ACTIVER MAINTENANT » était le seul en capitales. Plus petit que les autres et plus fort à la fois : désaccordé sur les deux axes. La taille est corrigée au-dessus, la voix ici. */ .btn-unlock { text-transform: none; letter-spacing: normal; } /* ===================================================================== 3. LES BOUTONS-ICÔNES --------------------------------------------------------------------- Carrés, sans rembourrage horizontal. Les mettre dans la liste ci-dessus les aurait allongés en rectangles. ===================================================================== */ .btn-copy-id, .btn-close-modal, .btn-theme, .btn-menu-toggle, .btn-drawer-close, .mm-ico, .rp-fermer, .ent-fermer, .tb-fermer, .mc-modal-close, .btn-share-icon { display: inline-grid; place-items: center; width: var(--b-h-petit); height: var(--b-h-petit); padding: 0; border-radius: var(--b-r-petit); border-width: 1px; border-style: solid; cursor: pointer; transition: var(--b-transition); } /* ===================================================================== 4. LES ÉTATS, POUR TOUT LE MONDE --------------------------------------------------------------------- Ils manquaient à la plupart des classes : un bouton désactivé ressemblait à un bouton actif, et rien ne se voyait au clavier. ===================================================================== */ .btn-add:disabled, .btn-optimize:disabled, .btn-unlock:disabled, .dv-btn:disabled, .mc-btn-plein:disabled, .mc6-btn:disabled, .pa-btn:disabled, .tb-btn:disabled, .rp-faire:disabled, .an-btn-pos:disabled, .btn-google-signin:disabled { opacity: .5; cursor: not-allowed; filter: none; } /* Un contour visible au clavier : sur un outil qu'on utilise avec des gants, la navigation au clavier n'est pas un détail d'accessibilité théorique. */ .btn-add:focus-visible, .btn-optimize:focus-visible, .btn-unlock:focus-visible, .btn-price-order:focus-visible, .btn-hero-primary:focus-visible, .dv-btn:focus-visible, .mc-btn-plein:focus-visible, .mc6-btn:focus-visible, .pa-btn:focus-visible, .tb-btn:focus-visible, .rp-faire:focus-visible, .btn-google-signin:focus-visible, .mm-ico:focus-visible, .btn-theme:focus-visible, .btn-close-modal:focus-visible { outline: 2px solid var(--primary, #E12D2D); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .btn-add, .btn-optimize, .dv-btn, .mc-btn-plein, .mc6-btn, .pa-btn, .tb-btn, .rp-faire, .mm-ico, .btn-theme { transition: none; } }