/** * Boutons de contenu. * * Un seul composant pour les cinq types. La couleur vient de * --couleur-rubrique, jamais du champ : c'est ce qui a permis de * fusionner dix-huit champs en un. */ .boutons { display: flex; flex-wrap: wrap; gap: var(--e-2xs); margin: var(--e-s) 0 0; padding: 0; list-style: none; } .boutons__item { margin: 0; } /* * Deux apparences, et la règle qui les départage tient en une phrase : * un bouton avec pictogramme est un contour sur fond blanc, un bouton * sans pictogramme est un aplat à la couleur de la rubrique. Le gabarit * pose la classe ; il n'y a pas de troisième réglage à saisir. */ .bouton { display: inline-flex; align-items: center; gap: var(--e-2xs); min-height: 2.75rem; /* cible tactile */ padding: var(--e-2xs) var(--e-m); border: 1px solid var(--couleur-rubrique); border-radius: var(--rayon-bouton); /* * Une seule typographie de bouton pour tout le site : Barlow Regular * 16 px, capitale à la seule initiale. C'est ce que rend la version en * ligne dans les grilles de fiches, et c'est déjà celle de « Lire la * suite ». L'approche revient à sa valeur normale — les 0,02 em * d'autrefois n'étaient là que pour aérer des capitales. */ font-family: var(--police-texte); font-size: var(--t-corps); font-weight: var(--graisse-normale); letter-spacing: normal; text-align: center; text-decoration: none; text-transform: none; transition: background-color var(--transition), color var(--transition); } /* Sans pictogramme : l'aplat. --couleur-sur-rubrique porte, pour chaque rubrique, la valeur lisible sur sa teinte — blanc sur les foncées, marine sur l'ambre, le rose et le vert. */ .bouton--plein { background-color: var(--couleur-rubrique); color: var(--couleur-sur-rubrique); } /* Avec pictogramme : le contour sur fond blanc. */ .bouton--contour { background-color: var(--c-blanc); color: var(--couleur-rubrique-texte); } /* * Le survol échange les deux apparences l'une contre l'autre : la * couleur de rubrique ne change pas, seul le sens de lecture s'inverse. * Aucune teinte nouvelle dont il faudrait vérifier le contraste. */ .bouton--plein:hover, .bouton--plein:focus-visible { background-color: var(--c-blanc); color: var(--couleur-rubrique-texte); } .bouton--contour:hover, .bouton--contour:focus-visible { background-color: var(--couleur-rubrique); color: var(--couleur-sur-rubrique); } /* * Sur un fond déjà coloré, l'aplat de rubrique disparaîtrait dans son * propre fond : le bouton passe au blanc, et son texte prend la couleur * de la rubrique. Le déclencheur est une classe posée par le bloc qui * porte la couleur, jamais un réglage de bouton — c'est le contenant qui * sait sur quoi il pose, pas le contenu. */ .sur-couleur .bouton, .section--inverse .bouton { border-color: var(--c-blanc); background-color: var(--c-blanc); color: var(--couleur-rubrique-texte); } .sur-couleur .bouton:hover, .sur-couleur .bouton:focus-visible, .section--inverse .bouton:hover, .section--inverse .bouton:focus-visible { background-color: transparent; color: var(--c-blanc); } /* Le complément de format ou de destination est plus discret que le libellé, sans jamais être masqué : il fait partie du nom accessible. */ .bouton__precision { font-size: var(--t-mini); font-weight: var(--graisse-normale); opacity: 0.85; } /* --------------------------------------------------------------- * Pictogrammes * * Les dessins de la charte, posés en masque : la couleur vient de * « currentcolor », donc du bouton, et le pictogramme s'inverse avec lui * au survol sans qu'un second fichier soit chargé. Les adresses des * fichiers sont fabriquées en absolu par PHP — une URL relative dans une * propriété personnalisée se résout contre la feuille qui l'emploie, pas * contre celle qui la déclare. * * Décoratifs — le libellé porte l'information — donc invisibles aux * lecteurs d'écran, et toujours à droite : la maquette ne les place * jamais ailleurs. * --------------------------------------------------------------- */ .bouton__picto { flex: none; align-self: center; height: 1.25rem; aspect-ratio: var(--picto-proportion, 1); background-color: currentcolor; -webkit-mask-image: var(--picto-fichier); mask-image: var(--picto-fichier); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Une proportion par dessin, relevée dans le viewBox de chaque fichier : ils ne sont pas tous carrés, et « contain » seul laisserait des vides. */ .bouton__picto--podcast { --picto-fichier: var(--picto-podcast-fichier); --picto-proportion: 36.34 / 40; } .bouton__picto--formulaire { --picto-fichier: var(--picto-formulaire-fichier); --picto-proportion: 40.04 / 40; } .bouton__picto--en-ligne { --picto-fichier: var(--picto-en-ligne-fichier); --picto-proportion: 40 / 24.4; } .bouton__picto--en-pdf { --picto-fichier: var(--picto-en-pdf-fichier); --picto-proportion: 40 / 31.32; } .bouton__picto--contact { --picto-fichier: var(--picto-contact-fichier); --picto-proportion: 39.51 / 40; } /* --------------------------------------------------------------- * Le déclencheur d'un repli — « Lire la suite » * * C'est le « summary » d'un « details » natif : état annoncé, clavier * fonctionnel, texte trouvable par la recherche du navigateur, aucun * script. Il vit ici et non dans la feuille des motifs, parce que trois * blocs s'en servent — présentation, thématique, liste de fiches — et * que le dernier s'affiche sur des pages où les motifs ne sont pas * chargés. Une mécanique partagée ne vit pas dans une feuille * conditionnelle ; la leçon avait déjà été payée sur les chevrons. * * C'est un bouton plein à la couleur de la rubrique. Le texte qui s'y * pose n'est pas choisi à la main : --couleur-sur-rubrique porte, pour * chaque rubrique, la valeur lisible sur son aplat — blanc sur les * teintes foncées, marine sur les claires, l'ambre et le rose. C'est le * même jeton que les autres boutons, donc la même décision prise une * seule fois. * * Pas de pictogramme, et une capitale à la seule initiale : c'est un * libellé de phrase, pas une étiquette. * --------------------------------------------------------------- */ .declencheur { display: inline-flex; align-items: center; min-height: 2.75rem; /* cible tactile */ padding: var(--e-2xs) var(--e-m); border: 1px solid var(--couleur-rubrique); border-radius: var(--rayon-bouton); background-color: var(--couleur-rubrique); color: var(--couleur-sur-rubrique); font-family: var(--police-texte); font-size: var(--t-corps); font-weight: var(--graisse-normale); letter-spacing: normal; text-transform: none; cursor: pointer; transition: background-color var(--transition), color var(--transition); } .declencheur::marker, .declencheur::-webkit-details-marker { content: ""; display: none; } /* * Le plein se vide au survol : la couleur de rubrique ne change pas, * seul le sens de lecture s'inverse. Aucune teinte nouvelle dont il * faudrait vérifier le contraste. */ .declencheur:hover, .declencheur:focus-visible { background-color: transparent; color: var(--couleur-rubrique-texte); } .declencheur:focus-visible { outline: var(--focus-epaisseur) solid var(--couleur-focus); outline-offset: var(--focus-decalage); } /* --------------------------------------------------------------- * Le bloc « Bouton » * * Une rangée de boutons posée seule dans la page. Elle prend la marge * des blocs, --e-section, et non l'écart entre deux voisins : un bouton * seul est un bloc, pas un paragraphe de plus. * * La rangée elle-même porte déjà sa marge haute — « .boutons » en pose * une pour se décoller du texte qu'elle suit à l'intérieur d'un bloc. * Ici il n'y a pas de texte à suivre : elle est annulée, sans quoi les * deux s'ajouteraient. * --------------------------------------------------------------- */ .bloc-bouton { margin-block: var(--e-section); } .bloc-bouton .boutons { margin-top: 0; } .bloc-bouton--centre .boutons { justify-content: center; } .bloc-bouton--droite .boutons { justify-content: flex-end; }