diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css index 258fba3..5639d80 100644 --- a/src/assets/css/src/2.blocks.design-to-light.css +++ b/src/assets/css/src/2.blocks.design-to-light.css @@ -16,37 +16,41 @@ left: .5rem; top: .5rem; } -#dtl-btn::after { - content: attr(data-grade); - color: transparent; - user-select: none; - width: 2rem; - height: 2rem; - border-radius: var(--rounded-sm); - background-repeat: no-repeat; - background-position: center; +#dtl-btn[data-grade]::after { position: absolute; right: .25rem; top: .25rem; + width: 2rem; + height: 2rem; } -#dtl-btn[data-grade="A"]::after { - background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.30393 3.96806L3.11993 16.1601C3.00793 16.4641 2.83193 16.7041 2.59193 16.8801C2.36793 17.0401 2.11993 17.1201 1.84793 17.1201C1.41593 17.1201 1.09593 17.0001 0.887928 16.7601C0.679928 16.5201 0.575928 16.2241 0.575928 15.8721C0.575928 15.7281 0.6 15.5761 0.647928 15.4161L6.62393 1.06406C6.75193 0.744065 6.94393 0.496065 7.2 0.320064C7.47193 0.144065 7.75993 0.0720646 8.06393 0.104064C8.35193 0.104064 8.61593 0.192064 8.85593 0.368065C9.11193 0.528065 9.29593 0.760065 9.40793 1.06406L15.3119 15.1281C15.3919 15.3361 15.4319 15.5281 15.4319 15.7041C15.4319 16.1361 15.2879 16.4801 14.9999 16.7361C14.7279 16.9921 14.4239 17.1201 14.0879 17.1201C13.7999 17.1201 13.5359 17.0321 13.2959 16.8561C13.0719 16.6801 12.8959 16.4401 12.7679 16.1361L7.60793 4.11207L8.30393 3.96806ZM3.86393 13.2321L5.18393 10.4721H11.6639L12.1199 13.2321H3.86393Z' fill='%2300945B'/%3E%3C/svg%3E%0A"); + +/* Grades */ +[data-grade]::after { + content: attr(data-grade); + color: transparent; + user-select: none; + border-radius: var(--rounded-sm); + background-repeat: no-repeat; + background-position: center; +} +[data-grade="A"]::after { + background-image: var(--icon-grade-A); background-color: rgba(0, 148, 91, .2); } -#dtl-btn[data-grade="B"]::after { - background-image: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1121 0.600098C9.6481 0.600098 10.7921 0.960098 11.5441 1.6801C12.2961 2.4001 12.6721 3.4641 12.6721 4.8721C12.6721 5.6241 12.4881 6.2881 12.1201 6.8641C11.7521 7.4241 11.2081 7.8641 10.4881 8.1841C9.7681 8.4881 8.8801 8.6401 7.8241 8.6401L7.9201 7.5601C8.4161 7.5601 8.9841 7.6321 9.6241 7.7761C10.2641 7.9041 10.8801 8.1441 11.4721 8.4961C12.0801 8.8321 12.5761 9.3121 12.9601 9.9361C13.3601 10.5441 13.5601 11.3281 13.5601 12.2881C13.5601 13.3441 13.3841 14.2081 13.0321 14.8801C12.6961 15.5521 12.2481 16.0721 11.6881 16.4401C11.1281 16.8081 10.5281 17.0641 9.8881 17.2081C9.2481 17.3361 8.6321 17.4001 8.0401 17.4001H2.0641C1.6481 17.4001 1.2961 17.2641 1.0081 16.9921C0.736098 16.7041 0.600098 16.3521 0.600098 15.9361V2.0641C0.600098 1.6481 0.736098 1.3041 1.0081 1.0321C1.2961 0.744098 1.6481 0.600098 2.0641 0.600098H8.1121ZM7.6801 3.4321H3.4081L3.7201 3.0481V7.3921L3.4321 7.1761H7.7521C8.2161 7.1761 8.6321 7.0241 9.0001 6.7201C9.3681 6.4161 9.5521 5.9761 9.5521 5.4001C9.5521 4.7121 9.3761 4.2161 9.0241 3.9121C8.6881 3.5921 8.2401 3.4321 7.6801 3.4321ZM7.8721 10.0081H3.5041L3.7201 9.8161V14.8801L3.4801 14.6401H8.0401C8.7761 14.6401 9.3601 14.4481 9.7921 14.0641C10.2241 13.6641 10.4401 13.0721 10.4401 12.2881C10.4401 11.5681 10.2961 11.0481 10.0081 10.7281C9.7201 10.4081 9.3761 10.2081 8.9761 10.1281C8.5761 10.0481 8.2081 10.0081 7.8721 10.0081Z' fill='%235EAC0D'/%3E%3C/svg%3E%0A"); +[data-grade="B"]::after { + background-image: var(--icon-grade-B); background-color: rgba(94, 172, 13, .2); } -#dtl-btn[data-grade="C"]::after { - background-image: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6 1.35592C13.016 1.56392 13.256 1.89192 13.32 2.33992C13.4 2.78792 13.288 3.19592 12.984 3.56392C12.776 3.85192 12.504 4.01192 12.168 4.04392C11.848 4.07592 11.52 4.01192 11.184 3.85192C10.8 3.67592 10.392 3.53992 9.96 3.44392C9.544 3.34792 9.104 3.3 8.64 3.3C7.776 3.3 7 3.43592 6.312 3.70792C5.64 3.97992 5.064 4.37192 4.584 4.88392C4.104 5.37992 3.736 5.97192 3.48 6.65992C3.24 7.34792 3.12 8.10792 3.12 8.93992C3.12 9.91592 3.256 10.7639 3.528 11.4839C3.816 12.2039 4.208 12.8039 4.704 13.2839C5.2 13.7639 5.784 14.1239 6.456 14.3639C7.128 14.5879 7.856 14.6999 8.64 14.6999C9.072 14.6999 9.504 14.6599 9.936 14.5799C10.368 14.4999 10.784 14.3559 11.184 14.1479C11.52 13.9879 11.848 13.9319 12.168 13.9799C12.504 14.0279 12.784 14.1959 13.008 14.4839C13.328 14.8839 13.44 15.2999 13.344 15.7319C13.264 16.1479 13.024 16.4519 12.624 16.6439C12.208 16.8519 11.776 17.0279 11.328 17.1719C10.896 17.2999 10.456 17.3959 10.008 17.4599C9.56 17.5399 9.104 17.5799 8.64 17.5799C7.488 17.5799 6.392 17.3959 5.352 17.0279C4.328 16.6599 3.408 16.1159 2.592 15.3959C1.792 14.6759 1.16 13.7799 0.696 12.7079C0.232 11.6199 0 10.3639 0 8.93992C0 7.70792 0.208 6.57192 0.624 5.53192C1.056 4.49192 1.656 3.59592 2.424 2.84392C3.208 2.07592 4.128 1.48392 5.184 1.06792C6.24 0.635922 7.392 0.419922 8.64 0.419922C9.344 0.419922 10.032 0.499922 10.704 0.659922C11.376 0.819921 12.008 1.05192 12.6 1.35592Z' fill='%23EEAF10'/%3E%3C/svg%3E%0A"); +[data-grade="C"]::after { + background-image: var(--icon-grade-C); background-color: rgba(238, 175, 16, .2); } -#dtl-btn[data-grade="D"]::after { - background-image: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.7 0.600098C8.852 0.600098 9.876 0.816098 10.772 1.2481C11.668 1.6801 12.42 2.2881 13.028 3.0721C13.652 3.8401 14.116 4.7361 14.42 5.7601C14.74 6.7681 14.9 7.8481 14.9 9.0001C14.9 10.5521 14.62 11.9681 14.06 13.2481C13.5 14.5121 12.684 15.5201 11.612 16.2721C10.556 17.0241 9.252 17.4001 7.7 17.4001H1.964C1.548 17.4001 1.196 17.2641 0.908 16.9921C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.600098 1.964 0.600098H7.7ZM7.46 14.6401C8.468 14.6401 9.292 14.3841 9.932 13.8721C10.572 13.3441 11.036 12.6561 11.324 11.8081C11.628 10.9441 11.78 10.0081 11.78 9.0001C11.78 8.2481 11.692 7.5361 11.516 6.8641C11.356 6.1761 11.1 5.5761 10.748 5.0641C10.396 4.5361 9.948 4.1201 9.404 3.8161C8.86 3.5121 8.212 3.3601 7.46 3.3601H3.26L3.5 3.1441V14.9041L3.356 14.6401H7.46Z' fill='%23F26A4F'/%3E%3C/svg%3E%0A"); +[data-grade="D"]::after { + background-image: var(--icon-grade-D); background-color: rgba(242, 106, 79, .2); } -#dtl-btn[data-grade="E"]::after { - background-image: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.964 0.600098H10.004C10.42 0.600098 10.764 0.736098 11.036 1.0081C11.324 1.2641 11.468 1.6001 11.468 2.0161C11.468 2.4161 11.324 2.7441 11.036 3.0001C10.764 3.2401 10.42 3.3601 10.004 3.3601H3.284L3.5 2.9521V7.6321L3.308 7.4401H8.924C9.34 7.4401 9.684 7.5761 9.956 7.8481C10.244 8.1041 10.388 8.4401 10.388 8.8561C10.388 9.2561 10.244 9.5841 9.956 9.8401C9.684 10.0801 9.34 10.2001 8.924 10.2001H3.38L3.5 10.0081V14.8561L3.308 14.6401H10.004C10.42 14.6401 10.764 14.7841 11.036 15.0721C11.324 15.3441 11.468 15.6641 11.468 16.0321C11.468 16.4321 11.324 16.7601 11.036 17.0161C10.764 17.2721 10.42 17.4001 10.004 17.4001H1.964C1.548 17.4001 1.196 17.2641 0.908 16.9921C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.600098 1.964 0.600098Z' fill='%23F32D2F'/%3E%3C/svg%3E%0A"); +[data-grade="E"]::after { + background-image: var(--icon-grade-E); background-color: rgba(243, 45, 47, .2); } @@ -59,16 +63,286 @@ top: 2rem; bottom: 5.5rem; color: var(--color-white); + z-index: 999; } -#dtl-panel > header { +#dtl-panel .border-b { border-color: var(--color-white-10); } -#dtl-panel button { - color: inherit; -} #dtl-panel [data-icon="close"] { --icon-size: 1.25rem; width: 2.5rem; height: 2.5rem; padding: 0; + color: inherit; } + +#dtl-panel [role="tablist"] { + display: flex; + padding: 0 var(--space-32); +} +#dtl-panel [role="tab"] { + padding: var(--space-12) .625rem; + color: var(--color-grey-400); + font-weight: 500; +} +#dtl-panel [role="tab"][aria-selected="true"] { + color: var(--color-white); + border-bottom: 2px solid var(--color-white); +} + +#dtl-panel section { + height: calc(100% - 6.25rem); +} + +#dtl-panel h3 { + font-size: var(--text-sm); +} + +#dtl-panel [data-grade]::after { + display: block; + width: 4.5rem; + height: 4.5rem; + background-size: 2rem; +} + +#note-globale input[type="range"] { + width: 100%; + height: .5rem; + background: linear-gradient(to right, + rgba(243, 45, 47, 1) 0%, rgba(243, 45, 47, 1) 20%, + rgba(242, 106, 79, 1) 20%, rgba(242, 106, 79, 1) 40%, + rgba(238, 175, 16, 1) 40%, rgba(238, 175, 16, 1) 60%, + rgba(94, 172, 13, 1) 60%, rgba(94, 172, 13, 1) 80%, + rgba(0, 148, 91, 1) 80%, rgba(0, 148, 91, 1) 100% + ); + transform: scaleX(-1); +} +#note-globale input[type="range"]::-webkit-slider-thumb { + height: 20px; + width: 2px; + border: none; + border-radius: 2px; + background: var(--color-white); + -webkit-appearance: none; + box-shadow: 0px 0px 2px 0px var(--color-black-50); +} +#note-globale input[type="range"]::-moz-range-thumb { + height: 20px; + width: 2px; + border: none; + border-radius: 2px; + background: var(--color-white); + -webkit-appearance: none; + box-shadow: 0px 0px 2px 0px var(--color-black-50); +} +#note-globale input[type="range"]::-ms-thumb { + height: 20px; + width: 2px; + border: none; + border-radius: 2px; + background: var(--color-white); + -webkit-appearance: none; + box-shadow: 0px 0px 2px 0px var(--color-black-50); +} + +#positionnement dl { + width: 100%; + height: 192px; + position: relative; + background-image: url("data:image/svg+xml,%3Csvg width='130' height='130' viewBox='0 0 130 130' fill='none' stroke='white' stroke-opacity='0.1' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M115.3 1V129'/%3E%3Cpath d='M102.6 1V129'/%3E%3Cpath d='M89.9 1V129'/%3E%3Cpath d='M77.2 1V129'/%3E%3Cpath d='M64.5 1V129'/%3E%3Cpath d='M51.8 1V129'/%3E%3Cpath d='M39.1 1V129'/%3E%3Cpath d='M26.4 1V129'/%3E%3Cpath d='M13.7 1V129'/%3E%3Cpath d='M1 13.8L129 13.8'/%3E%3Cpath d='M1 26.6L129 26.6'/%3E%3Cpath d='M1 40L129 40'/%3E%3Cpath d='M1 52.2L129 52.2'/%3E%3Cpath d='M1 65L129 65'/%3E%3Cpath d='M1 77.8L129 77.8'/%3E%3Cpath d='M1 90.6L129 90.6'/%3E%3Cpath d='M1 103.4L129 103.4'/%3E%3Cpath d='M1 116.2L129 116.2'/%3E%3Cpath d='M1 65L129 65' stroke='%235E6060' stroke-opacity='1'/%3E%3Cpath d='M64.5 1V129' stroke='%235E6060' stroke-opacity='1'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-position: center; + background-size: 8.125rem; + user-select: none; +} +#positionnement dt { + position: absolute; + top: 0; + color: var(--color-grey-400); + text-align: center; +} +#positionnement dt::after { + position: absolute; + color: var(--color-white); +} +#positionnement dd::before, +#positionnement dd::after { + position: absolute; +} +#positionnement #design { + top: calc(50% - .666em); + right: calc(50% + 5rem); + transform: translateY(-50%); +} +#positionnement #design::after { + content: 'Complexe'; + bottom: -1.333em; + right: 0; +} +#positionnement #design+dd::before { + content: 'Design'; + top: calc(50% - .666em); + left: calc(50% + 5rem); + transform: translateY(-50%); + color: var(--color-grey-400); +} +#positionnement #design+dd::after { + content: 'Sobre'; + top: calc(50% + .666em); + left: calc(50% + 5rem); + transform: translateY(-50%); +} +#positionnement #poids { + left: 50%; + transform: translateX(-50%); +} +#positionnement #poids::after { + content: ' Léger'; + position: static; +} +#positionnement #poids+dd::before { + content: 'Poids'; + bottom: 0; + left: calc(50% - 1.5em); + transform: translateX(-50%); + color: var(--color-grey-400); +} +#positionnement #poids+dd::after { + content: ' Lourd'; + bottom: 0; + left: calc(50% + 1.5em); + transform: translateX(-50%); +} +#positionnement .dot { + position: absolute; + top: calc(50% + 1.5rem); + left: calc(50% - .25rem); + width: .5rem; + height: .5rem; + background: var(--color-white); + opacity: .5; + border-radius: 50%; + margin: 0; + padding: 0; + transform: translate(calc(var(--x) * 8rem / 10), calc(var(--y) * -8rem / 10)); +} +#positionnement .dot[aria-selected="true"] { + box-shadow: 0 0 0 4px var(--color-white-20); + opacity: 1; +} + +#indicateur .grid { + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-top: var(--space-32); +} +.gauge { + --gauge-outer-size: 5rem; + --gauge-inner-size: 4rem; + width: var(--gauge-outer-size); + height: var(--gauge-outer-size); + border-radius: 50%; + background-image: + conic-gradient( + from 0deg at 50% 50%, + #EEAF10 0deg, + #00945B 72deg, + #EEAF10 144deg, + #5EAC0D 180deg, + #F32D2F 180deg, + #F26A4F 216deg, + #EEAF10 360deg + ); + background-size: 100%; + background-position: center; + position: relative; + appearance: none; + display: block; + text-align: center; + justify-self: center; + margin-bottom: 3rem; +} +.gauge::after { + content: attr(data-value); + display: block; + padding: 1.125rem 1.25rem 1.125rem .875rem; + font-size: var(--text-lg); + width: var(--gauge-inner-size); + height: var(--gauge-inner-size); + border-radius: 50%; + background: var(--color-black); + position: absolute; + top: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2); + left: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2); + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-variant-numeric: tabular-nums; + font-weight: 600; + line-height: 1; + z-index: 10; +} +.gauge::before { + content: ''; + display: block; + width: calc(var(--gauge-outer-size) / 2); + height: var(--gauge-outer-size); + border-radius: 50%; + border-radius: 0 var(--gauge-outer-size) var(--gauge-outer-size) 0; + background: blue; + transform-origin: center; + transform: rotate(180deg) scale(1.03); + position: absolute; + bottom: 0; + right: 50%; + background: var(--color-black); + z-index: 1; +} +.gauge[data-value^="-"]::before { + transform: rotate(0deg) scale(1.03); + left: 50%; + right: unset; +} +.gauge label::before { + content: ''; + display: block; + width: calc(var(--gauge-outer-size) / 2); + height: var(--gauge-outer-size); + border-radius: 50%; + border-radius: 0 var(--gauge-outer-size) var(--gauge-outer-size) 0; + background: blue; + transform-origin: left center; + transform: rotate(calc(30deg * var(--value))) scale(1.03); + background: var(--color-black); + position: absolute; + top: calc(-1 * var(--gauge-outer-size)); + left: 50%; + z-index: 1; +} +.gauge[data-value^="-"] label::before { + transform: rotate(calc(180deg + 30deg * var(--value))) scale(1.03); +} +.gauge label::after { + content: ''; + display: block; + position: absolute; + top: calc(-1 * var(--gauge-outer-size) - 2px); + left: calc(50% - 1px); + z-index: 11; + height: 12px; + width: 2px; + border: none; + border-radius: 2px; + background: var(--color-white); + -webkit-appearance: none; + box-shadow: 0px 0px 2px 0px var(--color-black-50); +} +.gauge label { + position: absolute; + top: 100%; + left: -1rem; + right: -1rem; + font-weight: 500; + padding: .5rem 0; +} +.gauge input[type="range"] { + visibility: hidden; +} \ No newline at end of file diff --git a/src/assets/css/src/3.utilities.icons.css b/src/assets/css/src/3.utilities.icons.css index 4b3f355..61e888e 100644 --- a/src/assets/css/src/3.utilities.icons.css +++ b/src/assets/css/src/3.utilities.icons.css @@ -9,7 +9,7 @@ --icon-check: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-check-3: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.125C5.2203 15.2094 6.00426 14.4527 6.93901 13.9276C7.87376 13.4025 8.92787 13.1267 10 13.1267C11.0721 13.1267 12.1262 13.4025 13.061 13.9276C14 14.4527 14.7797 15.2094 15.3375 16.125M13.125 8.125C13.125 9.85089 11.7259 11.25 10 11.25C8.27411 11.25 6.875 9.85089 6.875 8.125C6.875 6.39911 8.27411 5 10 5C11.7259 5 13.125 6.39911 13.125 8.125ZM18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); - --icon-megaphone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.85 14.4624C11.7448 15.3307 11.3125 16.1262 10.6412 16.687C10 17.2477 9.11024 17.5315 8.23708 17.4805C7.36393 17.4295 6.54305 17.0476 5.94162 16.4125C5.34019 15.7775 5.00346 14.937 5 14.0624V12.0749M17.3 16.3374L2.7125 11.2499C2.47448 11.1669 2.26713 11.0138 2.11767 10.8108C1.96821 10.6078 1.88362 10.3644 1.875 10.1124V8.74991C1.87603 8.49151 1.95711 8.23979 2.10709 8.02937C2.25707 7.81895 2.46858 7.66018 2.7125 7.57491L17.3 2.49991C17.3937 2.46828 17.4935 2.45931 17.5913 2.47374C17.6891 2.48817 17.782 2.5256 17.8626 2.58294C17.9431 2.64028 18.0089 2.7159 18.0545 2.8036C18.1001 2.89129 18.1243 2.98856 18.125 3.08741V15.7499C18.1243 15.8488 18.1001 15.946 18.0545 16.0337C18.0089 16.1214 17.9431 16.197 17.8626 16.2544C17.782 16.3117 17.6891 16.3491 17.5913 16.3636C17.4935 16.378 17.3937 16.369 17.3 16.3374Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + --icon-megaphone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.85 14.4624C11.7448 15.3307 11.3125 16.1262 10.6412 16.687C10 17.2477 9.11024 17.5315 8.23708 17.4805C7.36393 17.4295 6.54305 17.0476 5.94162 16.4125C5.34019 15.7775 5.00346 14.937 5 14.0624V12.0749M17.3 16.3374L2.7125 11.2499C2.47448 11.1669 2.26713 11.0138 2.11767 10.8108C1.96821 10.6078 1.88362 10.3644 1.875 10.1124V8.74991C1.87603 8.49151 1.95711 8.23979 2.10709 8.02937C2.25707 7.81895 2.46858 7.66018 2.7125 7.57491L17.3 2.49991C17.3937 2.46828 17.4935 2.45931 17.5913 2.47374C17.6891 2.48817 17.782 2.5256 17.8626 2.58294C17.9431 2.64028 18.0089 2.7159 18.0545 2.8036C18.1 2.89129 18.1243 2.98856 18.125 3.08741V15.7499C18.1243 15.8488 18.1 15.946 18.0545 16.0337C18.0089 16.1214 17.9431 16.197 17.8626 16.2544C17.782 16.3117 17.6891 16.3491 17.5913 16.3636C17.4935 16.378 17.3937 16.369 17.3 16.3374Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-leaf: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' d='M6.67 15c9.96 0 10.76-8.48 10.83-12.5a.82.82 0 0 0-.84-.83C2.5 1.93 2.5 8.8 2.5 15m0 0v3.33m0-3.33s0-5 6.67-5.83'/%3E%3C/svg%3E"); --icon-inspiration: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2.26245V4.13745M15 4.04995L13.6754 5.38745M17.8504 7.92495H15.9754M5 4.04995L6.32539 5.38745M2.15039 7.92495H4.02539M14.3754 11.25C14.3783 10.4699 14.1726 9.70317 13.7796 9.02932C13.3865 8.35547 12.8205 7.79897 12.14 7.41746C11.4596 7.03595 10.6895 6.84332 9.90957 6.85952C9.12964 6.87572 8.36823 7.10016 7.70421 7.50959C7.04019 7.91903 6.49773 8.49856 6.13301 9.18815C5.7683 9.87774 5.5946 10.6523 5.6299 11.4316C5.66521 12.2109 5.90825 12.9666 6.33383 13.6204C6.75942 14.2741 7.35207 14.8022 8.05039 15.15V17.3C8.05365 17.4271 8.10645 17.5479 8.19752 17.6366C8.28859 17.7254 8.41073 17.775 8.53789 17.775H11.4629C11.59 17.775 11.7122 17.7254 11.8033 17.6366C11.8943 17.5479 11.9471 17.4271 11.9504 17.3V15.1125C12.6707 14.7539 13.2782 14.2036 13.706 13.5222C14.1338 12.8407 14.3654 12.0545 14.3754 11.25Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.875C5.2203 15.9594 6.00426 15.2027 6.93901 14.6776C7.87376 14.1525 8.92787 13.8767 10 13.8767C11.0721 13.8767 12.1262 14.1525 13.061 14.6776C14 15.2027 14.7797 15.9594 15.3375 16.875M13.125 8.875C13.125 10.6009 11.7259 12 10 12C8.27411 12 6.875 10.6009 6.875 8.875C6.875 7.14911 8.27411 5.75 10 5.75C11.7259 5.75 13.125 7.14911 13.125 8.875ZM18.125 10.75C18.125 15.2373 14.4873 18.875 10 18.875C5.51269 18.875 1.875 15.2373 1.875 10.75C1.875 6.26269 5.51269 2.625 10 2.625C14.4873 2.625 18.125 6.26269 18.125 10.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); @@ -20,7 +20,7 @@ --icon-chevron-single-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9377 1.875L6.25019 9.5625C6.1904 9.61861 6.14275 9.68638 6.11017 9.76163C6.0776 9.83688 6.06079 9.918 6.06079 10C6.06079 10.082 6.0776 10.1631 6.11017 10.2384C6.14275 10.3136 6.1904 10.3814 6.25019 10.4375L13.9377 18.125' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-votre-brief: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0625 5.8375C13.9088 5.60629 13.7056 5.41211 13.4677 5.26897C13.2298 5.12583 12.9631 5.0373 12.6869 5.0098C12.4106 5 12.1316 5.01648 11.8702 5.1099C11.6087 5.20332 11.3713 5.35364 11.175 5.55M1.875 18.125L8.85 11.7875M18.125 7.5C18.125 10.6066 15.6066 13.125 12.5 13.125C9.3934 13.125 6.875 10.6066 6.875 7.5C6.875 4.3934 9.3934 1.875 12.5 1.875C15.6066 1.875 18.125 4.3934 18.125 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-offre-commerciale: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10H14.375M5.625 13.75H14.375M3.125 5.625H16.875C17.5654 5.625 18.125 6.18464 18.125 6.875V16.875C18.125 17.5654 17.5654 18.125 16.875 18.125H3.125C2.43464 18.125 1.875 17.5654 1.875 16.875V6.875C1.875 6.18464 2.43464 5.625 3.125 5.625ZM7.5 1.875H12.5C12.8315 1.875 13.1495 2 13.3839 2.24112C13.6183 2.47554 13.75 2.79348 13.75 3.125V5.625H6.25V3.125C6.25 2.79348 6.3817 2.47554 6.61612 2.24112C6.85054 2 7.16848 1.875 7.5 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); - --icon-brief-enrichi: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8751 7.5C12.5655 7.5 13.1251 6.94036 13.1251 6.25C13.1251 5.55965 12.5655 5 11.8751 5C11.1848 5 10.6251 5.55965 10.6251 6.25C10.6251 6.94036 11.1848 7.5 11.8751 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 13.75C7.22029 13.75 7.50011 13.4702 7.50011 13.125C7.50011 12.7798 7.22029 12.5 6.87511 12.5C6.52993 12.5 6.25011 12.7798 6.25011 13.125C6.25011 13.4702 6.52993 13.75 6.87511 13.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 9.375C7.56547 9.375 8.12511 8.81536 8.12511 8.125C8.12511 7.43465 7.56547 6.875 6.87511 6.875C6.18476 6.875 5.62511 7.43465 5.62511 8.125C5.62511 8.81536 6.18476 9.375 6.87511 9.375Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1501 16.6C13.1362 16.3575 13.0519 16.1244 12.9076 15.929C12.7633 15.7337 12.5653 15.5846 12.3376 15.5C11.7722 15.3142 11.2917 14.9328 10.9824 14.4243C10.6731 13.9159 10.5553 13.3138 10.6502 12.7263C10.7451 12.1388 11.0465 11.6044 11.5001 11.2192C11.9538 10.8341 12.53 10.6234 13.1251 10.625H15.4626C15.8635 10.6261 16.2588 10.5308 16.6152 10.3471C16.9715 10.1634 17.2784 9.89665 17.5101 9.56942C17.7417 9.24219 17.8913 8.86406 17.9461 8.46691C18 8.06976 17.9594 7.66525 17.8251 7.2875C17.3279 5.88371 16.4545 4.64357 15.3003 3.70256C14.146 2.76155 12.7553 2.15588 11.2801 1.95172C9.80497 1.74756 8.30206 1.95276 6.93562 2.5449C5.56917 3.13705 4.39176 4.09335 3.53201 5.30935C2.67226 6.52534 2.16325 7.95424 2.06059 9.43993C1.95793 10.9256 2.26558 12.4109 2.94991 13.7336C3.63425 15.0563 4.66895 16.1655 5.94096 16.9399C7.21298 17.7144 8.67338 18.1243 10.1626 18.125C10.8981 18.1271 11.6302 18.0261 12.3376 17.825C12.5974 17.7522 12.8224 17.5884 12.9716 17.3636C13.1207 17.1387 13.1841 16.8677 13.1501 16.6Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + --icon-brief-enrichi: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8751 7.5C12.5655 7.5 13.1251 6.94036 13.1251 6.25C13.1251 5.55965 12.5655 5 11.8751 5C11.1848 5 10.6251 5.55965 10.6251 6.25C10.6251 6.94036 11.1848 7.5 11.8751 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 13.75C7.22029 13.75 7.50011 13.4702 7.50011 13.125C7.50011 12.7798 7.22029 12.5 6.87511 12.5C6.52993 12.5 6.25011 12.7798 6.25011 13.125C6.25011 13.4702 6.52993 13.75 6.87511 13.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 9.375C7.56547 9.375 8.12511 8.81536 8.12511 8.125C8.12511 7.43465 7.56547 6.875 6.87511 6.875C6.18476 6.875 5.62511 7.43465 5.62511 8.125C5.62511 8.81536 6.18476 9.375 6.87511 9.375Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1501 16.6C13.1362 16.3575 13.0519 16.1244 12.9076 15.929C12.7633 15.7337 12.5653 15.5846 12.3376 15.5C11.7722 15.3142 11.2917 14.9328 10.9824 14.4243C10.6731 13.9159 10.5553 13.3138 10.6502 12.7263C10.7451 12.1388 11.0465 11.6044 11.5 11.2192C11.9538 10.8341 12.53 10.6234 13.1251 10.625H15.4626C15.8635 10.6261 16.2588 10.5308 16.6152 10.3471C16.9715 10.1634 17.2784 9.89665 17.5101 9.56942C17.7417 9.24219 17.8913 8.86406 17.9461 8.46691C18 8.06976 17.9594 7.66525 17.8251 7.2875C17.3279 5.88371 16.4545 4.64357 15.3003 3.70256C14.146 2.76155 12.7553 2.15588 11.2801 1.95172C9.80497 1.74756 8.30206 1.95276 6.93562 2.5449C5.56917 3.13705 4.39176 4.09335 3.53201 5.30935C2.67226 6.52534 2.16325 7.95424 2.06059 9.43993C1.95793 10.9256 2.26558 12.4109 2.94991 13.7336C3.63425 15.0563 4.66895 16.1655 5.94096 16.9399C7.21298 17.7144 8.67338 18.1243 10.1626 18.125C10.8981 18.1271 11.6302 18.0261 12.3376 17.825C12.5974 17.7522 12.8224 17.5884 12.9716 17.3636C13.1207 17.1387 13.1841 16.8677 13.1501 16.6Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-echantillon-virtuel: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 18V8.12502M10 8.12502L2.01294 5M10 8.12502L17.9879 5M17.9875 5C17.9209 5 17.8298 4.8402 17.725 4.8L10.225 1.96249C10.154 1.93151 10 1.91553 10 1.91553C9.92257 1.91553 9.84597 1.93151 9.775 1.96249L2.275 4.84999C2.17591 4.87623 2.08542 4.92794 2 5C1.92519 5.10562 1.87666 5.23795 1.875 5.37499V14.525C1.87662 14.6498 1.91559 14.7713 2 14.8738C2.05817 14.9763 2.15852 15 2.275 15.1L9.775 18H10.225L17.725 15C17.8415 15 18 15 18 15C18.0844 14.7713 18.1234 14.6498 18.125 14.525V5.425C18.1356 5.2709 18 5.11868 18 5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-upload: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.714 15v1.429a2.857 2.857 0 0 0 2.857 2.857H16.43a2.857 2.857 0 0 0 2.857-2.857V15M5.714 5.714l4.286-5m0 0 4.286 5M10 .714v12.857' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E "); --icon-description: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714294 1.42856H19.2857M0.714294 5.71427H15M0.714294 10H10.7143M0.714294 18.5714H19.2857M0.714294 14.2857H15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); @@ -41,6 +41,11 @@ --icon-pause: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5V15M13 5V15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-download: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.25 9.375L10 13.125M10 13.125L13.75 9.375M10 13.125V1.875M5.625 18.125H14.375' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 1.875L1.875 18.125M1.875 1.875L18.125 18.125' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + --icon-grade-A: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.30393 3.96806L3.11993 16.1601C3.00793 16.4641 2.83193 16.7041 2.59193 16.8801C2.36793 17.0401 2.11993 17.1201 1.84793 17.1201C1.41593 17.1201 1.09593 17.0 0.887928 16.7601C0.679928 16.5201 0.575928 16.2241 0.575928 15.8721C0.575928 15.7281 0.6 15.5761 0.647928 15.4161L6.62393 1.06406C6.75193 0.744065 6.94393 0.496065 7.2 0.320064C7.47193 0.144065 7.75993 0.0720646 8.06393 0.104064C8.35193 0.104064 8.61593 0.192064 8.85593 0.368065C9.11193 0.528065 9.29593 0.760065 9.40793 1.06406L15.3119 15.1281C15.3919 15.3361 15.4319 15.5281 15.4319 15.7041C15.4319 16.1361 15.2879 16.4801 14.9999 16.7361C14.7279 17 14.4239 17.1201 14.0879 17.1201C13.7999 17.1201 13.5359 17.0321 13.2959 16.8561C13.0719 16.6801 12.8959 16.4401 12.7679 16.1361L7.60793 4.11207L8.30393 3.96806ZM3.86393 13.2321L5.18393 10.4721H11.6639L12.1199 13.2321H3.86393Z' fill='%2300945B'/%3E%3C/svg%3E%0A"); + --icon-grade-B: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1121 0.6C9.6481 0.6 10.7921 0.96 11.5441 1.6801C12.2961 2.4 12.6721 3.4641 12.6721 4.8721C12.6721 5.6241 12.4881 6.2881 12.1201 6.8641C11.7521 7.4241 11.2081 7.8641 10.4881 8.1841C9.7681 8.4881 8.8801 8.6401 7.8241 8.6401L7.9201 7.5601C8.4161 7.5601 8.9841 7.6321 9.6241 7.7761C10.2641 7.9041 10.8801 8.1441 11.4721 8.4961C12.0801 8.8321 12.5761 9.3121 12.9601 9.9361C13.3601 10.5441 13.5601 11.3281 13.5601 12.2881C13.5601 13.3441 13.3841 14.2081 13.0321 14.8801C12.6961 15.5521 12.2481 16.0721 11.6881 16.4401C11.1281 16.8081 10.5281 17.0641 9.8881 17.2081C9.2481 17.3361 8.6321 17.4 8.0401 17.4H2.0641C1.6481 17.4 1.2961 17.2641 1.0081 17C0.736098 16.7041 0.6 16.3521 0.6 15.9361V2.0641C0.6 1.6481 0.736098 1.3041 1.0081 1.0321C1.2961 0.744098 1.6481 0.6 2.0641 0.6H8.1121ZM7.6801 3.4321H3.4081L3.7201 3.0481V7.3921L3.4321 7.1761H7.7521C8.2161 7.1761 8.6321 7.0241 9.0 6.7201C9.3681 6.4161 9.5521 5.9761 9.5521 5.4C9.5521 4.7121 9.3761 4.2161 9.0241 3.9121C8.6881 3.5921 8.2401 3.4321 7.6801 3.4321ZM7.8721 10.0081H3.5041L3.7201 9.8161V14.8801L3.4801 14.6401H8.0401C8.7761 14.6401 9.3601 14.4481 9.7921 14.0641C10.2241 13.6641 10.4401 13.0721 10.4401 12.2881C10.4401 11.5681 10.2961 11.0481 10.0081 10.7281C9.7201 10.4081 9.3761 10.2081 8.9761 10.1281C8.5761 10.0481 8.2081 10.0081 7.8721 10.0081Z' fill='%235EAC0D'/%3E%3C/svg%3E%0A"); + --icon-grade-C: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6 1.35592C13.016 1.56392 13.256 1.89192 13.32 2.33992C13.4 2.78792 13.288 3.19592 12.984 3.56392C12.776 3.85192 12.504 4.01192 12.168 4.04392C11.848 4.07592 11.52 4.01192 11.184 3.85192C10.8 3.67592 10.392 3.53992 9.96 3.44392C9.544 3.34792 9.104 3.3 8.64 3.3C7.776 3.3 7 3.43592 6.312 3.70792C5.64 3.97992 5.064 4.37192 4.584 4.88392C4.104 5.37992 3.736 5.97192 3.48 6.65992C3.24 7.34792 3.12 8.10792 3.12 8.93992C3.12 9.91592 3.256 10.7639 3.528 11.4839C3.816 12.2039 4.208 12.8039 4.704 13.2839C5.2 13.7639 5.784 14.1239 6.456 14.3639C7.128 14.5879 7.856 14.6999 8.64 14.6999C9.072 14.6999 9.504 14.6599 9.936 14.5799C10.368 14.5 10.784 14.3559 11.184 14.1479C11.52 13.9879 11.848 13.9319 12.168 13.9799C12.504 14.0279 12.784 14.1959 13 14.4839C13.328 14.8839 13.44 15.3 13.344 15.7319C13.264 16.1479 13.024 16.4519 12.624 16.6439C12.208 16.8519 11.776 17.0279 11.328 17.1719C10.896 17.3 10.456 17.3959 10 17.4599C9.56 17.5399 9.104 17.5799 8.64 17.5799C7.488 17.5799 6.392 17.3959 5.352 17.0279C4.328 16.6599 3.408 16.1159 2.592 15.3959C1.792 14.6759 1.16 13.7799 0.696 12.7079C0.232 11.6199 0 10.3639 0 8.93992C0 7.70792 0.208 6.57192 0.624 5.53192C1.056 4.49192 1.656 3.59592 2.424 2.84392C3.208 2.07592 4.128 1.48392 5.184 1.06792C6.24 0.635922 7.392 0.419922 8.64 0.419922C9.344 0.419922 10.032 0.5 10.704 0.659922C11.376 0.819921 12 1.05192 12.6 1.35592Z' fill='%23EEAF10'/%3E%3C/svg%3E%0A"); + --icon-grade-D: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.7 0.6C8.852 0.6 9.876 0.816098 10.772 1.2481C11.668 1.6801 12.42 2.2881 13.028 3.0721C13.652 3.8401 14.116 4.7361 14.42 5.7601C14.74 6.7681 14.9 7.8481 14.9 9.0001C14.9 10.5521 14.62 11.9681 14.06 13.2481C13.5 14.5121 12.684 15.5201 11.612 16.2721C10.556 17.0241 9.252 17.4 7.7 17.4H1.964C1.548 17.4 1.196 17.2641 0.908 17C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.6 1.964 0.6H7.7ZM7.46 14.6401C8.468 14.6401 9.292 14.3841 9.932 13.8721C10.572 13.3441 11.036 12.6561 11.324 11.8081C11.628 10.9441 11.78 10.0081 11.78 9.0001C11.78 8.2481 11.692 7.5361 11.516 6.8641C11.356 6.1761 11.1 5.5761 10.748 5.0641C10.396 4.5361 9.948 4.1201 9.404 3.8161C8.86 3.5121 8.212 3.3601 7.46 3.3601H3.26L3.5 3.1441V14.9041L3.356 14.6401H7.46Z' fill='%23F26A4F'/%3E%3C/svg%3E%0A"); + --icon-grade-E: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.964 0.6H10.004C10.42 0.6 10.764 0.736098 11.036 1.0081C11.324 1.2641 11.468 1.6 11.468 2.0161C11.468 2.4161 11.324 2.7441 11.036 3.0001C10.764 3.2401 10.42 3.3601 10.004 3.3601H3.284L3.5 2.9521V7.6321L3.308 7.4401H8.924C9.34 7.4401 9.684 7.5761 9.956 7.8481C10.244 8.1041 10.388 8.4401 10.388 8.8561C10.388 9.2561 10.244 9.5841 9.956 9.8401C9.684 10.0801 9.34 10.2 8.924 10.2001H3.38L3.5 10.0081V14.8561L3.308 14.6401H10.004C10.42 14.6401 10.764 14.7841 11.036 15.0721C11.324 15.3441 11.468 15.6641 11.468 16.0321C11.468 16.4321 11.324 16.7601 11.036 17.0161C10.764 17.2721 10.42 17.4 10.004 17.4H1.964C1.548 17.4 1.196 17.2641 0.908 17C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.6 1.964 0.6Z' fill='%23F32D2F'/%3E%3C/svg%3E%0A"); } [data-icon] { diff --git a/src/components/design-to-light/DTLButton.vue b/src/components/design-to-light/DTLButton.vue index cbb6c45..19a4e8f 100644 --- a/src/components/design-to-light/DTLButton.vue +++ b/src/components/design-to-light/DTLButton.vue @@ -1,5 +1,7 @@ - - diff --git a/src/components/design-to-light/DTLPanel.vue b/src/components/design-to-light/DTLPanel.vue index c31ea12..a8edb70 100644 --- a/src/components/design-to-light/DTLPanel.vue +++ b/src/components/design-to-light/DTLPanel.vue @@ -1,38 +1,77 @@ - -