/* ========================================================================== ICONES — remplacement local de Font Awesome -------------------------------------------------------------------------- Le site n'utilisait que 10 icones, mais chargeait Font Awesome complet depuis cdnjs : 100 Ko de CSS + 153 Ko de police woff2 (et 410 Ko de ttf pour les navigateurs anciens). Ce fichier fait quelques kilo-octets et supprime deux requetes vers un tiers. Principe : chaque icone est un SVG en data-URI applique en mask-image sur un ::before. Le masque laisse passer `currentColor`, donc les couleurs existantes continuent de fonctionner : .tokens{color:green}, .text-yellow-500 sur la couronne, la couleur heritee du menu. Le masque est pose sur ::before et NON sur l'element lui-meme : un mask-image s'applique aussi aux pseudo-elements, ce qui aurait efface l'ombre dessinee par i.vip-icon...::after (css/main.css ~1015). Les tracés proviennent de @fortawesome/fontawesome-free 6.5.1 (SIL OFL 1.1 pour les icones). Les noms de classes sont inchanges : aucun HTML a modifier. ========================================================================== */ .fa, .fas, .fa-solid, .far, .fa-regular { display: inline-block; position: relative; /* ancre le ::after existant de la couronne */ width: 1em; height: 1em; line-height: 1; vertical-align: -0.125em; font-style: normal; text-rendering: auto; } .fa::before, .fas::before, .fa-solid::before, .far::before, .fa-regular::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Tailles utilitaires reprises de Font Awesome */ .fa-lg { font-size: 1.33em; } .fa-xs { font-size: 0.75em; } .fa-sm { font-size: 0.875em; } .fa-2x { font-size: 2em; } .fa-home::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1h-32l.7%20160.2c0%202.7-.2%205.4-.5%208.1V472c0%2022.1-17.9%2040-40%2040H456c-1.1%200-2.2%200-3.3-.1c-1.4%20.1-2.8%20.1-4.2%20.1H416%20392c-22.1%200-40-17.9-40-40V448%20384c0-17.7-14.3-32-32-32H256c-17.7%200-32%2014.3-32%2032v64%2024c0%2022.1-17.9%2040-40%2040H160%20128.1c-1.5%200-3-.1-4.5-.2c-1.2%20.1-2.4%20.2-3.6%20.2H104c-22.1%200-40-17.9-40-40V360c0-.9%200-1.9%20.1-2.8V287.6H32c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1h-32l.7%20160.2c0%202.7-.2%205.4-.5%208.1V472c0%2022.1-17.9%2040-40%2040H456c-1.1%200-2.2%200-3.3-.1c-1.4%20.1-2.8%20.1-4.2%20.1H416%20392c-22.1%200-40-17.9-40-40V448%20384c0-17.7-14.3-32-32-32H256c-17.7%200-32%2014.3-32%2032v64%2024c0%2022.1-17.9%2040-40%2040H160%20128.1c-1.5%200-3-.1-4.5-.2c-1.2%20.1-2.4%20.2-3.6%20.2H104c-22.1%200-40-17.9-40-40V360c0-.9%200-1.9%20.1-2.8V287.6H32c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22%2F%3E%3C%2Fsvg%3E");} .fa-plus::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M256%2080c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V224H48c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032H192V432c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V288H400c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H256V80z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M256%2080c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V224H48c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032H192V432c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V288H400c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H256V80z%22%2F%3E%3C%2Fsvg%3E");} .fa-random::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M403.8%2034.4c12-5%2025.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064c-9.2%209.2-22.9%2011.9-34.9%206.9s-19.8-16.6-19.8-29.6V160H352c-10.1%200-19.6%204.7-25.6%2012.8L284%20229.3%20244%20176l31.2-41.6C293.3%20110.2%20321.8%2096%20352%2096h32V64c0-12.9%207.8-24.6%2019.8-29.6zM164%20282.7L204%20336l-31.2%2041.6C154.7%20401.8%20126.2%20416%2096%20416H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H96c10.1%200%2019.6-4.7%2025.6-12.8L164%20282.7zm274.6%20188c-9.2%209.2-22.9%2011.9-34.9%206.9s-19.8-16.6-19.8-29.6V416H352c-30.2%200-58.7-14.2-76.8-38.4L121.6%20172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H96c30.2%200%2058.7%2014.2%2076.8%2038.4L326.4%20339.2c6%208.1%2015.5%2012.8%2025.6%2012.8h32V320c0-12.9%207.8-24.6%2019.8-29.6s25.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M403.8%2034.4c12-5%2025.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064c-9.2%209.2-22.9%2011.9-34.9%206.9s-19.8-16.6-19.8-29.6V160H352c-10.1%200-19.6%204.7-25.6%2012.8L284%20229.3%20244%20176l31.2-41.6C293.3%20110.2%20321.8%2096%20352%2096h32V64c0-12.9%207.8-24.6%2019.8-29.6zM164%20282.7L204%20336l-31.2%2041.6C154.7%20401.8%20126.2%20416%2096%20416H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H96c10.1%200%2019.6-4.7%2025.6-12.8L164%20282.7zm274.6%20188c-9.2%209.2-22.9%2011.9-34.9%206.9s-19.8-16.6-19.8-29.6V416H352c-30.2%200-58.7-14.2-76.8-38.4L121.6%20172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H96c30.2%200%2058.7%2014.2%2076.8%2038.4L326.4%20339.2c6%208.1%2015.5%2012.8%2025.6%2012.8h32V320c0-12.9%207.8-24.6%2019.8-29.6s25.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064z%22%2F%3E%3C%2Fsvg%3E");} .fa-shopping-cart::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M0%2024C0%2010.7%2010.7%200%2024%200H69.5c22%200%2041.5%2012.8%2050.6%2032h411c26.3%200%2045.5%2025%2038.6%2050.4l-41%20152.3c-8.5%2031.4-37%2053.3-69.5%2053.3H170.7l5.4%2028.5c2.2%2011.3%2012.1%2019.5%2023.6%2019.5H488c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H199.7c-34.6%200-64.3-24.6-70.7-58.5L77.4%2054.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7%2048%200%2037.3%200%2024zM128%20464a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zm336-48a48%2048%200%201%201%200%2096%2048%2048%200%201%201%200-96z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M0%2024C0%2010.7%2010.7%200%2024%200H69.5c22%200%2041.5%2012.8%2050.6%2032h411c26.3%200%2045.5%2025%2038.6%2050.4l-41%20152.3c-8.5%2031.4-37%2053.3-69.5%2053.3H170.7l5.4%2028.5c2.2%2011.3%2012.1%2019.5%2023.6%2019.5H488c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H199.7c-34.6%200-64.3-24.6-70.7-58.5L77.4%2054.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7%2048%200%2037.3%200%2024zM128%20464a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zm336-48a48%2048%200%201%201%200%2096%2048%2048%200%201%201%200-96z%22%2F%3E%3C%2Fsvg%3E");} .fa-comments::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M208%20352c114.9%200%20208-78.8%20208-176S322.9%200%20208%200S0%2078.8%200%20176c0%2038.6%2014.7%2074.3%2039.6%20103.4c-3.5%209.4-8.7%2017.7-14.2%2024.7c-4.8%206.2-9.7%2011-13.3%2014.3c-1.8%201.6-3.3%202.9-4.3%203.7c-.5%20.4-.9%20.7-1.1%20.8l-.2%20.2%200%200%200%200C1%20327.2-1.4%20334.4%20.8%20340.9S9.1%20352%2016%20352c21.8%200%2043.8-5.6%2062.1-12.5c9.2-3.5%2017.8-7.4%2025.3-11.4C134.1%20343.3%20169.8%20352%20208%20352zM448%20176c0%20112.3-99.1%20196.9-216.5%20207C255.8%20457.4%20336.4%20512%20432%20512c38.2%200%2073.9-8.7%20104.7-23.9c7.5%204%2016%207.9%2025.2%2011.4c18.3%206.9%2040.3%2012.5%2062.1%2012.5c6.9%200%2013.1-4.5%2015.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0%200%200%200-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29%2039.6-64.7%2039.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4%205.1%20.6%2010.3%20.6%2015.5z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M208%20352c114.9%200%20208-78.8%20208-176S322.9%200%20208%200S0%2078.8%200%20176c0%2038.6%2014.7%2074.3%2039.6%20103.4c-3.5%209.4-8.7%2017.7-14.2%2024.7c-4.8%206.2-9.7%2011-13.3%2014.3c-1.8%201.6-3.3%202.9-4.3%203.7c-.5%20.4-.9%20.7-1.1%20.8l-.2%20.2%200%200%200%200C1%20327.2-1.4%20334.4%20.8%20340.9S9.1%20352%2016%20352c21.8%200%2043.8-5.6%2062.1-12.5c9.2-3.5%2017.8-7.4%2025.3-11.4C134.1%20343.3%20169.8%20352%20208%20352zM448%20176c0%20112.3-99.1%20196.9-216.5%20207C255.8%20457.4%20336.4%20512%20432%20512c38.2%200%2073.9-8.7%20104.7-23.9c7.5%204%2016%207.9%2025.2%2011.4c18.3%206.9%2040.3%2012.5%2062.1%2012.5c6.9%200%2013.1-4.5%2015.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0%200%200%200-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29%2039.6-64.7%2039.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4%205.1%20.6%2010.3%20.6%2015.5z%22%2F%3E%3C%2Fsvg%3E");} .fa-envelope::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M48%2064C21.5%2064%200%2085.5%200%20112c0%2015.1%207.1%2029.3%2019.2%2038.4L236.8%20313.6c11.4%208.5%2027%208.5%2038.4%200L492.8%20150.4c12.1-9.1%2019.2-23.3%2019.2-38.4c0-26.5-21.5-48-48-48H48zM0%20176V384c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V176L294.4%20339.2c-22.8%2017.1-54%2017.1-76.8%200L0%20176z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M48%2064C21.5%2064%200%2085.5%200%20112c0%2015.1%207.1%2029.3%2019.2%2038.4L236.8%20313.6c11.4%208.5%2027%208.5%2038.4%200L492.8%20150.4c12.1-9.1%2019.2-23.3%2019.2-38.4c0-26.5-21.5-48-48-48H48zM0%20176V384c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V176L294.4%20339.2c-22.8%2017.1-54%2017.1-76.8%200L0%20176z%22%2F%3E%3C%2Fsvg%3E");} .fa-crown::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M309%20106c11.4-7%2019-19.7%2019-34c0-22.1-17.9-40-40-40s-40%2017.9-40%2040c0%2014.4%207.6%2027%2019%2034L209.7%20220.6c-9.1%2018.2-32.7%2023.4-48.6%2010.7L72%20160c5-6.7%208-15%208-24c0-22.1-17.9-40-40-40S0%20113.9%200%20136s17.9%2040%2040%2040c.2%200%20.5%200%20.7%200L86.4%20427.4c5.5%2030.4%2032%2052.6%2063%2052.6H426.6c30.9%200%2057.4-22.1%2063-52.6L535.3%20176c.2%200%20.5%200%20.7%200c22.1%200%2040-17.9%2040-40s-17.9-40-40-40s-40%2017.9-40%2040c0%209%203%2017.3%208%2024l-89.1%2071.3c-15.9%2012.7-39.5%207.5-48.6-10.7L309%20106z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M309%20106c11.4-7%2019-19.7%2019-34c0-22.1-17.9-40-40-40s-40%2017.9-40%2040c0%2014.4%207.6%2027%2019%2034L209.7%20220.6c-9.1%2018.2-32.7%2023.4-48.6%2010.7L72%20160c5-6.7%208-15%208-24c0-22.1-17.9-40-40-40S0%20113.9%200%20136s17.9%2040%2040%2040c.2%200%20.5%200%20.7%200L86.4%20427.4c5.5%2030.4%2032%2052.6%2063%2052.6H426.6c30.9%200%2057.4-22.1%2063-52.6L535.3%20176c.2%200%20.5%200%20.7%200c22.1%200%2040-17.9%2040-40s-17.9-40-40-40s-40%2017.9-40%2040c0%209%203%2017.3%208%2024l-89.1%2071.3c-15.9%2012.7-39.5%207.5-48.6-10.7L309%20106z%22%2F%3E%3C%2Fsvg%3E");} .fa-circle-plus::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM232%20344V280H168c-13.3%200-24-10.7-24-24s10.7-24%2024-24h64V168c0-13.3%2010.7-24%2024-24s24%2010.7%2024%2024v64h64c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H280v64c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM232%20344V280H168c-13.3%200-24-10.7-24-24s10.7-24%2024-24h64V168c0-13.3%2010.7-24%2024-24s24%2010.7%2024%2024v64h64c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H280v64c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24z%22%2F%3E%3C%2Fsvg%3E");} .fa-bars::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E");} .fa-caret-down::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20d%3D%22M137.4%20374.6c12.5%2012.5%2032.8%2012.5%2045.3%200l128-128c9.2-9.2%2011.9-22.9%206.9-34.9s-16.6-19.8-29.6-19.8L32%20192c-12.9%200-24.6%207.8-29.6%2019.8s-2.2%2025.7%206.9%2034.9l128%20128z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20d%3D%22M137.4%20374.6c12.5%2012.5%2032.8%2012.5%2045.3%200l128-128c9.2-9.2%2011.9-22.9%206.9-34.9s-16.6-19.8-29.6-19.8L32%20192c-12.9%200-24.6%207.8-29.6%2019.8s-2.2%2025.7%206.9%2034.9l128%20128z%22%2F%3E%3C%2Fsvg%3E");}