/* ================================================================= Youen Frémont — feuille de base — sommaire des huit feuilles 1. Couleurs ┐ 2. Surfaces │ style.css 3. Base │ 4. Utilitaires ┘ 5. En-tête ┐ 6. Hero │ entete-hero.css 7. Corps et panneau blanc ┘ 8. Section projets ┐ projets.css 9. Titre de page et présentation ┘ 10. Page projet — planches ┐ planches.css 11. Entrée et sortie d'une page ┘ 12. Section contact ┐ contact-pied.css 13. Pied de page ┘ 14. Menu plein écran — menu.css 15. (retiré — le rideau d'arrivée a cédé la place au générique, § 16) 16. (retiré le 2026-09-24 — le générique d'ouverture n'a plus lieu d'être) Tablette et au-delà, planches à l'horizontale — ecrans.css Sept fichiers, chargés dans cet ordre par base.njk (découpe du 2026-09-19). ================================================================= */ /* ----------------------------------------------------------------- 1. Couleurs ----------------------------------------------------------------- Tout le site tient en huit valeurs écrites en dur : le noir, le blanc, et les six couples de la charte. Aucun gris n'est plus choisi à l'œil — libellés secondaires, filets, fonds discrets et voiles sont tous dérivés par color-mix de l'encre de la surface où ils se trouvent. Deux couleurs, deux rôles qui ne se croisent jamais. PRIMAIRE — --aplat, le fond de la déclinaison. C'est toujours un FOND, jamais du texte. Posé sur du blanc il tombe sous 4,5:1 sur trois déclinaisons (lime 1,32, magenta 3,61, rouge 3,84) : il n'entre sur le papier que par remplissage — pastille, bouton, emplacement d'image —, avec --aplat-texte dessus. Le couple aplat / aplat-texte est contrasté par construction sur les six déclinaisons, jamais sous 5,47:1. SECONDAIRE — --aplat-encre, la seconde couleur du couple, celle du logo. Elle ne vit que SUR l'aplat, et seulement en grand : titre d'affiche, remplissage de bouton, logo quand le SVG arrivera. Elle ne descend jamais sur le papier — le blanc du couple violet y serait invisible — ni sur du texte courant : trois couples sont sous 3:1 même pour du gros texte (rouge/bleu 2,70, lime/magenta 2,75, magenta/lime 2,47). TODO — écart assumé sur ton instruction du 2026-08-14. Trois valeurs d'encre à peine assombries suffiraient à atteindre 3:1. NEUTRES — --noir et --blanc, et eux seuls. Ils portent le texte courant, les libellés, les filets et les voiles. Toute autre valeur neutre du site est un voile de l'un des deux. Chaque page porte sa déclinaison, décidée une fois pour toutes : l'accueil le vert, Work le violet, contact le bleu depuis le 2026-09-08 — les trois couples dont l'encre tient au-dessus de 3:1, puisque c'est elle qui écrit le nom sur le hero. Une page projet garde celle de son fichier .md. Rien n'est tiré au sort, et la couleur est la même avec et sans JavaScript. Le violet de :root est le repli d'une page qui n'en nommerait aucune. Les huit teintes, le noir et le blanc sont lus dans le nuancier vectoriel reçu le 2026-08-20 (charte/logo/palette.svg). Ce ne sont plus des valeurs relevées à l'œil : elles font loi. Le relevé et les mesures de contraste sont dans charte/charte.md. ----------------------------------------------------------------- */ :root { --noir: #000000; --blanc: #ffffff; /* Gamme de gris, validée le 2026-08-19. Elle complète les six couples et le noir et le blanc, et ne vit que sur le papier : aucun gris fixe ne tient sur les six aplats — le --gris-4 tombe à 1,06:1 sur le violet, le --gris-1 à 1,18:1 sur le lime. Sur la couleur, les gris restent des voiles d'encre. Les rapports donnés sont ceux sur le blanc. */ --gris-1: #f2f2f2; /* fond discret — 1,12:1 */ --gris-2: #d9d9d9; /* emplacement d'image — 1,41:1 */ --gris-3: #b3b3b3; /* filet — 2,18:1 */ --gris-4: #595959; /* libellé atténué — 7,00:1 */ --aplat: #6e15d3; --aplat-encre: var(--blanc); --aplat-encre-texte: var(--noir); --aplat-texte: var(--blanc); /* Une ombre portée n'est pas une couleur : c'est du noir dilué, quelle que soit la surface. */ --ombre: 0 0.75rem 1.75rem color-mix(in srgb, var(--noir) 14%, transparent); /* Typographie — Fractul Variable, la fonte de la charte, servie par Adobe Fonts (kit brd7evx, chargé dans base.njk). Fonte variable, axe de graisse 50 à 900 : les trois graisses ci-dessous sortent du même fichier. TODO — écart assumé avec CLAUDE.md, qui impose des .woff2 auto-hébergés : la licence webfont d'Adobe ne le permet pas. */ --police: "fractul-variable", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Police de titrage — revenue à celle du corps le 2026-09-23, sur ta demande : Noir Pro (choisie le 2026-09-08) est abandonnée, Fractul porte désormais les titres comme le reste du texte. Le token reste distinct des huit règles qui le citent, au cas où une police de titrage reviendrait. */ --police-titre: var(--police); /* Un cran sous l'échelle, ajouté le 2026-09-24 sur ta demande : la ligne d'info du carrousel de l'accueil (rôle · titre · année), « un peu plus petite ». Elle seule s'en sert. 10 px d'abord, puis 9 px le même jour, sur ta demande, pour cette ligne seulement. */ --texte-xxs: 0.5625rem; --texte-xs: 0.6875rem; --texte-s: 0.8125rem; --texte-m: 1rem; --texte-l: clamp(1.75rem, 5.5vw, 3.5rem); /* Le titre d'un projet est plus petit que les titres de section, relevé sur la maquette et validé avec le reste de l'échelle le 2026-08-26. */ --texte-titre-projet: clamp(1.75rem, 4.5vw, 3rem); /* Titre d'une carte, posé sur la photo : assez gros pour tenir la carte à lui seul, assez petit pour qu'un titre de trois mots n'en déborde pas. Validé avec le reste de l'échelle le 2026-08-26. */ --texte-titre-carte: clamp(1.125rem, 2.4vw, 1.75rem); --texte-xl: clamp(2.5rem, 9.5vw, 8.5rem); /* Titre d'une planche de projet : il se mesure à la hauteur de l'écran, pas à sa largeur — c'est de déborder à droite qui fait l'effet. Les capitales occupent environ 72 % du corps, donc un peu plus de la moitié de l'écran. Monté de 84 à 100 vh le 2026-08-20, avec une approche resserrée d'autant : la fonte étant variable, les lettres se rapprochent au lieu de maigrir, et la planche ne s'allonge pas malgré le corps plus grand. */ --texte-planche-titre: clamp(5rem, 100vh, 62rem); --texte-signature: clamp(3rem, 17vw, 12rem); --texte-menu: clamp(2.5rem, 11vw, 7rem); --graisse-normale: 400; --graisse-moyenne: 500; --graisse-forte: 700; --interligne-titre: 0.92; --interligne-texte: 1.45; --approche-titre: -0.02em; /* Un titre de planche est vu de très près, et à ce corps l'approche courante laisse des trous entre les lettres. Il a donc la sienne. */ --approche-titre-planche: -0.05em; --approche-libelle: 0.06em; /* Espacements */ --pas-1: 0.25rem; --pas-2: 0.5rem; --pas-3: 0.75rem; --pas-4: 1rem; --pas-5: 1.5rem; --pas-6: 2rem; --pas-7: 3rem; --pas-8: 4.5rem; --pas-9: 7rem; --marge-page: clamp(1rem, 4vw, 3.5rem); /* La marge d'une planche de visuels — cinq crans, du bord à bord à l'aplat qui respire largement. Une planche nomme le sien dans `marge:` ; sans quoi elle garde celui de sa disposition, réglé dans le gabarit. La valeur est en pourcentage pour suivre la largeur de l'écran, et elle vaut à la fois le retrait autour de la planche et l'écart entre ses images : ce qu'on règle, c'est la quantité d'aplat qu'on voit, pas deux réglages distincts. `aucune` n'est pas zéro : un filet de la couleur de la page sépare toujours deux images collées, sans quoi elles se lisent comme une seule. */ --planche-marge-aucune: var(--pas-1); --planche-marge-fine: 1.5%; --planche-marge-moyenne: 3%; --planche-marge-large: 5%; --planche-marge-immense: 9%; /* La taille des images d'une diagonale — quatre crans, en part de la hauteur de planche. C'est un plafond, jamais une consigne : la photo garde ses proportions et ne fait que s'y inscrire, une verticale montant plus haut qu'une horizontale ne s'étale. `moyenne` vaut le quart de planche d'avant, à la marge près — c'est le rendu que la diagonale a toujours eu. Au-delà de la moitié, les deux images se croisent en hauteur : elles ne se touchent jamais pour autant, chacune tenant sa colonne, et c'est le seul moyen de les faire vraiment grandir. La demi-hauteur était sinon un plafond qu'aucune marge ne desserrait. */ --planche-taille-petite: 34%; --planche-taille-moyenne: 48%; --planche-taille-grande: 62%; --planche-taille-immense: 76%; --taille-bouton: 2.75rem; /* Air au-dessus des boutons, puis hauteur totale de l'en-tête. La barre du menu reprend les deux : les boutons tombent exactement au même endroit. */ --decalage-entete: 2rem; /* Entrée et sortie d'une page projet. Assez court pour ne pas retarder la navigation, assez long pour qu'on voie la page céder la place. */ --duree-page: 0.35s; /* Le volet d'aplat d'une page à l'autre. Porté de 0,25 à 0,4 s le 2026-08-26 : à 0,25 le mouvement clignotait plus qu'il ne se lisait, sans pour autant faire gagner du temps — la page suivante n'arrive pas plus vite. */ --duree-volet: 0.4s; --hauteur-entete: calc(var(--decalage-entete) + var(--taille-bouton) + var(--pas-4)); --largeur-pilule: 10.75rem; --duree-menu: 0.45s; /* Le carrousel du bloc « Travaillons ensemble » : le temps qu'une image reste, puis la durée du fondu vers la suivante. Le script lit la première — en secondes, il n'entend pas les millisecondes. */ --duree-carrousel: 4s; --duree-carrousel-fondu: 0.8s; /* Flou des voiles — en-tête et titre de carte. Au-delà de 8 px, l'en-tête étale visiblement le haut d'une photo bord à bord. */ --hauteur-logo: 30vh; --flou-voile: 8px; /* Titre d'une carte, posé sur la photo : le flou détache les lettres du fond, le voile garantit le contraste — le flou seul ne rattrape pas un plan clair. Le voile reprend le fond de la surface — blanc sur le papier, l'aplat sur la couleur. C'est le seul fond dont la charte garantisse qu'il contraste avec l'encre du titre, quelle que soit la page et quelle que soit la photo. Mettre la proportion du voile à `0%` pour ne garder que le flou. */ /* De combien une carte monte en paraissant au défilement. */ --montee-carte: 4rem; /* Plus léger que le voile de l'en-tête depuis le 2026-08-20, et détaché de lui : une carte est petite, un flou de 8 px y noyait la photo au lieu de seulement détacher les lettres. L'en-tête, qui court sur toute la largeur de l'écran, garde les siens. */ --flou-titre-carte: 4px; --voile-titre-carte: 38%; /* Le rôle et l'année s'écrivent en blanc depuis le 2026-08-20. Leur voile change donc de camp : il est pris sur le noir et non sur le fond de la surface, sans quoi ce serait du blanc sur du blanc — 1,28:1, invisible. 55 %, et pas moins : c'est la valeur qui tient le blanc au-dessus de 4,5:1 quelle que soit l'image dessous, le pire cas étant une photo entièrement blanche, où l'on tombe à 4,86:1. Sur l'emplacement gris d'aujourd'hui, 6,13:1. */ --voile-legende-carte: 55%; /* Rayons */ --rayon-s: 6px; --rayon-trait: 1px; /* l'arrondi d'un filet, pas d'une boîte */ --rayon-m: 14px; --rayon-l: 28px; --rayon-pilule: 999px; } /* Les six déclinaisons de la charte. C'est le seul endroit du site où ces couleurs sont écrites. Eleventy pose data-aplat sur à la construction, d'après le champ de la page ; une page qui n'en nommerait aucune garde le violet de :root. Les blocs ne visent volontairement pas :root — un élément quelconque peut donc porter data-aplat et redéfinir le couple pour lui seul. C'est ce dont se sert la page de référence des styles, qui montre les six couples côte à côte sans recopier une valeur. La spécificité reste la même que celle de :root, et l'ordre du fichier suffit : ces blocs viennent après, ils l'emportent sur . Le rapport donné est celui de l'encre du texte sur le fond, jamais celui du logo, qui ne porte pas de texte. */ /* Les deux rapports en commentaire : celui du texte courant sur le fond, puis celui du libellé d'un bouton sur son remplissage en encre. */ [data-aplat="rouge"] { --aplat: #fd1c16; --aplat-encre: #0504d0; --aplat-encre-texte: var(--blanc); /* 10,85:1 */ --aplat-texte: var(--noir); /* 5,35:1 */ } [data-aplat="violet"] { --aplat: #6e15d3; --aplat-encre: var(--blanc); --aplat-encre-texte: var(--noir); /* 21,00:1 */ --aplat-texte: var(--blanc); /* 7,75:1 */ } [data-aplat="lime"] { --aplat: #bbf424; --aplat-encre: #fd0094; --aplat-encre-texte: var(--noir); /* 5,60:1 */ --aplat-texte: var(--noir); /* 16,08:1 */ } [data-aplat="bleu"] { --aplat: #0504d0; --aplat-encre: #86d8e5; --aplat-encre-texte: var(--noir); /* 12,97:1 */ --aplat-texte: var(--blanc); /* 10,85:1 */ } [data-aplat="vert"] { --aplat: #00472c; --aplat-encre: #ffe933; --aplat-encre-texte: var(--noir); /* 16,96:1 */ --aplat-texte: var(--blanc); /* 10,84:1 */ } [data-aplat="magenta"] { --aplat: #fd0094; --aplat-encre: #bbf424; --aplat-encre-texte: var(--noir); /* 16,08:1 */ --aplat-texte: var(--noir); /* 5,60:1 */ } /* ----------------------------------------------------------------- 2. Surfaces ----------------------------------------------------------------- Le site n'a que deux fonds : la couleur et le papier. Chaque bloc déclare sur lequel des deux il est posé, et tout ce qu'il contient s'y réfère — aucun composant ne nomme le noir, le blanc ou l'aplat directement. C'est ce qui permet à un bouton, une pastille ou un filet d'être écrits une seule fois et de rester lisibles des deux côtés. --fond le fond de la surface --encre le texte qui s'y lit — noir ou blanc, toujours --encre-attenuee libellés, crédits, mentions --trait filets --pastille fonds discrets, un voile d'encre --titre la couleur des titres : l'encre du couple sur l'aplat, l'aplat de la page sur le papier --remplissage un élément plein posé sur la surface : il prend la couleur qui n'est pas la sienne — l'aplat sur le papier, l'encre du couple sur l'aplat --remplissage-texte son libellé --emplacement un emplacement d'image en attente --emplacement-texte ce qui s'écrit dessus --emplacement-texte-attenue son libellé secondaire Les deux jeux sont écrits ici et nulle part ailleurs. Ajouter une surface — une bande noire pour une façade vidéo, par exemple — c'est ajouter un bloc de dix lignes, et rien d'autre à toucher. */ /* La couleur est la surface par défaut du document : c'est elle qu'on voit derrière le hero, sous le panneau et au-delà du bas de page. */ :root, .surface-couleur { --fond: var(--aplat); --encre: var(--aplat-texte); /* Le voile ne descend pas sous 0,8 : c'est la valeur qui tient AA sur les six aplats, le rouge compris, le plus serré des six à 4,67:1. */ --encre-attenuee: color-mix(in srgb, var(--aplat-texte) 80%, transparent); --trait: color-mix(in srgb, var(--aplat-texte) 32%, transparent); /* 8 % et pas davantage : une pastille porte du texte, et elle éclaircit le fond sous lui. À 16 %, les étiquettes d'un projet tombaient à 4,03:1 sur le rouge et 4,26:1 sur le magenta, sous le minimum AA. À 8 %, le plus serré des six est à 4,71:1. */ --pastille: color-mix(in srgb, var(--aplat-texte) 8%, transparent); /* Les titres prennent la couleur, décision du 2026-08-19. Sur l'aplat c'est l'encre du couple — donc l'écart connu à 2,47–2,75:1 sur rouge, lime et magenta, assumé le même jour. Le texte courant, lui, garde son encre. */ --titre: var(--aplat-encre); --remplissage: var(--aplat-encre); --remplissage-texte: var(--aplat-encre-texte); /* Un emplacement vide posé sur l'aplat se creuse d'un voile d'encre : un gris franc y ferait un corps étranger. Il ne porte jamais de texte sur cette surface — les cartes, elles, sont sur le papier —, il peut donc se marquer plus que la pastille. */ --emplacement: color-mix(in srgb, var(--aplat-texte) 16%, transparent); --emplacement-texte: var(--aplat-texte); --emplacement-texte-attenue: color-mix(in srgb, var(--aplat-texte) 80%, transparent); } /* Le papier : le panneau blanc, celui qui porte les images. Il reste neutre — rien ne doit concurrencer une photo —, et la couleur n'y entre que par remplissage : jamais du texte en aplat, dont trois déclinaisons sur six tombent sous 4,5:1 sur du blanc. L'en-tête emprunte ces valeurs sans se peindre quand le panneau passe sous elle, et son fond à elle est un voile flouté (section 5). Elle est nommée ici plutôt que recopiée là-bas, pour qu'il n'y ait qu'un seul papier. */ .surface-papier, .entete[data-papier]:not(.entete--planches) { --fond: var(--blanc); --encre: var(--noir); --encre-attenuee: var(--gris-4); --trait: var(--gris-3); --pastille: var(--gris-1); /* Sur le papier, la couleur de la page est le seul aplat disponible : c'est elle qui écrit les titres. Les trois pages à panneau blanc sont fixées sur violet, bleu et vert, soit 7,40 à 11,82:1 sur du blanc. */ --titre: var(--aplat); --remplissage: var(--aplat); --remplissage-texte: var(--aplat-texte); /* Un emplacement d'image en attente reste neutre : en aplat, six cartes vides faisaient un mur de couleur qui ne dit rien du travail. */ --emplacement: var(--gris-2); --emplacement-texte: var(--encre); --emplacement-texte-attenue: var(--encre-attenuee); } .surface-couleur, .surface-papier { background-color: var(--fond); color: var(--encre); } /* ----------------------------------------------------------------- 3. Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Le document est sur la surface couleur : c'est elle qu'on voit derrière le hero et au-delà du bas de page, si l'élan du défilement dépasse. */ body { margin: 0; background-color: var(--fond); color: var(--encre); font-family: var(--police); font-size: var(--texte-m); line-height: var(--interligne-texte); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, dl, dd, figure { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } /* Tout ce qui est cliquable s'annonce par la couleur, au survol comme au focus clavier : c'est le trait sous le libellé qui la prend, pas le libellé. L'aplat est un fond — en texte sur du blanc, trois déclinaisons sur six tombent sous 4,5:1. Le mot garde donc son encre, et rien ne perd en lisibilité. */ a:hover, a:focus-visible { text-decoration: underline; text-decoration-color: var(--remplissage); text-decoration-thickness: 0.14em; text-underline-offset: 0.25em; } /* Deux endroits font exception : le pied de page et la liste de contact, les deux seules listes de liens en texte courant du site. Le trait s'y dessine de la gauche vers la droite au lieu de paraître d'un bloc — `text-decoration` n'est pas animable, d'où le dégradé posé en fond, dont la largeur, elle, l'est. Filets et en-tête gardent leur signal propre, le menu son numéro. Le trait est là dans les deux cas : sans animation, il paraît d'un coup, et rien n'est perdu de ce qui signale un lien. */ .pied a, .liste-contact a, .liens-sociaux a, .mention-legale a { background-image: linear-gradient(var(--remplissage), var(--remplissage)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 0.14em; padding-block-end: 0.25em; } .pied a:hover, .pied a:focus-visible, .liste-contact a:hover, .liste-contact a:focus-visible, .liens-sociaux a:hover, .liens-sociaux a:focus-visible, .mention-legale a:hover, .mention-legale a:focus-visible { background-size: 100% 0.14em; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* Les éléments de grille ignorent hidden si display n'est pas repris. */ [hidden] { display: none; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Les ancres ne doivent pas atterrir sous l'en-tête fixe. */ [id] { scroll-margin-top: calc(var(--hauteur-entete) + var(--pas-4)); } /* Cibles de focus programmatiques — le contenu principal, le panneau du menu : elles reçoivent le focus sans que l'utilisateur ait tabulé, pas d'anneau. */ [tabindex="-1"]:focus { outline: none; } /* Un bouton plein porte le libellé qui se lit sur son remplissage, pas sur la surface autour : un anneau en currentColor s'y confondrait. Il se cale donc sur l'encre de la surface, qui est justement ce qui s'y lit. L'anneau reste volontairement dans l'encre et non dans la couleur : c'est le seul repère du clavier, et sur trois déclinaisons la couleur passe sous les 3:1 attendus d'un indicateur. La couleur, elle, arrive par l'état de survol, que le focus déclenche aussi — voir chaque composant. */ .bouton-rond:focus-visible, .bouton-pilule:focus-visible, .bouton-appel:focus-visible { outline-color: var(--encre); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* Le sautillement de la flèche : court, lent, et il s'arrête de lui-même au bout de quelques allers. Une indication qui bouge sans fin dans un coin de l'écran devient un tic, et le critère 2.2.2 du WCAG demande de pouvoir arrêter ce qui bouge plus de cinq secondes — six allers de 1,4 s tiennent sous ce seuil sans rien demander à personne. */ @keyframes hero-sautille { 0%, 100% { translate: 0 0; } 50% { translate: 0 0.4rem; } } /* Trois allers de 1,4 s font 4,2 secondes, puis la flèche s'efface pour de bon. Elle a dit ce qu'elle avait à dire ; passé ce délai elle n'est plus une invitation mais un tic. Le sautillement déplace, le retrait efface : deux propriétés différentes, les deux animations cohabitent sans se marcher dessus. Et c'est la flèche qui bouge, pas le paragraphe — `translate` sur le paragraphe écraserait son centrage. Sept allers faisaient dix secondes, au-dessus des cinq du critère 2.2.2 du WCAG ; ramenés à trois le 2026-09-19 sur ta décision, le mouvement passe sous le seuil et l'écart est refermé. Le réglage système de mouvement réduit annule tout. */ @keyframes hero-invite-retrait { to { opacity: 0; visibility: hidden; } } .hero__fleche { animation: hero-sautille 1.4s ease-in-out 3 both, hero-invite-retrait 600ms ease 4.2s forwards; } } /* ----------------------------------------------------------------- 4. Utilitaires ----------------------------------------------------------------- */ .lien-evitement { position: absolute; top: var(--pas-2); left: var(--pas-2); z-index: 30; padding: var(--pas-2) var(--pas-4); background-color: var(--blanc); color: var(--noir); font-size: var(--texte-s); transform: translateY(-200%); } .lien-evitement:focus { transform: translateY(0); } /* Libellé de repérage tant que le contenu réel n'est pas fourni. Il suit la surface : plus besoin d'une règle à part pour les pages projet, où le gris était illisible sur la couleur. */ .a-renseigner { color: var(--encre-attenuee); font-style: italic; text-transform: none; letter-spacing: 0; } .mention-legale, .pied__retour, .hero__pied, .pastille-dispo { font-size: var(--texte-xs); letter-spacing: var(--approche-libelle); text-transform: uppercase; } /* Pilule et bouton rond : mêmes dimensions dans l'en-tête et dans le menu, pour que l'ouverture ne déplace rien. Un bouton plein prend le remplissage de sa surface — l'aplat sur le papier, l'encre du couple sur l'aplat — et le libellé qui s'y lit. Une seule règle pour les deux côtés, au lieu du gris qui servait partout. */ .bouton-pilule, .bouton-rond, .bouton-appel { background-color: var(--remplissage); color: var(--remplissage-texte); } /* Le survol change de camp : le bouton reste plein et passe à l'encre de la surface. Creuser le bouton l'aurait laissé à 2,5:1 du fond sur les trois couples les plus serrés, donc quasi invisible. */ .bouton-pilule:hover, .bouton-pilule:focus-visible, .bouton-rond:hover, .bouton-rond:focus-visible, .bouton-appel:hover, .bouton-appel:focus-visible { text-decoration: none; background-color: var(--encre); color: var(--fond); } .bouton-pilule { display: inline-flex; align-items: center; justify-content: center; min-width: var(--largeur-pilule); min-height: var(--taille-bouton); padding: 0 1.5em; /* Comme .bouton-rond : la pilule n'était jusqu'ici qu'un lien, et le cadre en relief que les navigateurs posent sur un