/* * LE VERRE ET LA TEINTE — les boutons de l'app, sur konkyr.fr. * * Sa demande du 2026-09-16 : « applique le nouveau design de boutons qu'on a * créés pour l'app à cette page, et aux autres ». La règle est celle de * `mobile/src/ui/verre.ts`, en une phrase : * * · le VERRE dit ce que ça FAIT — la couleur vient du GESTE ; * · la TEINTE dit OÙ l'on est — un aplat pâle, sans reflet. * * Les gestes du site : gueules = s'engager, payer, jouer · argent = revenir, * le secondaire neutre, et le bouton qui porte la marque d'un autre (Google) · * sable = le noir permis, la pilule du menu · azur = voir. * * ⚠️ LES JETONS SONT ENGENDRÉS depuis `theme.ts`, entre les deux marqueurs * ci-dessous — `mobile/src/ui/verre-du-site.test.ts` échoue s'ils divergent. * Pour réécrire : `ECRIRE=1 npx jest src/ui/verre-du-site.test.ts`. * * ⚠️ ET CE QUI N'EST PAS UN GESTE NE SE PREND PAS POUR UN BOUTON : un lien * dans une phrase reste souligné, il ne devient pas du verre. */ /* ── ÉMAUX : engendré par mobile/src/ui/verre-du-site.ts — ne pas retoucher ── */ :root { --sable-lis: #BCA986; --sable-rebord: #DCCDAE; } .verre.gueules { --clair: #D74B46; --corps: #C4302B; --sombre: #A72525; --rebord: #7D1B1D; --lis: #531213; --texte: #FFFFFF; --ombre-texte: #470F10; --reflet: 0.22; --filet: 0.4; } .verre.sinople { --clair: #3FD984; --corps: #2ACD72; --sombre: #26C36A; --rebord: #23B958; --lis: #0E7A3C; --texte: #FFFFFF; --ombre-texte: #0B6532; --reflet: 0.2; --filet: 0.5; } .verre.azur { --clair: #68BBFF; --corps: #4EAFFE; --sombre: #3AA3FD; --rebord: #2186FC; --lis: #0355A7; --texte: #FFFFFF; --ombre-texte: #0355A7; --reflet: 0.2; --filet: 0.5; } .verre.or { --clair: #FCE7A4; --corps: #EDB93A; --sombre: #CF9820; --rebord: #9C6B0F; --lis: #6E4A07; --texte: #3A2604; --ombre-texte: rgba(255,240,190,0.55); --reflet: 0.38; --filet: 0.7; } .verre.pourpre { --clair: #C279FE; --corps: #B762FD; --sombre: #AC4BFC; --rebord: #9C28FA; --lis: #6A1DA7; --texte: #FFFFFF; --ombre-texte: #5A1790; --reflet: 0.2; --filet: 0.5; } .verre.sable { --clair: #3E3732; --corps: #26211D; --sombre: #141110; --rebord: #050404; --lis: #000000; --texte: #FBF6EA; --ombre-texte: rgba(0,0,0,0.6); --reflet: 0.14; --filet: 0.22; } .verre.argent { --clair: #FFFFFF; --corps: #F3EFE6; --sombre: #DED6C6; --rebord: #C3B79F; --lis: #A0937A; --texte: #221B12; --ombre-texte: rgba(255,255,255,0.8); --reflet: 0.5; --filet: 0.9; } .teinte.gueules { --fond-teinte: #F2D2CA; --bord-teinte: #D87771; --texte-teinte: #531213; } .teinte.sinople { --fond-teinte: #D3F1D8; --bord-teinte: #74DD9F; --texte-teinte: #0E7A3C; } .teinte.azur { --fond-teinte: #DAEBF4; --bord-teinte: #8BC9FA; --texte-teinte: #0355A7; } .teinte.or { --fond-teinte: #FAEDCD; --bord-teinte: #F3D07A; --texte-teinte: #6E4A07; } .teinte.pourpre { --fond-teinte: #EFDCF4; --bord-teinte: #D097F9; --texte-teinte: #6A1DA7; } .teinte.sable { --fond-teinte: #D2CFC7; --bord-teinte: #716D68; --texte-teinte: #000000; } .teinte.argent { --fond-teinte: #FBF8F0; --bord-teinte: #F7F3EA; --texte-teinte: #A0937A; } .papier-glace { --pg-haut: #FEF4D6; --pg-milieu: #FAEED1; --pg-bas: #F8E4B3; --pg-bord: #F2CD71; --pg-tranche: #E4C47F; --pg-titre: #6E4A07; } .papier-glace-enfonce { --pg-haut: #FEF4D6; --pg-milieu: #FAEED1; --pg-bas: #F7E0A8; --pg-bord: #F2CD71; --pg-tranche: #E4C47F; --pg-titre: #6E4A07; } /* ── FIN DES ÉMAUX ── */ /* Les coins, « légèrement plus carrés » — 12 · 10 · 8 selon la hauteur. */ .verre, .verre.moyen { --rayon: 10px; --rebord-h: 3px; } .verre.grand { --rayon: 12px; --rebord-h: 4px; } .verre.petit { --rayon: 8px; --rebord-h: 2.5px; } .verre { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 46px; padding: 12px 22px; font: inherit; font-weight: 800; font-size: 15px; line-height: 1.15; letter-spacing: .02em; text-align: center; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; color: var(--texte); /* Une ombre d'UN point dans la teinte profonde — jamais un cerne. */ text-shadow: 0 1px 1px var(--ombre-texte); background-color: var(--corps); /* Le reflet à bord NET sur 46 % de la hauteur, puis le dégradé. */ background-image: linear-gradient(180deg, rgb(255 255 255 / calc(var(--reflet) * 100%)) 0%, rgb(255 255 255 / calc(var(--reflet) * 35%)) 46%, rgb(255 255 255 / 0) 46.5%), linear-gradient(180deg, var(--clair) 0%, var(--corps) 52%, var(--sombre) 100%); border: 1px solid var(--lis); border-radius: var(--rayon); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--filet) * 100%)), inset 0 calc(-1 * var(--rebord-h)) 0 var(--rebord), 0 1px 0 rgba(20, 14, 8, .22), 0 4px 8px -4px rgba(20, 14, 8, .35); } .verre.grand { min-height: 54px; padding: 15px 28px; font-size: 16px; } .verre.petit { min-height: 36px; padding: 8px 14px; font-size: 13px; } .verre.large { display: flex; width: 100%; } /* Seuls restent ronds le bouton SANS MOT et la pilule qui flotte. */ .verre.rond { border-radius: 999px; } .verre svg, .verre img { flex: none; } @media (hover: hover) { .verre:hover { filter: brightness(1.05) saturate(1.05); } } /* * ⚠️ IL S'ENFONCE, IL NE GLISSE PAS. Le bouton descend de la hauteur de sa * tranche et la tranche s'écrase à un point — `enfoncer()` de `verre.ts`. * Aucune transition : un bouton physique cède en une image. * `translateY`, pas une marge : la marge pousserait les voisins. */ .verre:active:not(:disabled):not([aria-disabled="true"]), .verre.enfonce { background-color: var(--sombre); background-image: linear-gradient(180deg, rgb(255 255 255 / calc(var(--reflet) * 60%)) 0%, rgb(255 255 255 / calc(var(--reflet) * 20%)) 46%, rgb(255 255 255 / 0) 46.5%), linear-gradient(180deg, var(--corps) 0%, var(--sombre) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--filet) * 50%)), inset 0 -1px 0 var(--rebord), 0 0 0 rgba(20, 14, 8, 0); transform: translateY(calc(var(--rebord-h) - 1px)); filter: none; } .verre:focus-visible { outline: 3px solid var(--lis); outline-offset: 3px; } /* Grisé — et la page dit toujours POURQUOI à côté. */ .verre:disabled, .verre[aria-disabled="true"] { cursor: not-allowed; opacity: .5; filter: saturate(.35); } /* ── LA TEINTE — où l'on est, jamais un geste ───────────────────────────── */ .teinte { background: var(--fond-teinte); border: 1.5px solid var(--bord-teinte); box-shadow: inset 0 -2px 0 var(--bord-teinte); color: var(--texte-teinte); } /* ── LE PAPIER EN RELIEF — ce qui PORTE sans être un geste ────────────── Il remplace le cerne d'encre et l'ombre dure noire, comme dans l'app. */ .papier { background: #FDFAF2; border: 1px solid var(--sable-lis); box-shadow: inset 0 -4px 0 var(--sable-rebord), 0 2px 0 rgba(42, 28, 18, .12), 0 6px 14px -8px rgba(42, 28, 18, .35); } /* ── LE PAPIER GLACÉ — la matière de « Devenir partenaire » et du badge REPAIRE, transcrite de `papierGlace()` de l'app. Ses cinq nuances, elles, sont ENGENDRÉES dans le bloc des émaux : on ne les écrit pas ici. */ .papier-glace { background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.3) 46%, rgba(255,255,255,0) 46.5%), linear-gradient(180deg, var(--pg-haut) 0%, var(--pg-milieu) 50%, var(--pg-bas) 100%); border: 1px solid var(--pg-bord); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -4px 0 var(--pg-tranche), 0 2px 0 rgba(42, 28, 18, .12), 0 6px 14px -8px rgba(42, 28, 18, .35); color: var(--pg-encre, #221B12); } /* Un GESTE en papier glacé cède comme les autres. */ a.papier-glace:active, button.papier-glace:active { background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.12) 46%, rgba(255,255,255,0) 46.5%), linear-gradient(180deg, var(--pg-haut) 0%, var(--pg-milieu) 50%, var(--pg-bas) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 var(--pg-tranche), 0 1px 0 rgba(42, 28, 18, .10); transform: translateY(2px); } @media (prefers-reduced-motion: reduce) { .verre:active:not(:disabled), a.papier-glace:active, button.papier-glace:active { transform: none; } }