@cnamts/synapse 1.0.1 → 1.0.3

package/src/assets/amelipro/img/amelipro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="99" height="64" viewBox="0 0 99 64" fill="none"><path fill="#00a5df" d="M68.38 38.78c.54.32 1.45.63 2.31.63 2.76 0 5.38-1.87 5.38-5.72v-2.86c0-3.59-2.62-5.7-5.7-5.7-3.09 0-5.71 2.11-5.71 5.7v13.73h3.72v-5.78Zm0-2.99v-4.83c0-1.8.85-2.68 2-2.68 1.12 0 1.97.88 1.97 2.68v2.6c0 1.97-.88 2.7-2 2.7-.67 0-1.32-.2-1.97-.47ZM77.97 39.07h3.7v-8.68c0-1.23.67-2.11 1.84-2.11.63 0 1.28.13 1.85.29l.7-3.02a8.47 8.47 0 0 0-2.57-.42c-3.1 0-5.52 2.11-5.52 5.26v8.68ZM86.43 33.45c0 3.72 2.44 5.96 5.8 5.96 3.35 0 5.8-2.24 5.8-5.96V31.1c0-3.72-2.45-5.96-5.8-5.96-3.36 0-5.8 2.24-5.8 5.96v2.36Zm3.69-.13v-2.1c0-1.8.52-2.94 2.1-2.94 1.56 0 2.11 1.14 2.11 2.94v2.1c0 1.8-.55 2.94-2.1 2.94-1.57 0-2.11-1.14-2.11-2.94Z"/><path fill="#0c419a" d="M.47 35.64c0-2.82 2.38-4.42 7.64-4.97-.08-1.2-.82-1.9-2.27-1.9-1.12 0-2.24.48-3.5 1.23L.94 27.36a10.75 10.75 0 0 1 5.67-1.78c3.39 0 5.25 1.97 5.25 6.09v7.72H8.15v-1.3s-1.53 1.64-3.7 1.64C2 39.69.48 37.9.48 35.64Zm7.64-.22v-2.34c-2.8.37-3.88 1.26-3.88 2.27 0 .85.6 1.3 1.53 1.3.86-.04 1.64-.52 2.35-1.23ZM57.84 21.75c0-1.22.97-2.08 2.28-2.08 1.3 0 2.27.86 2.27 2.08 0 1.23-.97 2.08-2.27 2.08-1.35 0-2.28-.89-2.28-2.08Zm.3 4.05h3.91v13.48h-3.9V25.8ZM36.24 32.7c0-4.37 2.76-7.05 6.07-7.05 3.77 0 5.85 2.79 5.85 6.46 0 .7-.07 1.45-.14 1.79h-7.94c.33 1.97 1.67 2.86 3.43 2.86 1 0 1.86-.41 2.83-.97l1.34 2.49a8.4 8.4 0 0 1-4.7 1.52c-3.87-.04-6.74-2.64-6.74-7.1Zm8.6-1.48c0-1.48-.85-2.56-2.41-2.56-1.23 0-2.1.85-2.35 2.56h4.77ZM18.18 27.66c1.08-1.08 2.28-2 4.03-2 1.86 0 3.02.77 3.69 2.18 1.15-1.19 2.38-2.19 4.17-2.19 2.9 0 4.21 2.08 4.21 5.39v8.28h-4.14v-7.73c0-1.85-.52-2.41-1.56-2.41-.63 0-1.34.4-2.16 1.23v8.95h-4.18v-7.77c0-1.85-.48-2.41-1.56-2.41-.63 0-1.34.4-2.16 1.23v8.95h-4.14V26.02h3.8v1.64ZM50.52 35.2V20.34h3.92v15c0 .86.37 1.12.7 1.12.15 0 .26 0 .49-.04l.48 2.94c-.44.18-1.08.33-1.97.33-2.72.04-3.62-1.75-3.62-4.5Z"/></svg>

package/src/assets/amelipro/img/cartouche_nouveauTEL.svg

