/* ========================================================================= LE BOUTON DU SITE — UNE SEULE FORME, PARTOUT La pilule aigue-marine au disque flechu, demandee sur tout le site. Elle remplace trois traitements differents qui coexistaient : - `.cta-button` : pilule bleue a bord turquoise, en majuscules ; - `.submit-button` : pilule bleue pleine, sans bord ; - `.bouton` du carrousel, importe de la refonte. Trois formes pour une seule intention -- « cliquez ici » -- c'est trois fois la chance d'en oublier une le jour ou la couleur change. ⚠ LE TEXTE EST SOMBRE, PAS BLANC Mesure : blanc sur #4FE0C8 donne 1,64:1. C'est illisible, et ce n'est pas une question de gout -- le seuil AA est a 4,5:1. L'encre du site sur la meme teinte donne 9,60:1. Le bouton garde donc exactement la couleur demandee, et son texte descend. LA FLECHE EST DANS SON DISQUE, ET C'EST ELLE QUI BOUGE Une fleche posee nue a cote d'un mot est le reglage par defaut. Dans son propre disque, elle devient une piece de l'objet -- et au survol, c'est ELLE qui se deplace, a l'interieur du bouton, plutot que le bouton entier qui se souleve. Le mouvement se passe dans la matiere. Le disque est un ::after et non un : les trois classes visees sont posees sur des elements ecrits a des dizaines d'endroits, dans le gabarit du site en ligne comme dans les partiels. Une pseudo-element ne demande a personne de retoucher son balisage. ========================================================================= */ :root { --menthe: #4FE0C8; --menthe-sourde: #3ECDB5; /* la meme, un cran plus dense, pour le survol */ /* ⚠ CE JETON AVAIT DISPARU Il a ete emporte par le retrait de `--menthe-profond`, qui le suivait dans ce bloc. Il est employe DOUZE fois -- le texte de chaque bouton, de chaque pastille de reseau, du numero de page courant. Une `var()` sans definition rend la declaration invalide : la couleur retombait sur l'heritage, et personne ne le voyait parce que l'heritage donnait a peu pres la meme chose. Mesure sur la pagination : rgb(58,42,29) la ou #0B2B26 etait demande. C'est l'encre a poser SUR l'aigue-marine : 9,60:1, contre 8,39:1 pour l'encre du site -- les deux passent, celle-ci est simplement accordee au vert. */ --sur-menthe: #0B2B26; /* LE TRACE DE LA FLECHE, ECRIT UNE FOIS Il l'etait deux, dans `.cta-button::after` et `.cta-button-small::after`, et le lien de detail en aurait fait une troisieme. Un trace recopie est un trace qui divergera : il suffit d'en corriger un. */ --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230B2B26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L9 3M9 3H4M9 3v5'/%3E%3C/svg%3E"); /* LA COULEUR DE L'ENTREE OUVERTE, SUR FOND CLAIR C'est #0285a8, retire du site avec l'autre bleu -- il revient ICI et nulle part ailleurs, pour une raison qui se mesure : aigue-marine sur blanc 1,64:1 illisible #0285a8 sur blanc 4,27:1 AA en demande 4,5 pour du texte encre sur blanc 13,74:1 mais ne dit pas « ouvert » 4,27 reste sous le seuil. Ce qui l'admet ici, et seulement ici : le libelle de l'entree ouverte est deja connu du lecteur -- c'est la page qu'il regarde -- les autres entrees sont a 6,36:1, et la graisse 600 double le signal. Le nom dit son unique emploi : ce n'est pas une couleur d'action, on ne s'en sert pas ailleurs. Sur la barre transparente du bandeau, le fond est une photo sombre et c'est l'aigue-marine qui sert. */ --menu-actif: #0285a8; } .cta-button, .submit-button, .carrousel .bouton { display: inline-flex; align-items: center; gap: 0.5rem; /* MESURE, PAS ESTIME Bouton du carrousel, reference contre v3 : 14 px contre 16 px de police, et 8 px contre 17,6 px de retrait a droite -- le disque de la fleche y est donc plus pres du texte. Les hauteurs se suivaient deja (54 et 55). */ padding: 0.75rem 0.5rem 0.75rem 2rem; border: 0; border-radius: 999px; background-color: var(--menthe); color: var(--sur-menthe); font-family: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; /* Les majuscules de `.cta-button` sautent : sur une pilule courte elles allongent le mot sans rien ajouter, et « PRENDRE RENDEZ-VOUS » se coupait en deux lignes sous 400 px. */ text-transform: none; text-decoration: none; cursor: pointer; /* On nomme ce qui bouge. « all » ferait surveiller au navigateur des proprietes qu'on n'a pas voulu animer. */ transition: background-color 200ms cubic-bezier(0.32, 0.72, 0, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } /* Le disque flechu. La fleche est un fond SVG plutot qu'un glyphe : « ↗ » ne tombe pas au meme endroit d'une police a l'autre, et se decale du cercle. */ .cta-button::after, .submit-button::after, .carrousel .bouton::after { content: ""; flex: 0 0 auto; /* 30 px : c'est le disque qui fixe la hauteur du bouton, le texte etant plus bas que lui. A 28 px la pilule faisait 52 de haut contre 54 a la reference. */ width: 1.875rem; height: 1.875rem; border-radius: 50%; background-color: rgb(11 43 38 / .16); background-image: var(--fleche); background-repeat: no-repeat; background-position: center; background-size: 0.85rem 0.85rem; transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); } @media (hover: hover) { .cta-button:hover, .submit-button:hover, .carrousel .bouton:hover { background-color: var(--menthe-sourde); color: var(--sur-menthe); /* Ni translation ni ombre : c'est la fleche qui repond, pas le bouton. */ transform: none; box-shadow: none; } .cta-button:hover::after, .submit-button:hover::after, .carrousel .bouton:hover::after { transform: translate(2px, -2px); } } /* Sans cet etat, le clic ne se sent pas, surtout au doigt. */ .cta-button:active, .submit-button:active, .carrousel .bouton:active { transform: scale(0.97); } /* Le focus clavier doit se voir sur la menthe comme sur le blanc : deux anneaux accoles, l'un clair l'autre sombre, tranchent sur n'importe quel fond sans rien savoir de lui. */ .cta-button:focus-visible, .submit-button:focus-visible, .carrousel .bouton:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sur-menthe); } /* Le bouton d'envoi du formulaire occupe sa ligne : il est le dernier element d'une colonne de champs pleine largeur, et une pilule de 200 px flottant a gauche sous un champ de 100 % ne se lit pas comme sa conclusion. */ .submit-button { justify-content: center; width: 100%; } /* Le disque de la refonte, quand il est present dans le balisage, cede la place au ::after : deux fleches vaudraient mieux qu'aucune, mais pas de beaucoup. */ .carrousel .bouton__disque { display: none; } /* LA VARIANTE COURTE — UN ECART DE TAILLE, PAS UNE AUTRE PILULE « Me contacter », sur la page Accompagnement, se pose au fil du texte et non en fin de section : la pilule pleine y pese trop. Elle garde donc la meme forme, la meme couleur et le meme disque, et ne change que d'echelle. Sur le site en ligne c'etait une quatrieme definition, avec sa propre couleur et son propre survol -- une de plus a corriger le jour ou la teinte bouge. */ .cta-button-small { display: inline-flex; align-items: center; gap: 0.5rem; /* Le petit bouton n'est pas un autre bouton : c'est le meme, moins retire. Il portait 0.9rem (14,4 px) -- une taille qui ne correspond a rien ailleurs sur le site, et qui le faisait paraitre PLUS gros que la pilule pleine, laquelle est a 14. Meme corps, meme graisse ; seuls les retraits et le disque changent. */ padding: 0.5rem 0.4rem 0.5rem 1.25rem; border: 0; border-radius: 999px; background-color: var(--menthe); color: var(--sur-menthe); font-family: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 200ms cubic-bezier(0.32, 0.72, 0, 1); } .cta-button-small::after { content: ""; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: rgb(11 43 38 / .16); background-image: var(--fleche); background-repeat: no-repeat; background-position: center; background-size: 0.7rem 0.7rem; transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); } @media (hover: hover) { .cta-button-small:hover { background-color: var(--menthe-sourde); color: var(--sur-menthe); } .cta-button-small:hover::after { transform: translate(2px, -2px); } } .cta-button-small:active { transform: scale(0.97); } /* ============================================ LE RETOUR EN HAUT ⚠ IL ETAIT DEFINI DEUX FOIS, ET DIFFEREMMENT `css/style.css` en faisait un `inline-block` de 12/15 px de retrait avec `border-radius: 50%` -- sur une boite qui n'est pas carree, 50 % donne une ellipse, pas un cercle : il mesurait 50 px de haut sur les pages interieures. `css/blog.css` en faisait un carre de 40 px, correctement rond. Selon la page, deux boutons differents pour le meme geste. Une seule definition, dans la famille : disque de 44 px, aigue-marine, encre dessus (8,39:1), et le survol des autres boutons. */ .top-button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background-color: var(--menthe); color: var(--sur-menthe); font-size: 0.875rem; text-decoration: none; cursor: pointer; transition: background-color 200ms cubic-bezier(0.32, 0.72, 0, 1), transform 200ms cubic-bezier(0.32, 0.72, 0, 1); } @media (hover: hover) { .top-button:hover { background-color: var(--menthe-sourde); transform: translateY(-2px); } } .top-button:active { transform: scale(0.97); } .top-button:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sur-menthe); } .cta-button-small:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sur-menthe); }