@@ -0,0 +1,47 @@
+<svg id="cartouche" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="229.759" height="30" viewBox="0 0 229.759 30">
+  <defs>
+    <pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 310 58">
+      <image width="310" height="58" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAAA6CAYAAAA6CXVmAAAACXBIWXMAAC4jAAAuIwF4pT92AAAEBElEQVR4Xu3dTW8TRxyA8WcdlwRoGwEtLSoFteVSKBL9/l+lL4eiJoXQiINTJ8Q7Pfxn7MnGDuGUWev5SdYmjnJ9NLs7L11KCUnaJtPhF13XdeXH4d8kqUEJIFWjtK4esXVdNwEmwE6+dhg4SW1K+dMDC6BPKfVQhS1HbQrsAXfzdUoETpJa0wPnwByY5et5SqmfwvL2c0LE7CvgEfCACNwOjtoktSURo7QZ8A44AI6Ak67rUv2MbYcI2SPgF+An4B5wC8MmqS0JOAOOgd/zd/8Bp8CihG04YvsReAl8C+zi7aiktvRExA6JyB0Cf5PfDdQjtvKM7Q5wn4jad0TsDJuklvTEMzWA10S3lu8EhtM9yhvRW8RIbQ+4jWGT1JY+X3eJXpWZHMCaeWyspnhMBh9Jaklp06VpaQZL0tYxbJK2jmGTtHUMm6StsylsbvkhabSGYSvLFPrqauQkjUodtkQsKD0DTojlCR8wbpJGpoStjNROgffAG+Bt/vk0/824SRqFeoJuT4zS3gB/EmtGy+4e94lVCO70Ial5U4idJ7uuWxBhewv8xmo/tjKr9x7GTdII1CO2sg3Ie+Av1i9VMG6SmrcMWx61la1Ajjf/i3GT1LYLi+CrW9I5xk3SSF3a3cO4SRq7ddsWGTdJo7Y2bPBJcStTQcrLBkm6URvDBlfGrbwt3WG1He8uhk1SA64MG6yNWwnaLvA58AWxffhneMCypAZca9uifHR8veTqH+IAhUNWy67KHuSSdKOuFTZJGpNrhS2fFF9uP/eBb4DHxBF9+3j2qKSGfDRGVdT2iOkdT4CfgefAD8ADVmHz+ZqkG3dl2NZE7SnwAnhFhO0x8CVxrp9Rk9SEjWG7Imq/5uvT/L2jNUlNWRu2T4iaqw4kNedS2IyapLG7EDajJmkbLMOWo1aWRhk1SaNVj9g64u3mPvA98dbzFUZN0shM4MIt6G3ga+AZ8JKI2hOMmqQRqUdsEyJsD4mJt8+IeWqeUCVpVErYhkumHhIjt7JcyqhJGo3hM7Yp8ZztDqutiJx8K2lUhvPYyshtUl2NmqRR2bSkyphJGq2P7u4hSWNj2CRtHcMmaesYNklbZ90pVSl/+uojSS2p+1SatTQMW0+cRnVGnDw1z987spPUkp7o0ynRqwXVIKwOWw+cAyfAv8TReuBBLZLa0xNROyR6dUL0q4dV2Mqt5xw4Av4g5rK9xvMMJLUnESO1Y6JXR0S/eiDVI7YFMAMO8u8HwF1cJyqpPeUQ9xnwjujVLH9HF4e8Q9d1E2IEt0cEbS//7m2opBaVx2dzImpz4Dyl1C/DBsu4DdeJOlqT1KJ6BscC6FNKPVQjtiJvOgkGTdI4JIBUxexS2CRp7P4HtpEH4Iv2VoMAAAAASUVORK5CYII="/>
+    </pattern>
+    <linearGradient id="linear-gradient" x1="0.5" y1="0.004" x2="0.5" y2="1.009" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a7a9ab"/>
+      <stop offset="0.07" stop-color="#6d6e71"/>
+      <stop offset="0.36" stop-color="#6a6b6d"/>
+      <stop offset="0.61" stop-color="#606063"/>
+      <stop offset="0.86" stop-color="#4f4e51"/>
+      <stop offset="1" stop-color="#414042"/>
+    </linearGradient>
+  </defs>
+  <rect id="fond_blanc" data-name="fond blanc" width="229.759" height="23.618" transform="translate(0 2.873)" fill="#fff"/>
+  <text id="_3608" data-name="3608" transform="translate(10.395 21.298)" fill="#221f20" font-size="19" font-family="Arial-BoldMT, Arial" font-weight="700"><tspan x="0" y="0">3608</tspan></text>
+  <g id="fond_gris" data-name="fond gris" transform="translate(63.509)">
+    <rect id="Rectangle_281" data-name="Rectangle 281" width="162.632" height="30" fill="url(#pattern)"/>
+    <path id="dégradé" d="M30.12,1.02V7.182l6.272,6.272L30.12,19.726v6.162H187.6V1.02Z" transform="translate(-27.576 1.217)" fill="url(#linear-gradient)"/>
+  </g>
+  <g id="service_gratuit_prix_appel" data-name="service gratuit prix appel" transform="translate(75.022 7.785)">
+    <path id="Tracé_16614" data-name="Tracé 16614" d="M34.254,6.36c0-1.908,1.031-2.456,2.346-2.478a11.6,11.6,0,0,1,3.355.285V5.614c-.746,0-2.456-.132-2.895-.132s-1.118.022-1.118.877V6.82c0,.768.263.921.943.921h1.25c1.711,0,2.061,1.491,2.061,2.566v.636c0,2.193-1.228,2.588-2.412,2.588a9.956,9.956,0,0,1-3.333-.395v-1.4a30,30,0,0,0,3,.154c.5,0,1.075,0,1.075-.833v-.526c0-.548-.154-.9-.789-.9H36.4c-2.193,0-2.193-1.711-2.193-2.544Z" transform="translate(-34.21 -3.18)" fill="#fff"/>
+    <path id="Tracé_16615" data-name="Tracé 16615" d="M40.137,5c1.82,0,2.654.241,2.654,2.544a1.513,1.513,0,0,1-1.8,1.842H38.975c0,1.272.439,1.338,1.338,1.338a13.158,13.158,0,0,0,2.3-.132V11.8a9.232,9.232,0,0,1-3.224.373c-1.6,0-2.061-1.031-2.061-3.575C37.4,5.592,38.141,5,40.137,5Zm.482,2.982a.482.482,0,0,0,.526-.526c0-.877,0-1.031-.921-1.031s-1.184,0-1.184,1.557Z" transform="translate(-30.488 -1.82)" fill="#fff"/>
+    <path id="Tracé_16616" data-name="Tracé 16616" d="M40.23,5.147h1.4l.263.877a2.544,2.544,0,0,1,1.8-1.009,2.193,2.193,0,0,1,.7,0V6.792h-.9a1.6,1.6,0,0,0-1.6.768v4.386H40.23Z" transform="translate(-27.028 -1.836)" fill="#fff"/>
+    <path id="Tracé_16617" data-name="Tracé 16617" d="M44.049,5.06l1.36,4.825L46.834,5.06H48.61l-2.193,6.974H44.553L42.36,5.06Z" transform="translate(-24.487 -1.749)" fill="#fff"/>
+    <path id="Tracé_16618" data-name="Tracé 16618" d="M45.492,4.229c0-.2,0-.329.285-.329h1.228c.2,0,.285.154.285.329V5.391a.263.263,0,0,1-.285.307H45.777a.263.263,0,0,1-.285-.307Zm0,2.193h1.667v7H45.492Z" transform="translate(-20.755 -3.132)" fill="#fff"/>
+    <path id="Tracé_16619" data-name="Tracé 16619" d="M48.817,5a9.145,9.145,0,0,1,2.939.482v1.14H49.563c-1.053,0-1.118,0-1.118,2.193s.263,2.061,1.118,2.061,2.193-.132,2.193-.132v1.162a5.811,5.811,0,0,1-2.982.439c-1.184,0-2.083-.68-2.083-3.553S47.611,5,48.817,5Z" transform="translate(-19.322 -1.82)" fill="#fff"/>
+    <path id="Tracé_16620" data-name="Tracé 16620" d="M52.069,5c1.82,0,2.654.241,2.654,2.544A1.535,1.535,0,0,1,52.968,9.3H50.907c0,1.272.417,1.338,1.316,1.338a13.4,13.4,0,0,0,2.325-.132V11.8a9.3,9.3,0,0,1-3.224.373c-1.6,0-2.083-1.031-2.083-3.575C49.306,5.592,50.073,5,52.069,5Zm.482,2.982a.461.461,0,0,0,.548-.461c0-.877,0-1.031-.9-1.031s-1.206,0-1.184,1.557Z" transform="translate(-16.279 -1.82)" fill="#fff"/>
+    <path id="Tracé_16621" data-name="Tracé 16621" d="M54.212,9.458a2.434,2.434,0,0,1-.7-1.93c0-1.667.768-2.478,2.193-2.478h3.816v1.1l-.7.241a2.917,2.917,0,0,1,.241,1.36,2.061,2.061,0,0,1-2.193,2.346H55.4c-.175,0-.461,0-.461.307s.2.351.461.351h1.93c1.14,0,1.864.658,1.864,2.061v.768A1.8,1.8,0,0,1,57.216,15.6H55.44a1.82,1.82,0,0,1-1.952-2.018v-.9l.548-.636a1.535,1.535,0,0,1-.614-1.338,1.228,1.228,0,0,1,.789-1.25ZM55.944,8.6H56.6c.636,0,.811-.439.789-1.075s-.219-1.009-.811-1.009h-.636c-.658,0-.768.482-.768,1.009S55.352,8.6,55.944,8.6Zm0,5.526h.943c.592,0,.658-.329.658-.746v-.5c0-.395-.154-.636-.614-.636H55.155v1.162c.044.636.373.724.789.724Z" transform="translate(-11.295 -1.761)" fill="#fff"/>
+    <path id="Tracé_16622" data-name="Tracé 16622" d="M56.532,5.147h1.4l.263.877A2.544,2.544,0,0,1,60,5.015a2.193,2.193,0,0,1,.7,0V6.792h-.921a1.6,1.6,0,0,0-1.6.768v4.386H56.51Z" transform="translate(-7.606 -1.836)" fill="#fff"/>
+    <path id="Tracé_16623" data-name="Tracé 16623" d="M58.739,9.676a1.711,1.711,0,0,1,1.842-1.908h1.842a3.223,3.223,0,0,0,0-.461c0-.746-.307-.855-.833-.855a14.649,14.649,0,0,0-2.632.154V5.465A6.952,6.952,0,0,1,61.809,5C63.169,5,64,5.509,64,7.2V12.11H62.686l-.351-.768a2.675,2.675,0,0,1-1.908.855,1.776,1.776,0,0,1-1.776-1.864Zm2.193,1.031a3,3,0,0,0,1.447-.526V8.886l-1.513.132c-.439,0-.5.417-.5.724v.329c.044.592.329.636.614.636Z" transform="translate(-5.055 -1.825)" fill="#fff"/>
+    <path id="Tracé_16624" data-name="Tracé 16624" d="M61.41,6.506l1.009-.395L62.7,4.16h1.382V6.112h1.4v1.4h-1.4v2.873c0,1.031.219,1.25.548,1.382a7.851,7.851,0,0,0,.789.285v1.118H63.976c-.943,0-1.557-.636-1.557-2.5V7.515H61.41Z" transform="translate(-1.761 -2.822)" fill="#fff"/>
+    <path id="Tracé_16625" data-name="Tracé 16625" d="M63.59,5.06h1.667V9.731c0,.7.285.943.7.943a2.193,2.193,0,0,0,1.513-.592V5.06h1.645v6.974H67.8l-.329-.746a3.18,3.18,0,0,1-2,.877c-1.469,0-1.886-1.14-1.886-2.456Z" transform="translate(0.84 -1.749)" fill="#fff"/>
+    <path id="Tracé_16626" data-name="Tracé 16626" d="M66.56,4.229c0-.2,0-.329.285-.329H68.1c.175,0,.263.154.263.329V5.391c0,.2,0,.307-.263.307h-1.25a.285.285,0,0,1-.285-.307Zm0,2.193h1.667v7H66.56Z" transform="translate(4.383 -3.132)" fill="#fff"/>
+    <path id="Tracé_16627" data-name="Tracé 16627" d="M67.66,6.506l1.031-.395.263-1.952h1.382V6.112h1.4v1.4h-1.4v2.873c0,1.031.219,1.25.548,1.382a7.852,7.852,0,0,0,.789.285v1.118H70.226c-.921,0-1.535-.636-1.535-2.5V7.515H67.66Z" transform="translate(5.695 -2.822)" fill="#fff"/>
+    <path id="Tracé_16628" data-name="Tracé 16628" d="M71.17,6.812h1.82V4.86h1.4V6.812H76.17V8.369H74.394v1.952h-1.4V8.369H71.236Z" transform="translate(9.883 -1.987)" fill="#fff"/>
+    <path id="Tracé_16629" data-name="Tracé 16629" d="M75.19,5.132h1.382l.285.7A3.18,3.18,0,0,1,78.765,5C80.3,5,80.8,6.447,80.8,8.553s-.307,3.618-2.039,3.618a4.386,4.386,0,0,1-1.8-.417v3.9H75.3Zm3.136,5.636c.526,0,.833-.329.833-2.193s-.307-2.039-.833-2.039a2.434,2.434,0,0,0-1.469.439V10.5A3.443,3.443,0,0,0,78.326,10.768Z" transform="translate(14.678 -1.82)" fill="#fff"/>
+    <path id="Tracé_16630" data-name="Tracé 16630" d="M78.2,5.147h1.382l.263.877a2.566,2.566,0,0,1,1.82-1.009,2.04,2.04,0,0,1,.68,0V6.792h-.9a1.623,1.623,0,0,0-1.6.768v4.386H78.2Z" transform="translate(18.269 -1.836)" fill="#fff"/>
+    <path id="Tracé_16631" data-name="Tracé 16631" d="M80.412,4.229c0-.2,0-.329.285-.329h1.228c.175,0,.263.154.263.329V5.391c0,.2,0,.307-.263.307H80.7a.263.263,0,0,1-.285-.307Zm0,2.193h1.667v7H80.412Z" transform="translate(20.904 -3.132)" fill="#fff"/>
+    <path id="Tracé_16632" data-name="Tracé 16632" d="M83.713,8.618,81.52,5.132h2l1.25,2.061L85.972,5h2L85.774,8.509l2.193,3.465H86.081l-1.316-1.93L83.6,12.105h-2Z" transform="translate(22.23 -1.82)" fill="#fff"/>
+    <path id="Tracé_16633" data-name="Tracé 16633" d="M86.007,9.677a1.711,1.711,0,0,1,1.842-1.908h1.842a3.224,3.224,0,0,0,0-.461c0-.746-.307-.855-.833-.855a15.02,15.02,0,0,0-2.654.154V5.467a7.061,7.061,0,0,1,2.939-.461c1.36,0,2.193.5,2.193,2.193v4.912H90.02l-.351-.768a2.675,2.675,0,0,1-1.908.855,1.776,1.776,0,0,1-1.754-1.864ZM88.2,10.708a3,3,0,0,0,1.447-.526V8.888L88.2,9.019c-.439,0-.526.417-.526.724v.329c.044.592.329.636.636.636Z" transform="translate(27.568 -1.826)" fill="#fff"/>
+    <path id="Tracé_16634" data-name="Tracé 16634" d="M88.91,5.132h1.382l.285.7A3.114,3.114,0,0,1,92.485,5c1.535,0,2.039,1.447,2.039,3.553s-.307,3.618-2.039,3.618a4.605,4.605,0,0,1-1.93-.461v3.947H88.91Zm3.136,5.636c.526,0,.833-.329.833-2.193s-.307-2.039-.833-2.039a2.434,2.434,0,0,0-1.469.439V10.5a3.377,3.377,0,0,0,1.469.263Z" transform="translate(31.046 -1.82)" fill="#fff"/>
+    <path id="Tracé_16635" data-name="Tracé 16635" d="M91.92,5.132h1.36l.285.7A3.18,3.18,0,0,1,95.473,5c1.535,0,2.061,1.447,2.061,3.553s-.329,3.618-2.061,3.618a4.5,4.5,0,0,1-1.908-.461v3.947H91.92Zm3.114,5.636c.526,0,.833-.329.833-2.193s-.285-2.039-.833-2.039a2.434,2.434,0,0,0-1.469.439V10.5a3.443,3.443,0,0,0,1.469.263Z" transform="translate(34.637 -1.82)" fill="#fff"/>
+    <path id="Tracé_16636" data-name="Tracé 16636" d="M97.621,5c1.82,0,2.654.241,2.654,2.544A1.513,1.513,0,0,1,98.542,9.3H96.525c0,1.272.439,1.338,1.338,1.338a13.026,13.026,0,0,0,2.3-.132V11.8a9.232,9.232,0,0,1-3.224.373c-1.6,0-2.061-1.031-2.061-3.575C94.88,5.592,95.626,5,97.621,5ZM98.1,7.982a.482.482,0,0,0,.526-.526c0-.877,0-1.031-.921-1.031s-1.184,0-1.184,1.557Z" transform="translate(38.168 -1.82)" fill="#fff"/>
+    <path id="Tracé_16637" data-name="Tracé 16637" d="M97.75,3.55h1.667v7.566c0,1.009.219,1.228.548,1.36a7.853,7.853,0,0,0,.789.285v1.118H99.373c-1.009,0-1.623-.636-1.623-2.478Z" transform="translate(41.592 -3.55)" fill="#fff"/>
+  </g>
+</svg>

package/src/assets/amelipro/img/logo-menu.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="accueil_amelipro" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 118.6 40" style="enable-background:new 0 0 118.6 40;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#00749C;}
+	.st1{opacity:0.997;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g id="btn_home">
+	<path id="Path_393" class="st0" d="M0,40h40V0H0V40z"/>
+	<g id="picto" transform="translate(10 9)" class="st1">
+		<path id="Path_403" class="st2" d="M2,13.1v8.5C2,21.8,2.1,22,2.5,22h9v-7.7h4.3V22h2.6c0.3,0,0.5-0.2,0.5-0.3v-8.5l-8.4-8.4
+			L2,13.1z M8.8,17.9H5v-3.6h3.8V17.9z"/>
+		<path id="Path_404" class="st2" d="M20.6,10.1L10.5,0L5.7,4.8V2.6c0-0.5-0.5-0.9-1-0.9c-0.5,0-0.8,0.4-0.9,0.9v3.9l-3.6,3.6
+			c-0.3,0.5-0.3,1.1,0,1.5c0.3,0.2,0.5,0.3,0.9,0.3s0.5-0.2,0.9-0.3l8.5-8.5l8.4,8.5c0.4,0.5,1.1,0.5,1.6,0.1c0,0,0.1-0.1,0.1-0.1
+			C20.9,11.1,20.9,10.5,20.6,10.1L20.6,10.1z"/>
+	</g>
+</g>
+<g id="logo_amelipro_blanc" transform="translate(50.369 9)">
+	<g id="Group_60" transform="translate(38.852)">
+		<path id="Path_394" class="st2" d="M1.6,0C0.7,0,0,0.7,0,1.6s0.7,1.6,1.6,1.6c0.9,0,1.6-0.7,1.6-1.6c0,0,0,0,0,0
+			C3.2,0.7,2.5,0,1.6,0C1.6,0,1.6,0,1.6,0z"/>
+	</g>
+	<path id="Path_395" class="st2" d="M39,17.5h2.8V4.4H39V17.5z"/>
+	<g id="Group_61" transform="translate(33.639 0.197)">
+		<path id="Path_396" class="st2" d="M2.7,13.8V0H0v13.7c-0.2,1.9,1.3,3.6,3.2,3.7c0.2,0,0.4,0,0.6,0c0.5,0,0.6-0.1,0.6-0.1v-2.2
+			l-0.6,0.1C3.1,15.2,2.7,14.7,2.7,13.8L2.7,13.8z"/>
+	</g>
+	<path id="Path_397" class="st3" d="M60.2,13.8V8.4c0-2.2,1.8-4,4-4c1.1,0,2.1,0.4,2.8,1.2c0.8,0.7,1.2,1.7,1.2,2.8v5.4
+		c0,1-0.4,2.1-1.2,2.8c-0.8,0.8-1.8,1.2-2.9,1.2c-1.1,0-2.1-0.3-2.9-1.1C60.6,15.8,60.2,14.8,60.2,13.8z M62.9,13.7
+		c0,0.3,0.2,0.6,0.4,0.9c0.6,0.5,1.4,0.5,2,0c0.2-0.2,0.4-0.5,0.4-0.9V8.4c0-0.4-0.2-0.7-0.4-1c-0.6-0.4-1.4-0.4-2,0
+		c-0.2,0.3-0.4,0.6-0.4,1V13.7L62.9,13.7z"/>
+	<path id="Path_398" class="st3" d="M51.2,13.1c0,0.7,0.3,4.5-4.3,4.5h-1.1v5.3h-2.7V4.4H47c4.5,0,4.2,3.8,4.2,4.5L51.2,13.1z
+		 M45.8,15h1.4c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.4c0-0.2,0.1-0.3,0.2-0.4V8.3c0-0.3-0.1-0.5-0.3-0.8
+		c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.1-0.5-0.1-0.7-0.1h-1.4L45.8,15L45.8,15z"/>
+	<path id="Path_399" class="st3" d="M54.6,5.5V4.4h-2.5v13.2h2.5V8.5C54.6,7.7,55,7,55.9,7c0.7,0,1.2,0.5,1.3,1.2c0,0,0,0,0,0v0.2
+		h2.6C59.7,4.4,56,3.3,54.6,5.5z"/>
+	<path id="Path_400" class="st2" d="M28.5,4.1c-3.7,0-3.9,3-3.9,4.8v4.2c0,1.5,0.7,4.3,4,4.3c3.4,0,4-3,4-4.4h-2.6v0.5
+		c0,0.4-0.2,0.9-0.5,1.2c-0.6,0.5-1.4,0.5-2,0c-0.3-0.3-0.5-0.7-0.5-1.2v-0.5l0,0v-1.8h5.5V9C32.7,7.2,32.4,4.1,28.5,4.1z M27.1,7.9
+		c0-0.4,0.2-0.9,0.5-1.2c0.3-0.2,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.5,0.7,0.5,1.2V9h-3L27.1,7.9L27.1,7.9z"/>
+	<path id="Path_401" class="st2" d="M19.2,4.4c-1,0-1.9,0.3-2.7,0.9c-0.9-0.7-2-1-3-0.9c-2.2,0-3.9,1.3-3.9,4.5v8.5h2.7V8.3
+		c-0.1-0.4,0.1-0.9,0.4-1.2c0.3-0.3,0.7-0.4,1.1-0.4c0.4,0,0.7,0.1,1,0.4C15,7.4,15.1,7.8,15,8.3v9.1h2.8V8.3c0-0.4,0.2-0.9,0.5-1.2
+		c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.8,0.1,1.1,0.4c0.3,0.3,0.4,0.7,0.4,1.2v9.1h2.8V8.4C23.5,5.4,21.4,4.4,19.2,4.4L19.2,4.4z"/>
+	<path id="Path_402" class="st2" d="M8.4,8.2c0-1.2-0.3-3.7-3.9-3.7c-2.1-0.2-3.9,1.4-4,3.5c0,0.2,0,0.4,0,0.5h2.5V8.2
+		C2.8,7.7,2.9,7.3,3.2,7c0.3-0.3,0.7-0.4,1.1-0.4c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.5,0.7,0.4,1.1v1.1c-1.2,0.3-2.4,0.7-3.4,1.3
+		c-1.5,0.8-2.4,2.4-2.3,4.1c-0.1,1.7,1.3,3.1,3,3.2c1.1,0,2.2-0.4,2.8-1.3c0,0.8,0.2,0.9,0.2,0.9h2.6c-0.2-0.6-0.2-1.2-0.2-1.9
+		L8.4,8.2L8.4,8.2z M5.6,14.4c0,0-0.8,1.2-1.6,1.2c-0.8,0-1.4-0.6-1.5-1.4c0-0.1,0-0.1,0-0.2c0-1,0.5-1.8,1.9-2.3
+		c0.4-0.2,0.8-0.3,1.2-0.4L5.6,14.4L5.6,14.4z"/>
+</g>
+</svg>

package/src/assets/settings.scss

@@ -2,6 +2,7 @@
 @use 'spacers';
 @use 'radius';
 @use '@/assets/tokens';
+@use '@/assets/amelipro/apTokens';
 
 .v-btn {
 	text-transform: inherit !important;
@@ -18,6 +19,11 @@
 	background-color: rgb(0 0 0 / 70%) !important;
 }
 
+.v-tooltip.v-theme--ap .v-overlay__content {
+	background-color: apTokens.$ap-white !important;
+	border: 1px solid apTokens.$ap-parme-darken1 !important;
+}
+
 .v-messages {
 	font-size: 14px !important;
 

package/src/common/imgs/accessibility-svgrepo-com.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9.25 3.75C9.25 4.44036 8.69036 5 8 5C7.30964 5 6.75 4.44036 6.75 3.75C6.75 3.05964 7.30964 2.5 8 2.5C8.69036 2.5 9.25 3.05964 9.25 3.75ZM12 8H9.41901L11.2047 13H9.081L8 9.97321L6.91901 13H4.79528L6.581 8H4V6H12V8Z" fill="#000000"/>
+</svg>

package/src/components/Accordion/Accessibilite/AccessibilityGuide.mdx

@@ -0,0 +1,249 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as AccordionStories from '../Accordion.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
+<Meta of={AccordionStories} />
+
+<div className="accessibility-guide">
+  <Title>Guide d'Accessibilité du Composant Accordion</Title>
+  
+  <div className="intro-section">
+    <img 
+      src={AccessibilityIcon} 
+      alt="Icône d'accessibilité" 
+      className="accessibility-icon"
+    />
+    <p className="intro-text">
+      Le composant Accordion a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
+      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices</a>. 
+      Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
+    </p>
+  </div>
+
+  <div className="criteria-section">
+    <h2>Critères d'accessibilité respectés</h2>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🔍</span>
+        <h3>Structure sémantique</h3>
+      </div>
+      <ul>
+        <li><strong>Rôles ARIA appropriés</strong> : <code>role="button"</code> pour les en-têtes et <code>role="region"</code> pour les panneaux de contenu</li>
+        <li><strong>Niveaux de titres personnalisables</strong> : Utilisation dynamique des balises <code>h1</code> à <code>h6</code> selon le contexte</li>
+        <li><strong>Relations entre éléments</strong> : Connexion entre en-têtes et panneaux via <code>aria-controls</code> et <code>aria-labelledby</code></li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">⌨️</span>
+        <h3>Navigation clavier complète</h3>
+      </div>
+      <ul>
+        <li><strong>Touches Espace et Entrée</strong> : Pour activer/désactiver les panneaux</li>
+        <li><strong>Touches fléchées</strong> : Navigation entre les en-têtes (↑ et ↓)</li>
+        <li><strong>Touches Home/End</strong> : Accès rapide au premier/dernier en-tête</li>
+        <li><strong>Gestion intelligente</strong> : Contournement automatique des éléments désactivés</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">📱</span>
+        <h3>États et retours d'information</h3>
+      </div>
+      <ul>
+        <li><strong>État d'expansion</strong> : <code>aria-expanded</code> indique si un panneau est ouvert ou fermé</li>
+        <li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
+        <li><strong>Indication visuelle</strong> : Rotation de l'icône et changements de couleur pour indiquer l'état</li>
+        <li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🎨</span>
+        <h3>Personnalisation accessible</h3>
+      </div>
+      <ul>
+        <li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant</li>
+        <li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction</li>
+        <li><strong>Cohérence visuelle</strong> : Comportement prévisible dans différents contextes</li>
+      </ul>
+    </div>
+  </div>
+
+  <div className="demo-section">
+    <h2>Démonstration interactive</h2>
+    <p>
+      Explorez ci-dessous un exemple d'Accordion entièrement accessible. 
+      Essayez de naviguer en utilisant uniquement votre clavier pour tester l'accessibilité.
+    </p>
+    <Primary />
+  </div>
+
+  <div className="best-practices">
+    <h2>Bonnes pratiques d'utilisation</h2>
+    <ul>
+      <li>Utilisez des titres concis et descriptifs pour les en-têtes</li>
+      <li>Évitez de placer des éléments interactifs complexes à l'intérieur du contenu des panneaux</li>
+      <li>Maintenez une cohérence dans l'utilisation des niveaux de titres</li>
+      <li>Limitez le nombre d'accordéons sur une même page pour éviter la surcharge cognitive</li>
+    </ul>
+  </div>
+
+  <div className="resources-section">
+    <h2>Ressources supplémentaires</h2>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les accordéons</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://inclusive-components.design/collapsible-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Collapsible Sections</a></li>
+    </ul>
+  </div>
+</div>
+
+<style>
+{`
+  .accessibility-guide {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    color: #333;
+    line-height: 1.6;
+  }
+  
+  .intro-section {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+    border-radius: 12px;
+  }
+  
+  .accessibility-icon {
+    width: 80px;
+    height: 80px;
+    object-fit: contain;
+  }
+  
+  .intro-text {
+    font-size: 1.1rem;
+    margin: 0;
+  }
+  
+  .criteria-section {
+    margin: 3rem 0;
+  }
+  
+  .criteria-section h2 {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    color: #2c3e50;
+    border-bottom: 2px solid #e0e0e0;
+    padding-bottom: 0.5rem;
+  }
+  
+  .criteria-card {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  
+  .criteria-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.12);
+  }
+  
+  .criteria-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  
+  .criteria-icon {
+    font-size: 1.8rem;
+    margin-right: 1rem;
+  }
+  
+  .criteria-header h3 {
+    margin: 0;
+    font-size: 1.4rem;
+    color: #1976d2;
+  }
+  
+  .criteria-card ul {
+    margin: 0;
+    padding-left: 1.5rem;
+  }
+  
+  .criteria-card li {
+    margin-bottom: 0.5rem;
+  }
+  
+  .criteria-card strong {
+    color: #455a64;
+  }
+  
+  .criteria-card code {
+    background-color: #f5f5f5;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    color: #e91e63;
+  }
+  
+  .demo-section {
+    margin: 3rem 0;
+    padding: 2rem;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+  }
+  
+  .best-practices {
+    margin: 3rem 0;
+    padding: 1.5rem;
+    background-color: #e8f5e9;
+    border-left: 4px solid #4caf50;
+    border-radius: 4px;
+  }
+  
+  .best-practices h2 {
+    color: #2e7d32;
+    margin-top: 0;
+  }
+  
+  .resources-section {
+    margin: 3rem 0;
+  }
+  
+  .resources-section a {
+    color: #1976d2;
+    text-decoration: none;
+    border-bottom: 1px dotted;
+    transition: color 0.2s ease;
+  }
+  
+  .resources-section a:hover {
+    color: #0d47a1;
+  }
+  
+  @media (max-width: 768px) {
+    .intro-section {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    .accessibility-icon {
+      margin-bottom: 1rem;
+    }
+  }
+`}
+</style>
+

package/src/components/Accordion/Accordion.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-	import { ref, onMounted, onBeforeUnmount } from 'vue'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { config } from '@/components/Accordion/config'
 	import { mdiChevronRight } from '@mdi/js'
 
-	type EventListener = (event: Event) => void
+	// Importation des composables
+	import useAccordionState from './composables/useAccordionState'
+	import useAccordionGroupCommunication from './composables/useAccordionGroupCommunication'
+	import useAccordionKeyboardNavigation, { type AccordionItem as KeyboardNavigationItem } from './composables/useAccordionKeyboardNavigation'
 
 	interface ContentObject {
 		title: string
@@ -16,6 +18,7 @@
 		title: string
 		content: string | ContentObject
 		headingLevel?: number
+		disabled?: boolean
 	}
 
 	interface Props extends CustomizableOptions {
@@ -41,83 +44,38 @@
 
 	const options = useCustomizableOptions(config, props)
 
+	// Génération d'un ID unique pour cette instance d'accordéon
 	const instanceId = `accordion-${Math.random().toString(36).substring(2, 9)}`
 
-	const ACCORDION_FOCUS_EVENT = 'accordion-focus-changed'
-
-	const openItems = ref<string[]>([])
-	const focusedItemId = ref<string | null>(null)
-
-	const handleFocusChange = (event: CustomEvent) => {
-		const { sourceInstanceId, groupId } = event.detail
-
-		if (sourceInstanceId === instanceId) return
-
-		if (groupId !== props.groupId) return
-
-		focusedItemId.value = null
-	}
-
-	const emitFocusChange = (itemId: string | null) => {
-		const event = new CustomEvent(ACCORDION_FOCUS_EVENT, {
-			bubbles: true,
-			detail: {
-				sourceInstanceId: instanceId,
-				groupId: props.groupId,
-				itemId,
-			},
-		})
-		window.dispatchEvent(event)
-	}
-
-	const toggleItem = (itemId: string) => {
-		// Si cet élément est déjà focalisé, on le garde en mémoire
-		const wasFocused = focusedItemId.value === itemId
-
-		const index = openItems.value.indexOf(itemId)
-		if (index === -1) {
-			openItems.value.push(itemId)
+	// Utilisation du composable pour gérer l'état de l'accordéon
+	const {
+		toggleItem,
+		isItemOpen,
+		isItemFocused,
+		setFocus,
+	} = useAccordionState()
+
+	// Utilisation du composable pour gérer la communication entre accordéons
+	const { emitFocusChange } = useAccordionGroupCommunication(
+		instanceId,
+		props.groupId,
+		itemId => setFocus(itemId),
+	)
+
+	// Utilisation du composable pour gérer la navigation clavier
+	const { handleKeyNavigation } = useAccordionKeyboardNavigation(
+		props.items as KeyboardNavigationItem[],
+		(itemId) => {
 			setFocus(itemId)
-		}
-		else {
-			openItems.value.splice(index, 1)
-			if (!wasFocused) {
-				setFocus(itemId)
-			}
-			else {
-				setFocus(null)
-			}
-		}
-	}
-
-	const isItemOpen = (itemId: string) => {
-		return openItems.value.includes(itemId)
-	}
-
-	const isItemFocused = (itemId: string) => {
-		return focusedItemId.value === itemId
-	}
-
-	// Méthode pour définir explicitement le focus sur un élément
-	const setFocus = (itemId: string | null) => {
-		if (focusedItemId.value === itemId) return
-
-		focusedItemId.value = itemId
-		emitFocusChange(itemId)
-	}
+			emitFocusChange(itemId)
+		},
+	)
 
+	// Fonction pour déterminer le niveau de titre à utiliser
 	const getHeadingTag = (item: AccordionItem) => {
 		const level = item.headingLevel || props.headingLevel
 		return `h${level}`
 	}
-
-	onMounted(() => {
-		window.addEventListener(ACCORDION_FOCUS_EVENT, handleFocusChange as unknown as EventListener)
-	})
-
-	onBeforeUnmount(() => {
-		window.removeEventListener(ACCORDION_FOCUS_EVENT, handleFocusChange as unknown as EventListener)
-	})
 </script>
 
 <template>
@@ -130,7 +88,7 @@
 		}"
 	>
 		<div
-			v-for="item in items"
+			v-for="(item, index) in items"
 			:key="item.id"
 			class="sy-accordion-item"
 			:class="`bg-${options.accordion.backgroundColor}`"
@@ -140,12 +98,20 @@
 				role="button"
 				:aria-expanded="isItemOpen(item.id)"
 				:aria-controls="`accordion-content-${item.id}`"
+				:aria-disabled="item.disabled ? 'true' : 'false'"
 				class="sy-accordion-button"
-				:class="{ 'sy-accordion-button--focused': isItemFocused(item.id) }"
+				:class="{
+					'sy-accordion-button--focused': isItemFocused(item.id),
+					'sy-accordion-button--disabled': item.disabled
+				}"
 				tabindex="0"
-				@click="toggleItem(item.id)"
-				@keydown.space.prevent="toggleItem(item.id)"
-				@keydown.enter.prevent="toggleItem(item.id)"
+				@click="!item.disabled && toggleItem(item.id)"
+				@keydown.space.prevent="!item.disabled && toggleItem(item.id)"
+				@keydown.enter.prevent="!item.disabled && toggleItem(item.id)"
+				@keydown.down.prevent="!item.disabled && handleKeyNavigation($event, item.id, index)"
+				@keydown.up.prevent="!item.disabled && handleKeyNavigation($event, item.id, index)"
+				@keydown.home.prevent="!item.disabled && handleKeyNavigation($event, item.id, index)"
+				@keydown.end.prevent="!item.disabled && handleKeyNavigation($event, item.id, index)"
 			>
 				<component
 					:is="getHeadingTag(item)"
@@ -316,4 +282,10 @@
 .sy-accordion-icon--open {
 	transform: rotate(90deg);
 }
+
+/* Style pour les éléments désactivés */
+.sy-accordion-button--disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
 </style>