leon
2 lines
2.1 MiB
Plaintext
2 lines
2.1 MiB
Plaintext
{"2:2":"const imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1 = \"https://www.figma.com/api/mcp/asset/497a3107-20c3-4b86-9e50-55aca0bc36bb.png\";\nconst imgImage3 = \"https://www.figma.com/api/mcp/asset/4fec3655-cc20-49e6-b47e-8f1fe6ad0726.png\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/1930576b-8937-431c-8779-14f623e1b076.svg\";\n\nexport default function BienvenueOnboarding17() {\n return (\n <div className=\"content-stretch flex flex-col items-center justify-center px-[20px] py-[48px] relative size-full\" data-node-id=\"2:2\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Bienvenue - Onboarding 1/7\">\n <div className=\"content-stretch flex flex-col gap-[30px] h-[639px] items-center justify-center max-w-[448px] relative shrink-0 w-full\" data-node-id=\"2:5\" data-name=\"Main Content Container\">\n <div className=\"content-stretch flex flex-col h-[496px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"2:6\" data-name=\"Top Section: Image & Logo:margin\">\n <div className=\"content-stretch flex flex-col gap-[24px] h-[483px] items-center relative shrink-0 w-full\" data-node-id=\"2:7\" data-name=\"Top Section: Image & Logo\">\n <div className=\"content-stretch flex flex-col h-[47px] items-center relative shrink-0 w-full\" data-node-id=\"2:8\" data-name=\"Discrete Logo:margin\">\n <div className=\"content-stretch flex flex-col h-[47px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"2:9\" data-name=\"Discrete Logo → Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[28px] text-[rgba(226,232,240,0.8)] text-center tracking-[4.4px] uppercase whitespace-nowrap\" data-node-id=\"2:10\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[326px] items-center justify-center max-h-[442px] relative shrink-0 w-full\" data-node-id=\"2:11\" data-name=\"Silhouettes Image Container\">\n <div className=\"h-[369px] overflow-clip relative shrink-0 w-[337px]\" data-node-id=\"2:12\" data-name=\"Haptika Silhouettes\">\n <div className=\"absolute h-[371px] left-[19.5px] top-[-1px] w-[162px]\" data-node-id=\"663:18\" data-name=\"Gemini_Generated_Image_86lnbp86lnbp86ln 1\">\n <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <img alt=\"\" className=\"absolute h-full left-[-11.23%] max-w-none top-0 w-[208.88%]\" src={imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1} />\n </div>\n </div>\n <div className=\"absolute h-[371px] left-[178.5px] top-[-1px] w-[138px]\" data-node-id=\"663:19\" data-name=\"image 3\">\n <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <img alt=\"\" className=\"absolute h-full left-[-130.23%] max-w-none top-0 w-[247.18%]\" src={imgImage3} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[320px] px-[12.47px] relative shrink-0\" data-node-id=\"2:17\" data-name=\"Tagline\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"2:18\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px] mb-0 whitespace-pre\">{`Prenez en main votre système nerveux `}</p>\n <p className=\"leading-[22px] mb-0 whitespace-pre\">{`autonome et explorez de nouvelles façons `}</p>\n <p className=\"leading-[22px] whitespace-pre\">{`d'agir sur votre état de stress.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[112px] items-center relative shrink-0 w-full\" data-node-id=\"2:15\" data-name=\"Bottom Section: Text & Action\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"2:459\" data-name=\"Action Section\">\n <div className=\"bg-[#79d3ff] border border-[#1a3045] border-solid content-stretch flex gap-[8.01px] items-center justify-center px-px py-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"2:460\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"2:461\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#060d18] text-[12px] text-center whitespace-nowrap\" data-node-id=\"2:462\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Continuer</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"2:463\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"2:465\" data-name=\"Container\">\n <div className=\"bg-[#4ab8e8] h-[8px] relative rounded-[9999px] shrink-0 w-[18px]\" data-node-id=\"2:467\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:466\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:468\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:18\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:469\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:470\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:471\" data-name=\"Background\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"2:473\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#889299] text-[12px] text-center whitespace-nowrap\" data-node-id=\"2:474\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">1/7</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","2:30":"const imgOverlay = \"https://www.figma.com/api/mcp/asset/3159d1f4-7e92-491a-a5c0-1496ec6ec71a.svg\";\nconst imgOverlay1 = \"https://www.figma.com/api/mcp/asset/72c9464e-8541-4a13-84d3-d29a4ef21597.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/fb3eca88-6445-44b5-8073-10b655328b57.svg\";\n\nexport default function ComprendreOnboarding27() {\n return (\n <div className=\"content-stretch flex flex-col items-center justify-center px-[20px] py-[48px] relative size-full\" data-node-id=\"2:30\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Comprendre - Onboarding 2/7\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[706px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"2:31\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[18px] items-start relative shrink-0 w-full\" data-node-id=\"2:32\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"2:35\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center w-full\" data-node-id=\"2:36\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Quel est le rôle de votre système nerveux autonome ?</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"2:37\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.5px] w-full whitespace-pre-wrap\" data-node-id=\"2:38\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Le SNA régule de nombreuses fonctions essentielles, comme la respiration, le rythme cardiaque, le sommeil ou encore la vigilance.</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] tracking-[-0.6px]\">Il est composé de deux modes — sympathique et parasympathique — dont l’équilibre influence notre état physiologique et notre capacité à faire face aux contraintes du quotidien.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[16px] h-[138px] items-start relative shrink-0 w-full\" data-node-id=\"2:39\" data-name=\"Cards Section\">\n <div className=\"border border-[#1a3045] border-solid content-stretch flex flex-[1_0_0] flex-col gap-[16px] h-[138px] items-start min-w-px p-[17px] relative rounded-[14px]\" data-node-id=\"2:40\" data-name=\"Sympathetic Card\">\n <div aria-hidden className=\"absolute bg-[#0c1927] inset-0 pointer-events-none rounded-[14px]\" />\n <div className=\"relative shrink-0 w-[140px]\" data-node-id=\"176:417\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[38px]\" data-node-id=\"2:41\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"content-stretch flex flex-col h-[38px] items-start relative shrink-0 w-[92px]\" data-node-id=\"2:44\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[38px] justify-center leading-[0] relative shrink-0 text-[#ef4444] text-[15px] tracking-[-0.5px] w-[93px] whitespace-pre-wrap\" data-node-id=\"2:45\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Mode `}</p>\n <p className=\"leading-[20px]\">Sympathique</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[50px] relative shrink-0 w-[140px]\" data-node-id=\"2:43\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-full\" data-node-id=\"2:46\" data-name=\"List\">\n <div className=\"content-stretch flex gap-[5px] items-center relative shrink-0 w-full\" data-node-id=\"175:415\">\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-[22px] items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0 w-[50px]\" data-node-id=\"2:47\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] whitespace-nowrap\" data-node-id=\"2:48\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Stress</p>\n </div>\n </div>\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-[22px] items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0 w-[55px]\" data-node-id=\"2:49\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] whitespace-nowrap\" data-node-id=\"2:50\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Fatigue</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[5px] items-center relative shrink-0 w-full\" data-node-id=\"175:416\">\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-[22px] items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"2:51\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] whitespace-nowrap\" data-node-id=\"2:52\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Tension</p>\n </div>\n </div>\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-[22px] items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"73:2\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] whitespace-nowrap\" data-node-id=\"73:3\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Surcharge</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute inset-0 pointer-events-none rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(239,68,68,0.05)]\" />\n </div>\n <div className=\"border border-[#1a3045] border-solid content-stretch flex flex-[1_0_0] flex-col gap-[16px] h-[138px] items-start min-w-px p-[17px] relative rounded-[14px]\" data-node-id=\"2:53\" data-name=\"Parasympathetic Card\">\n <div aria-hidden className=\"absolute bg-[#0c1927] inset-0 pointer-events-none rounded-[14px]\" />\n <div className=\"h-[38px] relative shrink-0 w-[140px]\" data-node-id=\"176:418\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[38px]\" data-node-id=\"2:54\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay1} />\n </div>\n <div className=\"content-stretch flex flex-col h-full items-start relative shrink-0 w-[92px]\" data-node-id=\"2:57\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#4ab8e8] text-[15px] tracking-[-0.5px] whitespace-nowrap\" data-node-id=\"2:58\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px] mb-0\">Mode Para-</p>\n <p className=\"leading-[22px]\">sympathique</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"2:56\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[6px] h-[51px] items-start relative shrink-0 w-[135px]\" data-node-id=\"2:59\" data-name=\"List\">\n <div className=\"content-stretch flex flex-[1_0_0] gap-[6px] items-center min-h-px relative w-full\" data-node-id=\"176:420\">\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-full items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"73:7\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] whitespace-nowrap\" data-node-id=\"73:8\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Vitalité</p>\n </div>\n </div>\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-full items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"2:60\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] whitespace-nowrap\" data-node-id=\"2:61\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Calme</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] gap-[8px] items-center min-h-px relative\" data-node-id=\"176:419\">\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-full items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"2:64\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] whitespace-nowrap\" data-node-id=\"2:65\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Régénération</p>\n </div>\n </div>\n <div className=\"bg-[#101f30] border border-[#1a3045] border-solid content-stretch flex flex-col h-full items-start px-[9px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"2:62\" data-name=\"Item\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] whitespace-nowrap\" data-node-id=\"2:63\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Repos</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute inset-0 pointer-events-none rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(74,184,232,0.05)]\" />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-start px-[13px] py-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"2:66\" data-name=\"Educational Points\">\n <div className=\"relative shrink-0\" data-node-id=\"2:67\" data-name=\"List\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-start relative shrink-0 w-full\" data-node-id=\"2:73\" data-name=\"Item\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"2:76\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"2:77\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Un état de stress prolongé ou de tension affecte `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`votre système nerveux dans son ensemble : `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`immunité affaiblie, réduction de l’attention et de `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`la clarté mentale, irritabilité et anxiété croissante, `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">sommeil fragmenté.</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Bonne nouvelle : cet équilibre se mesure, `}</p>\n <p className=\"leading-[20px] whitespace-pre\">et surtout, se régule.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"2:476\" data-name=\"Action Section\">\n <div className=\"bg-[#79d3ff] border border-[#1a3045] border-solid content-stretch flex gap-[8.01px] items-center justify-center px-px py-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"2:477\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"2:478\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#060d18] text-[12px] text-center whitespace-nowrap\" data-node-id=\"2:479\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Continuer</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"2:480\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"2:482\" data-name=\"Container\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:484\" data-name=\"Background\" />\n <div className=\"bg-[#4ab8e8] h-[8px] relative rounded-[9999px] shrink-0 w-[18px]\" data-node-id=\"2:483\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:485\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:20\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:486\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:487\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:488\" data-name=\"Background\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"2:489\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] text-center whitespace-nowrap\" data-node-id=\"2:490\">\n <p className=\"leading-[16px]\">2/7</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","677:64":"const imgContainer = \"https://www.figma.com/api/mcp/asset/f18bb608-c6fe-409e-b7ad-348c75ed0595.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/80aceb5c-5d0e-46eb-8479-a3613a570003.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/7907afb3-39cb-4ada-84a3-1d243596ecbe.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/200d7fd5-6da8-4612-a031-b09f9614130d.svg\";\n\nexport default function ComprendreOnboarding27() {\n return (\n <div className=\"content-stretch flex flex-col items-center justify-center px-[20px] py-[48px] relative size-full\" data-node-id=\"677:64\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Comprendre - Onboarding 2/7\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[935px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"677:65\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:131\" data-name=\"Headline Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"677:132\" data-name=\"Headline Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:133\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center w-full\" data-node-id=\"677:134\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Comment Haptika va agir sur votre stress au quotidien ?</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:135\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] w-full\" data-node-id=\"677:136\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Une approche scientifique et sensorielle pour</p>\n <p className=\"leading-[20px]\">réguler votre système nerveux.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"677:137\" data-name=\"Bento Grid Stack\">\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"677:138\" data-name=\"Section 1: Cartographie (VFC)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"677:141\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[16px] items-start relative size-full\">\n <div className=\"bg-[#19202c] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[8px] shrink-0 size-[40px]\" data-node-id=\"677:142\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[18px]\" data-node-id=\"677:143\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-[272px]\" data-node-id=\"677:145\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:146\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"677:147\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Cartographie Nerveuse</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:148\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.5px] w-full\" data-node-id=\"677:149\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Haptika établit une cartographie de</p>\n <p className=\"leading-[20px]\">votre état nerveux en mesurant plusieurs indices biométriques, dont la variabilité cardiaque (VFC), l’indicateur le plus fiable de l’équilibre de votre système nerveux.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"677:150\" data-name=\"Section 2: Recommandation (Haptics)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"677:151\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[16px] items-start relative size-full\">\n <div className=\"bg-[#19202c] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[8px] shrink-0 size-[40px]\" data-node-id=\"677:152\" data-name=\"Background+Border\">\n <div className=\"h-[18px] relative shrink-0 w-[24px]\" data-node-id=\"677:153\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-[272px]\" data-node-id=\"677:155\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:156\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"677:157\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Protocoles Haptiques</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:158\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"677:159\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">À partir de ces mesures, l’application vous recommande l’un de ses nombreux protocoles haptiques. Une combinaison</p>\n <p className=\"leading-[20px] mb-0\">d’exercices respiratoires, d’ancrage</p>\n <p className=\"leading-[20px]\">et de méditation par vibrations spécifiques et calibrées, afin de ramener le corps vers l’apaisement.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"677:160\" data-name=\"Section 3: Expérience Sensorielle\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"677:161\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[16px] items-start relative size-full\">\n <div className=\"bg-[#19202c] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[8px] shrink-0 size-[40px]\" data-node-id=\"677:162\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"677:163\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-[272px]\" data-node-id=\"677:165\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:166\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"677:167\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Action Active</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"677:168\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"677:169\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Ces protocoles peuvent se vivre les yeux fermés, sans regarder l’écran, pour une expérience pleinement sensorielle. Contrairement à un simple suivi, cette approche agit activement sur votre stress, séance après séance, et affine ses recommandations à mesure qu’elle</p>\n <p className=\"leading-[20px]\">apprend à vous connaître.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"677:113\" data-name=\"Action Section\">\n <div className=\"bg-[#79d3ff] border border-[#1a3045] border-solid content-stretch flex gap-[8.01px] items-center justify-center px-px py-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"677:114\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"677:115\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#060d18] text-[12px] text-center whitespace-nowrap\" data-node-id=\"677:116\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Continuer</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"677:117\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"677:119\" data-name=\"Container\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"677:120\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"677:122\" data-name=\"Background\" />\n <div className=\"bg-[#4ab8e8] h-[8px] relative rounded-[9999px] shrink-0 w-[18px]\" data-node-id=\"677:121\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"677:123\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"677:124\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"677:125\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"677:126\" data-name=\"Background\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"677:127\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] text-center whitespace-nowrap\" data-node-id=\"677:128\">\n <p className=\"leading-[16px]\">3/7</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","2:213":"const imgContainer = \"https://www.figma.com/api/mcp/asset/850807ea-2063-4c9d-b38b-f7dbd2890275.svg\";\nconst imgPulse = \"https://www.figma.com/api/mcp/asset/0a0e146f-315c-486a-941f-1893a777631f.svg\";\nconst imgMoon = \"https://www.figma.com/api/mcp/asset/b4fc50b2-8a5b-4ede-8c43-076be1dd784a.svg\";\nconst imgLightning = \"https://www.figma.com/api/mcp/asset/8ba31dea-dc88-4aa6-9357-f7cf91a5767b.svg\";\n\nexport default function SanteOnboarding47() {\n return (\n <div className=\"content-stretch flex flex-col items-center justify-center px-[20px] py-[48px] relative size-full\" data-node-id=\"2:213\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Santé - Onboarding 4/7\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[698px] items-center justify-end max-w-[448px] relative shrink-0 w-full\" data-node-id=\"2:214\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col gap-[24px] items-center relative shrink-0\" data-node-id=\"2:215\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-center justify-center relative shrink-0 size-[68px]\" data-node-id=\"2:216\" data-name=\"Margin\">\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex items-center justify-center overflow-clip p-px relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(74,184,232,0.15)] shrink-0 size-[68px]\" data-node-id=\"2:217\" data-name=\"Background+Border+Shadow\">\n <div className=\"absolute bg-[rgba(74,184,232,0.1)] blur-[12px] inset-0 rounded-[9999px]\" data-node-id=\"2:218\" data-name=\"Overlay+Blur\" />\n <div className=\"relative shrink-0 size-[30px]\" data-node-id=\"2:219\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[14.48px] relative shrink-0\" data-node-id=\"2:221\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"2:222\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Connecter Apple Santé</p>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[32px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[14px] h-[340px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"2:223\" data-name=\"Privacy Card\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"2:224\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-center justify-center relative shrink-0 w-[328px]\" data-node-id=\"2:227\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center tracking-[-0.5px] w-full whitespace-pre-wrap\" data-node-id=\"2:228\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[21px] mb-0\">{`Haptika a besoin de votre autorisation pour accéder à vos données dans Apple Santé. `}</p>\n <p className=\"leading-[21px]\">Elles servent à calculer votre Balance et à ajuster chaque protocole à votre état réel.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[14px] relative shrink-0 w-full\" data-node-id=\"2:229\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[8px] relative size-full\">\n <div className=\"bg-[#1a3045] h-px relative shrink-0 w-full\" data-node-id=\"2:230\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"h-[242px] relative shrink-0 w-[328px]\" data-node-id=\"146:234\" data-name=\"Instructions List:margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-full\" data-node-id=\"146:235\" data-name=\"Instructions List\">\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[56px] items-center px-[13px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"146:236\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"146:237\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"146:238\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"147:274\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[247px]\" data-node-id=\"146:240\" data-name=\"Container\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start leading-[0] relative size-full\">\n <div className=\"flex flex-col font-['SF_Pro:Bold'] font-bold justify-center relative shrink-0 text-[#dce3f3] text-[12px] whitespace-nowrap\" data-node-id=\"146:241\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Cœur</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal h-[8px] justify-center min-w-full relative shrink-0 text-[10px] text-white w-[min-content]\" data-node-id=\"146:261\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">Variabilité (VFC), fréquence cardiaque, FC au repos.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[56px] items-center px-[13px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"146:242\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"146:243\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"146:244\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"147:277\" data-name=\"Moon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[247px]\" data-node-id=\"146:262\" data-name=\"Container\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start leading-[0] relative size-full\">\n <div className=\"flex flex-col font-['SF_Pro:Bold'] font-bold justify-center relative shrink-0 text-[#dce3f3] text-[12px] whitespace-nowrap\" data-node-id=\"146:263\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Sommeil</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal h-[8px] justify-center min-w-full relative shrink-0 text-[10px] text-white tracking-[-0.07px] w-[min-content]\" data-node-id=\"146:264\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">Durée, phases, respiration et température nocturnes.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[56px] items-center px-[13px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"146:248\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"146:249\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"146:250\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"147:279\" data-name=\"Lightning\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgLightning} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[247px]\" data-node-id=\"147:266\" data-name=\"Container\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start leading-[0] relative size-full\">\n <div className=\"flex flex-col font-['SF_Pro:Bold'] font-bold justify-center relative shrink-0 text-[#dce3f3] text-[12px] whitespace-nowrap\" data-node-id=\"147:267\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Activité</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal h-[8px] justify-center min-w-full relative shrink-0 text-[10px] text-white tracking-[-0.05px] w-[min-content]\" data-node-id=\"147:268\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">Mouvement, séances et dépense énergétique.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"2:254\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"2:524\">\n <div className=\"bg-[#79d3ff] border border-[#1a3045] border-solid content-stretch drop-shadow-[0px_4px_10px_rgba(0,0,0,0.2)] flex flex-col items-center justify-center px-px py-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"2:255\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#060d18] text-[17px] text-center whitespace-nowrap\" data-node-id=\"2:256\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Connecter Apple Santé</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"2:257\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] text-center whitespace-nowrap\" data-node-id=\"2:258\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Plus tard</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"2:508\" data-name=\"Action Section\">\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"2:514\" data-name=\"Container\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:515\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:516\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:518\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:519\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:24\" data-name=\"Background\" />\n <div className=\"bg-[#4ab8e8] h-[8px] relative rounded-[9999px] shrink-0 w-[18px]\" data-node-id=\"2:517\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"2:520\" data-name=\"Background\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"2:521\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] text-center whitespace-nowrap\" data-node-id=\"2:522\">\n <p className=\"leading-[16px]\">6/7</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","2:268":"const imgImage = \"https://www.figma.com/api/mcp/asset/f7d12794-3578-4264-a60e-b96890a15bd3.svg\";\nconst imgGenderMale = \"https://www.figma.com/api/mcp/asset/22707ab6-9b92-4eab-b745-ab5f1698f706.svg\";\nconst imgGenderFemale = \"https://www.figma.com/api/mcp/asset/fcc8b94a-2e9f-485d-8044-dd35eb5eb6c2.svg\";\nconst imgLockKey = \"https://www.figma.com/api/mcp/asset/10423a90-93f7-444d-9f33-6e9930dc8e2e.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/07220bdc-68e0-4ca1-9a94-03119643c10b.svg\";\n\nexport default function PersonnalisationOnboarding57() {\n return (\n <div className=\"bg-[#060d18] content-stretch flex flex-col items-center justify-center px-[20px] py-[48px] relative size-full\" data-node-id=\"2:268\" data-name=\"Personnalisation - Onboarding 5/7\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[712px] items-center justify-end max-w-[448px] relative shrink-0 w-full\" data-node-id=\"2:272\" data-name=\"Main Content Container\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"2:273\" data-name=\"Header\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"2:274\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"2:275\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px] mb-0\">Personnalisons votre</p>\n <p className=\"leading-[34px]\">expérience</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"2:276\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"2:277\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Les informations demandées permettront `}</p>\n <p className=\"leading-[20px] whitespace-pre\">d’établir votre référentiel physiologique.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"2:278\" data-name=\"Form Area\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"2:294\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"2:295\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[11px] tracking-[0.88px] uppercase w-full\" data-node-id=\"2:296\">\n <p className=\"leading-[14px]\">{`prénom `}</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[33px] items-center justify-center px-[13px] py-[5px] relative rounded-[8px] shrink-0 w-full\" data-node-id=\"2:297\" data-name=\"Background+Border\">\n <div className=\"flex-[1_0_0] h-full min-w-px relative\" data-node-id=\"2:298\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#6b7280] text-[12px] text-center whitespace-nowrap\" data-node-id=\"2:300\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[normal]\">Entrez votre prénom</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"2:527\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative\" data-node-id=\"2:285\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"2:286\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#889299] text-[10px] tracking-[0.88px] uppercase w-full\" data-node-id=\"2:287\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">ANNÉE DE NAISSANCE</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[33px] items-center justify-center px-[13px] py-[5px] relative rounded-[8px] shrink-0 w-full\" data-node-id=\"78:89\" data-name=\"Background+Border\">\n <div className=\"flex-[1_0_0] h-full min-w-px relative\" data-node-id=\"78:90\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"border border-[rgba(0,0,0,0)] border-solid content-stretch flex gap-[186px] h-[23px] items-center justify-center p-px relative rounded-[5.6px] shrink-0 w-full\" data-node-id=\"78:91\" data-name=\"Label\">\n <div className=\"relative shrink-0 w-[135px]\" data-node-id=\"78:94\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#6b7280] text-[12px] w-full\" data-node-id=\"78:95\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Sélectionnez une année</p>\n </div>\n </div>\n </div>\n <div className=\"h-[9px] relative shrink-0 w-[16px]\" data-node-id=\"78:96\" data-name=\"image clip\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"-translate-y-1/2 absolute right-[-4.5px] size-[25.5px] top-[calc(50%-0.25px)]\" data-node-id=\"78:97\" data-name=\"image\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgImage} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"78:77\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"78:78\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#889299] text-[11px] tracking-[0.88px] uppercase w-full\" data-node-id=\"78:79\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">GENRE</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"191:3\">\n <div className=\"bg-[#19202c] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col h-[96px] items-start relative rounded-[8px] shrink-0 w-[175px]\" data-node-id=\"78:85\" data-name=\"Container\">\n <div className=\"border border-[rgba(0,0,0,0)] border-solid content-stretch flex flex-col gap-[6px] h-[94px] items-center justify-center p-px relative rounded-[5.6px] shrink-0 w-full\" data-node-id=\"78:86\" data-name=\"Label\">\n <div className=\"relative shrink-0 size-[17px]\" data-node-id=\"78:102\" data-name=\"GenderMale\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGenderMale} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"78:87\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Homme</p>\n </div>\n </div>\n </div>\n <div className=\"flex flex-row items-center self-stretch\" data-node-id=\"191:4\">\n <div className=\"bg-[#19202c] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col h-full items-start relative rounded-[8px] shrink-0 w-[175px]\" data-name=\"Container\">\n <div className=\"border border-[rgba(0,0,0,0)] border-solid content-stretch flex flex-col gap-[6px] h-[95px] items-center justify-center p-px relative rounded-[5.6px] shrink-0 w-full\" data-node-id=\"191:5\" data-name=\"Label\">\n <div className=\"h-[17px] relative shrink-0 w-[16px]\" data-node-id=\"191:6\" data-name=\"GenderFemale\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGenderFemale} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"191:8\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Femme</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"2:304\" data-name=\"Privacy Cards Area:margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"2:305\" data-name=\"Privacy Cards Area\">\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"2:306\" data-name=\"Background+Border\">\n <div className=\"grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0\" data-node-id=\"191:2\">\n <div className=\"col-1 ml-0 mt-0 relative row-1 size-[22px]\" data-node-id=\"92:107\" data-name=\"LockKey\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgLockKey} />\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"2:308\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"2:309\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] whitespace-nowrap\" data-node-id=\"2:310\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Vos données vous appartiennent</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"2:311\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"2:312\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0 whitespace-pre\">Nous respectons votre confidentialité.</p>\n <p className=\"leading-[16px] mb-0 whitespace-pre\">{`Votre profil, vos données personnelles, ainsi que `}</p>\n <p className=\"leading-[16px] mb-0 whitespace-pre\">vos mesures de tendance, restent sur votre iPhone.</p>\n <p className=\"leading-[16px] whitespace-pre\">Elles ne seront jamais transmises ni partagées.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"4:2\" data-name=\"Action Section\">\n <div className=\"bg-[#79d3ff] border border-[#1a3045] border-solid content-stretch flex gap-[8.01px] items-center justify-center px-px py-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"4:3\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"4:4\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#060d18] text-[12px] text-center whitespace-nowrap\" data-node-id=\"4:5\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Continuer</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"4:6\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"4:8\" data-name=\"Container\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:9\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:10\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:12\" data-name=\"Background\" />\n <div className=\"bg-[#4ab8e8] h-[8px] relative rounded-[9999px] shrink-0 w-[18px]\" data-node-id=\"4:11\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:26\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:13\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"4:14\" data-name=\"Background\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"4:15\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] text-center whitespace-nowrap\" data-node-id=\"4:16\">\n <p className=\"leading-[16px]\">4/7</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","2:334":"const imgContainer = \"https://www.figma.com/api/mcp/asset/e9d56cbf-6881-456e-9a48-4f5e87c92561.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/e75292dc-6248-46d0-a8a0-9a77e0163180.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/0533a5e8-a4e9-48cc-b970-2d23258f5120.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/9093a04a-8d57-4c46-8132-8df31eb494e9.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/2c4be539-552f-4155-9cf6-8067ef1df6c9.svg\";\n\nexport default function ExperienceOnboarding67() {\n return (\n <div className=\"content-stretch flex flex-col items-center justify-center px-[20px] py-[48px] relative size-full\" data-node-id=\"2:334\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Expérience - Onboarding 6/7\">\n <div className=\"content-stretch flex flex-col h-[793px] items-center justify-center max-w-[672px] relative shrink-0 w-full\" data-node-id=\"304:2\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col h-[92px] items-start pb-[24px] relative shrink-0 w-full\" data-node-id=\"304:3\" data-name=\"Header Section:margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"304:4\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"304:5\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"304:6\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px] mb-0 whitespace-pre\">{`Comment allez vous `}</p>\n <p className=\"leading-[34px] whitespace-pre\">utiliser Haptika ?</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pb-[32px] relative shrink-0 w-full\" data-node-id=\"304:7\" data-name=\"Options Grid:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"304:8\" data-name=\"Options Grid\">\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[15px] h-[259px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"304:9\" data-name=\"Button - Option 1: iPhone Only\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"304:10\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"304:11\" data-name=\"Container\">\n <div className=\"content-stretch flex items-center relative shrink-0\" data-node-id=\"304:12\" data-name=\"Container\">\n <div className=\"h-[27.5px] relative shrink-0 w-[18.75px]\" data-node-id=\"304:13\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[12px] relative shrink-0\" data-node-id=\"304:15\" data-name=\"Heading 2:margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] whitespace-nowrap\" data-node-id=\"304:16\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">iPhone</p>\n </div>\n </div>\n </div>\n <div className=\"border-2 border-[#3e484e] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[24px]\" data-node-id=\"304:17\" data-name=\"Border\">\n <div className=\"bg-[#0c141f] opacity-0 relative rounded-[9999px] shrink-0 size-[10px]\" data-node-id=\"304:18\" data-name=\"Background\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[32px] relative shrink-0 w-[328px]\" data-node-id=\"304:19\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"304:20\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Analyse de votre système nerveux, régulation par vibrations haptiques, suivi des tendances.</p>\n </div>\n </div>\n </div>\n <div className=\"h-[134px] relative shrink-0 w-full\" data-node-id=\"304:21\" data-name=\"List\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[10px] items-start relative size-full\">\n <div className=\"content-stretch flex h-[27px] items-start relative shrink-0 w-full\" data-node-id=\"304:22\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:23\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:25\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] whitespace-nowrap\" data-node-id=\"304:26\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px] mb-0 whitespace-pre\">{`Mesure de la VFC à la demande et lecture de `}</p>\n <p className=\"leading-[15px] whitespace-pre\">{`l'équilibre nerveux (axe SNA) par caméra sur iPhone`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[27px] items-start relative shrink-0 w-full\" data-node-id=\"304:27\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:28\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:30\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"304:31\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px] mb-0 whitespace-pre\">{`Protocoles haptiques guidés : cohérence cardiaque, `}</p>\n <p className=\"leading-[15px] whitespace-pre\">ancrage sans écran et recentrage par sessions visuelles</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:37\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:38\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:40\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] whitespace-nowrap\" data-node-id=\"304:41\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Protocole SOS Stress</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:42\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:43\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:45\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] whitespace-nowrap\" data-node-id=\"304:46\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Bilans et courbes d’évolution</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:47\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:48\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:50\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] whitespace-nowrap\" data-node-id=\"304:51\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Intégration Apple Santé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#101f30] border border-[#4ab8e8] border-solid content-stretch flex flex-col gap-[15px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"304:52\" data-name=\"Button - Option 2: iPhone + Watch (Recommended & Default)\">\n <div className=\"absolute inset-[-1px_-1px_-1.5px_-1px] pointer-events-none rounded-[14px]\" data-node-id=\"304:53\" data-name=\"Button - Option 2: iPhone + Watch (Recommended & Default):shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] bg-clip-padding border-0 border-[transparent] border-solid inset-0 rounded-[14px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_0px_2px_rgba(74,184,232,0.2)]\" />\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"304:54\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"304:55\" data-name=\"Container\">\n <div className=\"content-stretch flex items-center relative shrink-0\" data-node-id=\"304:56\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[4px] items-center justify-center relative shrink-0\" data-node-id=\"304:57\" data-name=\"Container\">\n <div className=\"h-[27.5px] relative shrink-0 w-[18.75px]\" data-node-id=\"304:58\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 size-[9px] text-[#79d3ff] text-[15px] tracking-[-0.5px]\" data-node-id=\"304:60\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[21px]\">+</p>\n </div>\n <div className=\"h-[25px] relative shrink-0 w-[17.5px]\" data-node-id=\"304:61\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[12px] relative shrink-0\" data-node-id=\"304:62\" data-name=\"Heading 2:margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] whitespace-nowrap\" data-node-id=\"304:63\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">iPhone + Apple Watch</p>\n </div>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] border-2 border-[#4ab8e8] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[24px]\" data-node-id=\"304:64\" data-name=\"Background+Border\">\n <div className=\"bg-[#0c141f] relative rounded-[9999px] shrink-0 size-[10px]\" data-node-id=\"304:65\" data-name=\"Background\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[28px] relative shrink-0 w-[328px]\" data-node-id=\"304:66\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[-0.2px] w-full\" data-node-id=\"304:67\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">L’expérience complète pour un suivi biométrique précis et des retours haptiques en temps réel.</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"304:68\" data-name=\"List\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[10px] items-start relative size-full\">\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:69\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:70\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:72\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"304:73\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Toutes les fonctionnalités iPhone</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:74\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:75\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:77\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"304:78\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Mesure de la VFC en 60 secondes sur Apple Watch</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:79\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:80\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:82\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"304:83\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Suivi nocturne et Diagnostic matinal automatique</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:84\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:85\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:87\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"304:88\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Suivi d’état de stress et recommandations</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[14px] items-start relative shrink-0 w-full\" data-node-id=\"304:89\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:90\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:92\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"304:93\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Protocoles haptiques pilotés sur l’Apple Watch</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[16px] items-start relative shrink-0 w-full\" data-node-id=\"304:94\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"304:95\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"304:97\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"304:98\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Méditation par vibrations haptiques</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex h-[16px] items-start relative shrink-0 w-full\" data-node-id=\"580:386\" data-name=\"Item\">\n <div className=\"h-[13.667px] relative shrink-0 w-[11.667px]\" data-node-id=\"580:387\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start pl-[8px] relative shrink-0\" data-node-id=\"580:389\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[12px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"580:390\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Aide au sommeil et réveil haptique intelligent</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] h-[112px] items-start relative shrink-0 w-full\" data-node-id=\"304:99\" data-name=\"Action Section\">\n <div className=\"bg-[#79d3ff] border border-[#1a3045] border-solid content-stretch flex gap-[8.01px] items-center justify-center px-px py-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"304:100\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"304:101\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#060d18] text-[12px] text-center whitespace-nowrap\" data-node-id=\"304:102\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Continuer</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"304:103\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"304:105\" data-name=\"Container\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"304:106\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"304:107\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"304:108\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"304:109\" data-name=\"Background\" />\n <div className=\"bg-[#4ab8e8] h-[8px] relative rounded-[9999px] shrink-0 w-[18px]\" data-node-id=\"304:111\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"304:110\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"304:112\" data-name=\"Background\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"304:113\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] text-center whitespace-nowrap\" data-node-id=\"304:114\">\n <p className=\"leading-[16px]\">5/7</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","2:431":"export default function FinOnboarding77() {\n return (\n <div className=\"content-stretch flex flex-col items-center justify-center px-[20px] py-[240.75px] relative size-full\" data-node-id=\"2:431\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Fin - Onboarding 7/7\">\n <div className=\"content-stretch flex flex-col items-center justify-center max-w-[448px] relative shrink-0 w-full\" data-node-id=\"2:432\" data-name=\"Main Container\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"2:433\" data-name=\"Logo\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"2:434\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"2:435\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-px opacity-50 relative shrink-0 w-[48px]\" data-node-id=\"2:436\" data-name=\"Horizontal Divider\" />\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[32px] relative shrink-0\" data-node-id=\"2:437\" data-name=\"Content:margin\">\n <div className=\"content-stretch flex flex-col gap-[11.065px] items-center relative shrink-0\" data-node-id=\"2:438\" data-name=\"Content\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"2:439\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[28px] text-center whitespace-nowrap\" data-node-id=\"2:440\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Bienvenue dans Haptika</p>\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"2:441\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.38px] mb-0 whitespace-pre\">Votre profil est maintenant configuré.</p>\n <p className=\"leading-[24.38px] mb-0 whitespace-pre\"></p>\n <p className=\"leading-[24.38px] mb-0 whitespace-pre\">Découvrons ensemble votre état actuel</p>\n <p className=\"leading-[24.38px] mb-0 whitespace-pre\">{`et les outils les plus adaptés pour favoriser `}</p>\n <p className=\"leading-[24.38px] whitespace-pre\">{`l'équilibre de votre système nerveux.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[32px] relative shrink-0 w-full\" data-node-id=\"2:442\" data-name=\"Action Area:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-center pt-[32px] relative shrink-0 w-full\" data-node-id=\"2:443\" data-name=\"Action Area\">\n <div className=\"bg-[#79d3ff] border border-[#1a3045] border-solid content-stretch flex items-center justify-center overflow-clip px-[25px] py-[17px] relative rounded-[14px] shadow-[0px_0px_20px_0px_rgba(121,211,255,0.3)] shrink-0 w-full\" data-node-id=\"2:444\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"2:445\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#060d18] text-[17px] text-center whitespace-nowrap\" data-node-id=\"2:446\">\n <p className=\"leading-[22px]\">Commencer</p>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-r from-[rgba(121,211,255,0)] inset-[0_348px_0_-348px] to-[rgba(121,211,255,0)] via-1/2 via-[rgba(121,211,255,0.1)]\" data-node-id=\"2:447\" data-name=\"Gradient\" />\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[16px] relative shrink-0\" data-node-id=\"2:448\" data-name=\"Progress Indicator:margin\">\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"448:2\" data-name=\"Container\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"448:3\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"448:4\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"448:5\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"448:6\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"448:7\" data-name=\"Background\" />\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"448:9\" data-name=\"Background\" />\n <div className=\"bg-[#4ab8e8] h-[8px] relative rounded-[9999px] shrink-0 w-[18px]\" data-node-id=\"448:8\" data-name=\"Background\" />\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] text-center tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"2:457\">\n <p className=\"leading-[12px]\">7 / 7 COMPLÉTÉ</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","4:210":"const imgEllipse1 = \"https://www.figma.com/api/mcp/asset/24500513-736e-422b-979a-f8e6900106f2.png\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/93a8f73a-3964-47e9-b7a9-0506f1641834.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/cf96f5c4-1474-49fa-9fd5-f600c80ee1fe.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/58227a51-13c8-405b-b115-955dfe895294.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/37735b95-72d3-4a34-a6c8-ee8826de8a6d.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/52392e16-d219-4d98-8718-56a352052917.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/6539c716-c846-4a0b-9823-83211f6f4f9a.svg\";\n\nexport default function PreparationMesureMonEtat() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"4:210\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Préparation Mesure mon etat\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[761px] items-center max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"4:211\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col h-[58px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"4:212\" data-name=\"Header Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"4:213\" data-name=\"Header Section\">\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"4:214\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"4:215\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Mesure de votre état</p>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"230:4\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"4:216\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.7)] text-center tracking-[0.3px] uppercase whitespace-nowrap\" data-node-id=\"4:217\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">PHASE DE CALIBRAGE BIOMÉTRIQUE</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-h-[280px] max-w-[280px] pb-[32px] relative shrink-0 size-[280px]\" data-node-id=\"4:249\" data-name=\"Central Stylized Illustration:margin\">\n <div className=\"content-stretch flex items-center justify-center max-w-[280px] py-[12px] relative shrink-0 w-full\" data-node-id=\"4:250\" data-name=\"Central Stylized Illustration\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"4:251\" data-name=\"Atmospheric background effect\" />\n <div className=\"backdrop-blur-[12px] bg-[rgba(12,25,39,0.4)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.2)] shrink-0 size-[256px]\" data-node-id=\"4:252\" data-name=\"Overlay+Border+Shadow+OverlayBlur\">\n <div className=\"absolute flex inset-[calc(32.11%-0.36px)_calc(37.33%-0.25px)_calc(46.72%-0.07px)_calc(42.87%-0.14px)] items-center justify-center\" data-node-id=\"4:255\" style={{ containerType: \"size\" }}>\n <div className=\"flex-none h-[hypot(38.4763cqw,70.7047cqh)] rotate-[-26.98deg] w-[hypot(61.5237cqw,-29.2953cqh)]\">\n <div className=\"bg-[#79d3ff] blur-[2.95px] opacity-35 relative rounded-[9999px] size-full\" data-name=\"Pulsing point indicator\" />\n </div>\n </div>\n <div className=\"mix-blend-screen relative shrink-0 size-[256px]\" data-node-id=\"8:722\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" height=\"256\" src={imgEllipse1} width=\"256\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"10:723\">\n <div className=\"content-stretch flex flex-col h-[243px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"4:218\" data-name=\"Instructions List:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[243px] items-start relative shrink-0 w-full\" data-node-id=\"4:219\" data-name=\"Instructions List\">\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"4:220\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"4:221\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[14.394px] relative shrink-0 w-[8.437px]\" data-node-id=\"4:222\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"4:224\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"4:225\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Installez-vous confortablement dans `}</p>\n <p className=\"leading-[20px] whitespace-pre\">un environnement calme</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"4:226\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"4:227\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[15.562px] relative shrink-0 w-[14.013px]\" data-node-id=\"4:228\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"4:230\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"4:231\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Placez simplement votre doigt sur</p>\n <p className=\"leading-[20px]\">la caméra (avant ou arrière)</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"4:232\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"4:233\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"4:234\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"4:236\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"4:237\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Restez immobile en évitant de parler, `}</p>\n <p className=\"leading-[20px] whitespace-pre\">le temps de la mesure.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-t bottom-0 content-stretch flex flex-col from-[#0c141f] items-start left-0 p-[20px] to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"4:257\" data-name=\"Fixed Footer Actions\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"4:258\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"4:259\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[12px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2)]\" data-node-id=\"4:260\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center tracking-[1.4px] uppercase whitespace-nowrap\" data-node-id=\"4:261\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"4:262\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"4:263\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"7:712\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"7:713\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"7:714\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"7:716\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"7:717\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"7:718\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"7:719\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","431:395":"const imgInfo = \"https://www.figma.com/api/mcp/asset/9056f666-358b-407b-a365-483e87c30d54.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"431:395\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"431:396\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"431:397\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"431:398\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[182px] relative shrink-0 w-[285px]\" data-node-id=\"431:400\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[182px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"431:401\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Le SNA règle votre rythme cardiaque, votre respiration, votre digestion et votre sommeil. Il repose sur deux branches : `}</p>\n <p className=\"leading-[20px] mb-0\">{`la sympathique, qui mobilise l’organisme et accélère le cœur face à l’effort ou `}</p>\n <p className=\"leading-[20px] mb-0\">{`au stress ; la parasympathique, qui `}</p>\n <p className=\"leading-[20px]\">\n {`le ralentit et restaure l’énergie au repos. `}\n <br aria-hidden />\n Le SNA est un levier essentiel de votre bien-être au quotidien.\n </p>\n </div>\n </div>\n </div>\n </div>\n );\n}","431:333":"const imgInfo = \"https://www.figma.com/api/mcp/asset/c1b851ff-69c4-4a21-a092-5f5b04a08460.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"431:333\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"431:334\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"431:335\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"431:336\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[179px] relative shrink-0 w-[285px]\" data-node-id=\"431:338\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[179px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[13px] w-full whitespace-pre-wrap\" data-node-id=\"431:339\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`L'axe rouge-bleu résume l'équilibre de votre système nerveux : vers le rouge, l'activation (le sympathique, l'accélérateur) ; vers le bleu, la récupération (le parasympathique, le frein). `}</p>\n <p className=\"leading-[20px] mb-0\">{`C'est une photographie de l'instant : un système sain se déplace des deux côtés selon le moment. `}</p>\n <p className=\"leading-[20px]\">{`Haptika situe où vous êtes pour orienter l'action utile.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","431:2":"const imgImage3 = \"https://www.figma.com/api/mcp/asset/e59e971a-c1c3-4bb5-873e-0f0f43acc80a.png\";\nconst imgBroadcast = \"https://www.figma.com/api/mcp/asset/eb1f2b71-c008-40e1-9553-48b818b9dad9.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/32be52c7-e122-4d8a-9d7b-0a9aa1ce6b01.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/c9a1141d-0c19-47fe-be2d-58c24d3abb86.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/de37990e-e081-4ed1-ba75-54bf9bb9d639.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/cc05127f-bba6-4a50-adda-43f4288dae33.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/2ccd91cb-8332-42b2-bd9f-9070d73455ad.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/9d39f318-5f0e-47dd-aec1-ada488dc9921.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/94750787-cac0-4daa-84ef-2be2a88505fd.svg\";\n\nexport default function AccueilPremiereArrivee() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"431:2\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Accueil - Première arrivée\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[814px] items-start pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"431:3\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[14px] items-center relative shrink-0 w-full\" data-node-id=\"431:4\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-end justify-center relative shrink-0 w-[206px]\" data-node-id=\"431:8\" data-name=\"Heading 2:margin\">\n <div className=\"content-stretch flex flex-col h-[24px] items-start relative shrink-0 w-[175px]\" data-node-id=\"431:9\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] h-[24px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] text-center w-[182px]\" data-node-id=\"431:10\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">{`Bonjour [Prénom] `}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pl-[18.88px] pr-[18.87px] relative shrink-0 w-full\" data-node-id=\"431:11\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center tracking-[-0.2px] w-[356px] whitespace-pre-wrap\" data-node-id=\"431:12\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Nous allons réaliser une première mesure `}</p>\n <p className=\"leading-[20px] mb-0\">{`de votre variabilité cardiaque (VFC) à l’aide `}</p>\n <p className=\"leading-[20px] mb-0\">{`de la caméra de votre iPhone. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Cette mesure vous permettra d’estimer `}</p>\n <p className=\"leading-[20px] mb-0\">{`l’état actuel de votre système nerveux `}</p>\n <p className=\"leading-[20px]\">autonome (SNA) sur l’axe sympathique/ parasympathique.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[404px] items-start relative shrink-0 w-full\" data-node-id=\"431:18\">\n <div className=\"content-stretch flex flex-col h-[364px] items-center relative shrink-0 w-full\" data-node-id=\"431:19\" data-name=\"Visual Core Section\">\n <div className=\"content-stretch flex flex-col h-[374px] items-start relative shrink-0 w-[310px]\" data-node-id=\"431:32\" data-name=\"Central Silhouette:margin\">\n <div className=\"content-stretch flex flex-col h-[374px] items-start justify-center relative shrink-0 w-[309px]\" data-node-id=\"431:33\" data-name=\"Central Silhouette\">\n <div className=\"drop-shadow-[0px_2px_3.5px_#052d68] h-[353px] overflow-clip relative shrink-0 w-full\" data-node-id=\"431:34\" data-name=\"Silhouette\">\n <div className=\"absolute h-[635px] left-[45px] top-[-56.5px] w-[234px]\" data-node-id=\"431:35\" data-name=\"image 3\">\n <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <img alt=\"\" className=\"absolute h-full left-[-131.91%] max-w-none top-0 w-[248.99%]\" src={imgImage3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[52px] items-start relative shrink-0 w-full\" data-node-id=\"431:87\" data-name=\"Section - Main CTA:margin\">\n <div className=\"bg-[#79d3ff] content-stretch flex gap-[8px] h-[52px] items-center justify-center py-[16px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"431:88\" data-name=\"Section - Main CTA → Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 size-[12px]\" data-node-id=\"431:89\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[12px]\" data-node-id=\"431:129\" data-name=\"Broadcast\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgBroadcast} />\n </div>\n </div>\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[14px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.1),0px_4px_6px_-4px_rgba(121,211,255,0.1)]\" data-node-id=\"431:91\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[8px] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase w-[131px]\" data-node-id=\"431:92\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">mesurer mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"431:93\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"431:94\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"431:95\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:97\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"431:98\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"431:99\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"431:100\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"431:102\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"431:103\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"431:104\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"431:106\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"431:107\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:113\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"431:114\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"431:116\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"431:117\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:108\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"431:109\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"431:111\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"431:112\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:118\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"431:119\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"431:121\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"431:122\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:123\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"431:124\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"431:126\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"431:127\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","431:341":"const imgEllipse1 = \"https://www.figma.com/api/mcp/asset/e48bc9be-aba9-4dbf-9cc7-f09366c3e548.png\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/ed78069d-9ee5-45bc-8ba4-ac72f1189fd1.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/a5e67bd7-503b-4d57-80cb-5a9aab1784a8.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/18bd8534-c895-4b21-bc1c-90418cc6dc15.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/994200ad-614f-4089-a5b3-6e983fae015c.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/d213205f-cef0-4a23-8398-b749b7102840.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/d2c07401-fec6-454a-b415-7e773c7867c1.svg\";\n\nexport default function PreparationMesureVfc() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"431:341\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Préparation Mesure VFC\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[761px] items-center max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"431:342\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col h-[58px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"431:343\" data-name=\"Header Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"431:344\" data-name=\"Header Section\">\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"431:345\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"431:346\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Mesure de votre VFC</p>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"431:347\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"431:349\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.7)] text-center tracking-[0.3px] uppercase whitespace-nowrap\" data-node-id=\"431:350\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">PHASE DE CALIBRAGE BIOMÉTRIQUE</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-h-[280px] max-w-[280px] pb-[32px] relative shrink-0 size-[280px]\" data-node-id=\"431:351\" data-name=\"Central Stylized Illustration:margin\">\n <div className=\"content-stretch flex items-center justify-center max-w-[280px] py-[12px] relative shrink-0 w-full\" data-node-id=\"431:352\" data-name=\"Central Stylized Illustration\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"431:353\" data-name=\"Atmospheric background effect\" />\n <div className=\"backdrop-blur-[12px] bg-[rgba(12,25,39,0.4)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.2)] shrink-0 size-[256px]\" data-node-id=\"431:354\" data-name=\"Overlay+Border+Shadow+OverlayBlur\">\n <div className=\"absolute flex inset-[calc(32.11%-0.36px)_calc(37.33%-0.25px)_calc(46.72%-0.07px)_calc(42.87%-0.14px)] items-center justify-center\" data-node-id=\"431:355\" style={{ containerType: \"size\" }}>\n <div className=\"flex-none h-[hypot(38.4763cqw,70.7047cqh)] rotate-[-26.98deg] w-[hypot(61.5237cqw,-29.2953cqh)]\">\n <div className=\"bg-[#79d3ff] blur-[2.95px] opacity-35 relative rounded-[9999px] size-full\" data-name=\"Pulsing point indicator\" />\n </div>\n </div>\n <div className=\"mix-blend-screen relative shrink-0 size-[256px]\" data-node-id=\"431:356\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" height=\"256\" src={imgEllipse1} width=\"256\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"431:357\">\n <div className=\"content-stretch flex flex-col h-[243px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"431:358\" data-name=\"Instructions List:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[243px] items-start relative shrink-0 w-full\" data-node-id=\"431:359\" data-name=\"Instructions List\">\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"431:360\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"431:361\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[14.394px] relative shrink-0 w-[8.437px]\" data-node-id=\"431:362\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:364\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"431:365\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Installez-vous confortablement dans `}</p>\n <p className=\"leading-[20px] whitespace-pre\">un environnement calme</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"431:366\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"431:367\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[15.562px] relative shrink-0 w-[14.013px]\" data-node-id=\"431:368\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:370\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"431:371\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Placez simplement votre doigt sur</p>\n <p className=\"leading-[20px]\">la caméra (avant ou arrière)</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"431:372\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"431:373\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"431:374\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:376\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"431:377\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Restez immobile en évitant de parler, `}</p>\n <p className=\"leading-[20px] whitespace-pre\">le temps de la mesure.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-t bottom-0 content-stretch flex flex-col from-[#0c141f] items-start left-0 p-[20px] to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"431:378\" data-name=\"Fixed Footer Actions\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"431:379\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"431:380\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[12px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2)]\" data-node-id=\"431:381\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center tracking-[1.4px] uppercase whitespace-nowrap\" data-node-id=\"431:382\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"431:383\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"431:384\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"431:385\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"431:386\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"431:387\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"431:389\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"431:390\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"431:391\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"431:392\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","230:7":"const imgInfo = \"https://www.figma.com/api/mcp/asset/17090720-71cf-4bdb-ade4-8a5585dfe51d.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"230:7\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"230:8\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"230:9\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"230:14\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[285px]\" data-node-id=\"230:11\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[299px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"230:12\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`La VFC, variabilité de la fréquence cardiaque, mesure les infimes écarts de durée entre deux battements. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Un cœur sain ne bat jamais de façon parfaitement régulière : ces micro-variations traduisent l'activité de votre système nerveux autonome. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] mb-0\">Une VFC élevée signale un système en</p>\n <p className=\"leading-[20px] mb-0\">{`récupération, dominé par le frein parasympathique ; une VFC basse, un système sous tension. `}</p>\n <p className=\"leading-[20px]\">{`C'est l'indicateur le plus fiable, sans appareil médical, pour lire votre équilibre nerveux du moment.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","564:853":"const imgContainer = \"https://www.figma.com/api/mcp/asset/2677363c-3984-40e0-a017-422449f5e9ac.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/02ca2f98-dccf-4f9c-ab28-8fcbfd9b328b.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/62d15d7b-cada-4a97-bee6-af117abc9f73.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/ddd87c4c-9401-4d91-89c8-d4061167de7c.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/762705ef-aae7-49aa-b04c-738c34094cde.svg\";\n\nexport default function ResultatMesureVfc() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"564:853\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Résultat Mesure VFC\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[886px] items-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"564:854\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[105px] items-start relative shrink-0\" data-node-id=\"564:855\" data-name=\"Success Header:margin\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-center relative shrink-0\" data-node-id=\"564:856\" data-name=\"Success Header\">\n <div className=\"bg-[rgba(121,211,255,0.1)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[64px]\" data-node-id=\"564:857\" data-name=\"Overlay+Border\">\n <div className=\"relative shrink-0 size-[25px]\" data-node-id=\"564:858\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pt-[12px] relative shrink-0 w-full\" data-node-id=\"564:860\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"564:861\">\n <p className=\"leading-[32px]\">Mesure terminée</p>\n </div>\n </div>\n <div className=\"h-[20px] relative shrink-0 w-full\" data-node-id=\"564:862\" data-name=\"Container\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"564:863\" data-name=\"Hero Metric:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start overflow-clip p-[25px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"564:864\" data-name=\"Hero Metric\">\n <div className=\"h-[12px] relative shrink-0 w-full\" data-node-id=\"564:865\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold h-[12px] justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[1.2px] uppercase w-[147px]\" data-node-id=\"564:866\">\n <p className=\"leading-[16px]\">TEMPS de l’analyse</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:867\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"content-stretch drop-shadow-[0px_0px_6px_rgba(115,209,255,0.3)] flex flex-col items-center relative shrink-0\" data-node-id=\"564:868\" data-name=\"Shadow\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold h-[27px] justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[36px] text-center tracking-[-0.96px] w-[148px]\" data-node-id=\"564:869\">\n <p className=\"leading-[56px]\">4 min 30</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-b from-[rgba(74,184,232,0.15)] inset-0 opacity-40 to-[rgba(74,184,232,0)]\" data-node-id=\"564:870\" data-name=\"Gradient\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"564:871\" data-name=\"Hero Section: Score\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"564:872\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Thin'] font-[110.72500610351562] h-[76px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[0px] text-center w-[152px]\" data-node-id=\"564:873\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p>\n <span className=\"leading-[72px] text-[64px]\">7</span>\n <span className=\"leading-[72px] text-[64px] tracking-[5.12px]\">2</span>\n <span className=\"leading-[72px] text-[32px]\">ms</span>\n </p>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"564:874\" data-name=\"Container\">\n <div className=\"h-[6.417px] relative shrink-0 w-[11.083px]\" data-node-id=\"564:875\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"564:877\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] text-center whitespace-nowrap\" data-node-id=\"564:878\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Équilibre favorable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[210px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"564:879\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"564:880\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"564:881\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"564:882\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[177px] relative shrink-0 w-[285px]\" data-node-id=\"564:884\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"564:885\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Votre VFC s'exprime en millisecondes : plus le chiffre est élevé, plus votre système penche vers la récupération. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] mb-0\">{`Une valeur seule reste peu parlante : `}</p>\n <p className=\"leading-[20px] mb-0\">{`elle change avec l'heure, la position, `}</p>\n <p className=\"leading-[20px] mb-0\">la digestion.</p>\n <p className=\"leading-[20px]\">{`C'est en la suivant sur plusieurs jours qu'une tendance se dégage.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-full\" data-node-id=\"564:886\">\n <div className=\"content-stretch flex flex-col h-[52px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"564:887\" data-name=\"Section - Actions\">\n <div className=\"bg-[#79d3ff] content-stretch flex gap-[8px] h-[52px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"564:888\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[52px] left-0 right-0 rounded-[14px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2),0px_4px_6px_-4px_rgba(121,211,255,0.2)] top-0\" data-node-id=\"564:889\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"564:890\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Voir mon état</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[52px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"564:891\" data-name=\"Section - Actions\">\n <div className=\"content-stretch flex gap-[8px] h-[52px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"564:892\" data-name=\"Button\">\n <div className=\"absolute border border-[#282b2c] border-solid h-[52px] left-0 right-0 rounded-[14px] top-0\" data-node-id=\"564:893\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"564:894\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Voir mon évolution</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"564:895\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"564:896\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"564:897\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:899\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"564:900\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"564:901\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"564:902\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","564:904":"const imgContainer = \"https://www.figma.com/api/mcp/asset/4942241a-b7d7-4b28-af7a-a2c8d950623c.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/e7975165-c84f-40cb-85cd-7742bd3f54a4.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/e89ed706-4aa4-45c7-8736-2fa319fab57a.svg\";\n\nexport default function MesureHrvEnCours() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"564:904\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Mesure HRV en cours\">\n <div className=\"content-stretch flex flex-col gap-[55px] h-[612px] items-center justify-center pt-[100px] px-[20px] relative shrink-0 w-full\" data-node-id=\"564:905\" data-name=\"Main - Center Visualization (Minimalist Focus)\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"564:906\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start pb-[8px] relative shrink-0\" data-node-id=\"564:907\" data-name=\"Margin\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"564:908\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] relative rounded-[9999px] shadow-[0px_0px_8px_0px_#79d3ff] shrink-0 size-[8px]\" data-node-id=\"564:909\" data-name=\"Background+Shadow\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"564:910\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] tracking-[1.1px] uppercase whitespace-nowrap\" data-node-id=\"564:911\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">ENREGISTREMENT DIRECT</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"564:912\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] whitespace-nowrap\" data-node-id=\"564:913\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p>\n <span className=\"[word-break:break-word] font-['SF_Pro:Regular'] font-normal leading-[28px]\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n Analyse\n </span>\n <span className=\"leading-[28px]\">{` en cours`}</span>\n </p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pl-[26.8px] pr-[26.81px] relative shrink-0 w-full\" data-node-id=\"564:914\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[15px] text-[rgba(190,200,207,0.8)] text-center w-[308px]\" data-node-id=\"564:915\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Restez posé, respirez normalement.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[256px]\" data-node-id=\"564:916\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[4px] h-[32px] items-end relative shrink-0\" data-node-id=\"564:917\" data-name=\"Real-time Signal Visualization (Micro-interaction)\">\n <div className=\"bg-[#79d3ff] h-[12.8px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:918\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[22.39px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:919\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[17.59px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:920\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[27.19px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:921\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[19.19px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:922\" data-name=\"Background\" />\n </div>\n <div className=\"absolute border border-[rgba(26,48,69,0.3)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"564:923\" data-name=\"Camera Viewfinder Overlay (Simulated)\" />\n <div className=\"absolute border border-[rgba(121,211,255,0.2)] border-solid inset-[16px] rounded-[9999px]\" data-node-id=\"564:924\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[40px] items-start relative shrink-0 w-[326px]\" data-node-id=\"564:925\" data-name=\"Footer - Bottom Controls & Feedback\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"564:926\" data-name=\"Signal Quality & Info\">\n <div className=\"backdrop-blur-[12px] bg-[#0c141f] border border-[rgba(26,48,69,0.5)] border-solid content-stretch flex gap-[16px] items-center px-[17px] py-[9px] relative rounded-[9999px] shrink-0\" data-node-id=\"564:927\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0\" data-node-id=\"564:928\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"564:929\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">Qualité SIGNAL</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:930\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[6px] items-start relative size-full\">\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:931\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:932\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:933\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:934\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:935\" data-name=\"Background\" />\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:936\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[4px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"564:937\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">EXCELLENT</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"564:938\" data-name=\"Stop Button\">\n <div className=\"content-stretch flex flex-col items-start overflow-clip px-[40px] py-[16px] relative rounded-[12px] shrink-0\" data-node-id=\"564:939\" data-name=\"Button\">\n <div className=\"absolute backdrop-blur-[6px] bg-[#0c1927] border border-[#1a3045] border-solid inset-[0_0.15px_0_0] rounded-[14px]\" data-node-id=\"564:940\" data-name=\"Overlay+Border+OverlayBlur\" />\n <div className=\"content-stretch flex gap-[11.99px] items-center relative shrink-0\" data-node-id=\"564:941\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"564:942\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"564:944\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[16px] text-center whitespace-nowrap\" data-node-id=\"564:945\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Arrêter</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"564:946\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"564:947\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"564:948\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"564:949\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"564:950\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:952\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"564:953\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"564:954\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"564:955\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:958":"const imgContainer = \"https://www.figma.com/api/mcp/asset/c1287b40-4de1-417c-89cb-93199320c5c0.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/698d1672-9e89-4a8a-b448-b2fdbcdd9526.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/36f475a3-406f-4bc2-8fc4-f383c7d66bd9.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/129de886-c61d-4485-8cdf-fb0d07082af6.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/cd9fa196-8ea6-429b-b763-e46a921b9b30.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/7c30697f-3d0a-4631-9ee5-e111429afaa3.svg\";\nconst imgSunHorizon = \"https://www.figma.com/api/mcp/asset/4c1661f4-fe41-4f62-b28f-7b96b8e31548.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/e8d04ae6-761a-419a-a7c4-020ba14bc6b5.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/d038b23b-55c1-4b4f-988c-ddb7c7b783af.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/e8638933-9b52-4dfd-8e3b-bf003b873347.svg\";\nconst imgContainer8 = \"https://www.figma.com/api/mcp/asset/d85cef02-5fa8-4cfa-acfb-61c549a89534.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/8418cd16-355d-41af-9de3-41950f18b44b.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/bbc297d8-04ec-422d-aa4e-99dedccbed03.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/b95e6d57-b45a-4e15-9dbc-bdbcbb21bc57.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/7170e315-afa9-463c-8727-c008a9b2b4bb.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/387ba89e-f588-45f9-8f6a-a8e95b22469c.svg\";\n\nexport default function VosOutils() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:958\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos Outils\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:959\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:960\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:961\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:963\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:964\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:965\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:966\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1117px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:968\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"565:969\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:970\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] h-[20px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] w-full\" data-node-id=\"565:971\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Vos Outils</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:972\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[36px] justify-center leading-[0] relative shrink-0 text-[15px] text-[rgba(190,200,207,0.8)] w-full whitespace-pre-wrap\" data-node-id=\"565:973\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Choisissez une famille pour agir sur votre `}</p>\n <p className=\"leading-[20px]\">système nerveux.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:974\" data-name=\"Section - Tool Families - Large Vertical Cards\">\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:975\" data-name=\"Card 1: RESPIRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"565:976\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(74,184,232,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:977\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-[74.519%] via-[rgba(15,23,42,0)]\" data-node-id=\"565:978\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"565:979\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(74,184,232,0.2)] border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"565:980\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[17px] relative shrink-0 w-[20px]\" data-node-id=\"565:981\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:983\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"565:984\">\n <p className=\"leading-[24px]\">RESPIRER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"565:985\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[20px] items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:986\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[31px] justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] w-full\" data-node-id=\"565:987\">\n <p className=\"leading-[20px] mb-0\">Régulez votre rythme respiratoire et</p>\n <p className=\"leading-[20px]\">votre cohérence cardiaque.</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:988\" data-name=\"Container\">\n <div className=\"bg-[rgba(74,184,232,0.1)] content-stretch flex flex-col items-start px-[8px] py-[4px] relative rounded-[4px] shrink-0\" data-node-id=\"565:989\" data-name=\"Overlay\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"565:990\">\n <p className=\"leading-[15px]\">5 EXERCICES</p>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:991\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:993\" data-name=\"Card 2: ANCRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"565:994\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(167,139,250,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:995\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-3/4 via-[rgba(15,23,42,0)]\" data-node-id=\"565:996\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"565:997\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(167,139,250,0.2)] border border-[rgba(167,139,250,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"565:998\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[18px] relative shrink-0 w-[24px]\" data-node-id=\"565:999\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1001\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#a78bfa] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"565:1002\">\n <p className=\"leading-[24px]\">ANCRER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"565:1003\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[20px] items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1004\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[31px] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[16px] w-full\" data-node-id=\"565:1005\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Retrouvez votre stabilité par des</p>\n <p className=\"leading-[20px]\">vibrations haptiques ciblées.</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1006\" data-name=\"Container\">\n <div className=\"bg-[rgba(167,139,250,0.1)] content-stretch flex flex-col items-start px-[8px] py-[4px] relative rounded-[4px] shrink-0\" data-node-id=\"565:1007\" data-name=\"Overlay\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#a78bfa] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"565:1008\">\n <p className=\"leading-[15px]\">5 PROTOCOLES</p>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:1009\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1011\" data-name=\"Card 3: RECENTRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"565:1012\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(45,212,191,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:1013\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-3/4 via-[rgba(15,23,42,0)]\" data-node-id=\"565:1014\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"565:1015\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(45,212,191,0.2)] border border-[rgba(45,212,191,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"565:1016\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 size-[18px]\" data-node-id=\"565:1017\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1019\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2dd4bf] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"565:1020\">\n <p className=\"leading-[24px]\">RECENTRER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"565:1021\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[20px] items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1022\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[32px] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[16px] w-full\" data-node-id=\"565:1023\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Fixez votre attention et relâchez les</p>\n <p className=\"leading-[20px]\">tensions oculaires et mentales.</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1024\" data-name=\"Container\">\n <div className=\"bg-[rgba(45,212,191,0.1)] content-stretch flex flex-col items-start px-[8px] py-[4px] relative rounded-[4px] shrink-0\" data-node-id=\"565:1025\" data-name=\"Overlay\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2dd4bf] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"565:1026\">\n <p className=\"leading-[15px]\">2 MODULES</p>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:1027\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1048\" data-name=\"Card 3: RECENTRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"565:1049\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(212,184,45,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:1050\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-3/4 via-[rgba(15,23,42,0)]\" data-node-id=\"565:1051\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"565:1052\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(212,184,45,0.2)] border border-[rgba(212,184,45,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"565:1053\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1054\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:1055\" data-name=\"SunHorizon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSunHorizon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1057\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#d4b82d] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"565:1058\">\n <p className=\"leading-[24px]\">RÉVEIL INTELLIGENT</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"565:1059\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex h-[41px] items-start relative shrink-0 w-full\" data-node-id=\"565:1060\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-[1_0_0] flex-col font-['SF_Pro:Regular'] font-normal h-[32px] justify-center leading-[0] min-w-px relative text-[#bec8cf] text-[16px] whitespace-pre-wrap\" data-node-id=\"565:1061\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Un réveil doux à l'heure choisie, `}</p>\n <p className=\"leading-[20px]\">aux vibrations réglables.</p>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:1062\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] h-[137px] items-start relative shrink-0 w-[350px]\" data-node-id=\"565:1064\" data-name=\"Mes sessions Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1065\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1066\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[11px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[16px] w-[102px]\" data-node-id=\"565:1067\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Mes sessions</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center justify-center relative shrink-0\" data-node-id=\"565:1068\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[8px] justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[1px] uppercase w-[63px]\" data-node-id=\"565:1069\">\n <p className=\"leading-[15px]\">VOIR TOUT</p>\n </div>\n </div>\n </div>\n <div className=\"h-[126px] overflow-auto relative shrink-0 w-full\" data-node-id=\"565:1070\" data-name=\"Container\">\n <div className=\"absolute backdrop-blur-[6px] bg-gradient-to-r border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t bottom-[16px] content-stretch flex flex-col from-[rgba(74,184,232,0.08)] gap-[4px] items-start left-0 pl-[20px] pr-[17px] py-[17px] rounded-[12px] to-[rgba(74,184,232,0)] top-0 w-[256px]\" data-node-id=\"565:1071\" data-name=\"Session 1\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1072\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex font-['Inter:Regular'] font-normal items-start justify-between leading-[0] not-italic relative size-full whitespace-nowrap\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[#79d3ff] text-[10px]\" data-node-id=\"565:1073\">\n <p className=\"leading-[15px]\">COHÉRENCE</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[#bec8cf] text-[12px]\" data-node-id=\"565:1074\">\n <p className=\"leading-[18px]\">Hier</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1075\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] w-full\" data-node-id=\"565:1076\">\n <p className=\"leading-[24px]\">Session Équilibre</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1077\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[13.333px]\" data-node-id=\"565:1078\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1080\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1081\">\n <p className=\"leading-[18px]\">5 min</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[4px] items-start px-[4px] relative shrink-0 w-[12px]\" data-node-id=\"565:1082\" data-name=\"Margin\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[4px]\" data-node-id=\"565:1083\" data-name=\"Background\" />\n </div>\n <div className=\"h-[12.233px] relative shrink-0 w-[13.333px]\" data-node-id=\"565:1084\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1086\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:1087\">\n <p className=\"leading-[18px]\">VFC +12%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[6px] bg-[#0f172a] border-[rgba(121,211,255,0.2)] border-b border-l-4 border-r border-solid border-t bottom-[16px] content-stretch flex flex-col gap-[4px] items-start left-[272px] pl-[20px] pr-[17px] py-[17px] rounded-[12px] top-0 w-[256px]\" data-node-id=\"565:1088\" data-name=\"Session 2\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1089\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex font-['Inter:Regular'] font-normal items-start justify-between leading-[0] not-italic relative size-full text-[#bec8cf] whitespace-nowrap\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[10px]\" data-node-id=\"565:1090\">\n <p className=\"leading-[15px]\">ANCRAGE</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[12px]\" data-node-id=\"565:1091\">\n <p className=\"leading-[18px]\">Lundi</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1092\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] w-full\" data-node-id=\"565:1093\">\n <p className=\"leading-[24px]\">Sommeil Profond</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1094\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[13.333px]\" data-node-id=\"565:1095\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1097\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1098\">\n <p className=\"leading-[18px]\">10 min</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[4px] items-start px-[4px] relative shrink-0 w-[12px]\" data-node-id=\"565:1099\" data-name=\"Margin\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[4px]\" data-node-id=\"565:1100\" data-name=\"Background\" />\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[16px]\" data-node-id=\"565:1101\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1103\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1104\">\n <p className=\"leading-[18px]\">Mode Doux</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[6px] bg-[#0f172a] border-[rgba(121,211,255,0.2)] border-b border-l-4 border-r border-solid border-t bottom-[16px] content-stretch flex flex-col gap-[4px] items-start left-[544px] pl-[20px] pr-[17px] py-[17px] rounded-[12px] top-0 w-[256px]\" data-node-id=\"565:1105\" data-name=\"Session 3\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1106\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex font-['Inter:Regular'] font-normal items-start justify-between leading-[0] not-italic relative size-full text-[#bec8cf] whitespace-nowrap\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[10px]\" data-node-id=\"565:1107\">\n <p className=\"leading-[15px]\">RECENTRER</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[12px]\" data-node-id=\"565:1108\">\n <p className=\"leading-[18px]\">Dimanche</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1109\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] w-full\" data-node-id=\"565:1110\">\n <p className=\"leading-[24px]\">Scan Corporel</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1111\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[13.333px]\" data-node-id=\"565:1112\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1114\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1115\">\n <p className=\"leading-[18px]\">12 min</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[4px] items-start px-[4px] relative shrink-0 w-[12px]\" data-node-id=\"565:1116\" data-name=\"Margin\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[4px]\" data-node-id=\"565:1117\" data-name=\"Background\" />\n </div>\n <div className=\"h-[10px] relative shrink-0 w-[14.667px]\" data-node-id=\"565:1118\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer8} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1120\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1121\">\n <p className=\"leading-[18px]\">Focus</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:1122\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1123\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:1124\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1126\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:1127\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1128\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:1129\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1131\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1132\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1133\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:1134\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1136\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1137\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1138\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:1139\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1141\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1142\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1143\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:1144\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1146\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1147\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1148":"const imgContainer = \"https://www.figma.com/api/mcp/asset/af7af9a7-3d0d-4bb4-92b5-1153e34b0e44.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/67cb3f19-6f7c-45f6-b035-469975c5fce9.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/f83aa74d-8c2a-48f4-83b0-88e2809bfca5.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/c7019309-f14f-4537-b72e-d11dee22b2cd.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/e4ed3315-b01a-443a-b09d-4a1bbe1d7b80.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/512f6929-69df-4ad4-ae31-8f008a49cd53.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/ffd68d2d-559c-4db4-ad53-a8c2cf7dbb95.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/89cf5d2b-39eb-40e9-85e1-c88458506e8d.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/567d85d2-8693-40aa-b6d3-5ff50ab612c8.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/d6ef12d4-28a3-45ed-91d0-2531ec294c8c.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/59e0b62c-8d05-44d3-85b1-604c30f0dc59.svg\";\nconst imgContainer8 = \"https://www.figma.com/api/mcp/asset/2d9931b2-afae-4081-bf38-d9227d1309d8.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/5ebb454c-3bb1-4725-abca-fa02ca38c43e.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/b14f0330-aff6-485b-9972-093edae54155.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/93159e28-149e-416c-8dbb-bfd99964acbd.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/9a78be31-87f6-4375-a48a-04c654ad365f.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/e9edfd27-b74d-4b34-bab0-75d0f6b6ba52.svg\";\n\nexport default function VosOutilsRespirez() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1148\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - respirez\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1149\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1150\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1151\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1153\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1154\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1155\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1156\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1158\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[6.75px] items-start relative shrink-0 w-full\" data-node-id=\"565:1159\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1160\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1161\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"565:1162\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Respirer</p>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:1163\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1165\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"565:1166\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Ma Cohérence est le point de départ pour stabiliser</p>\n <p className=\"leading-[20px] mb-0\">votre système nerveux et améliorer votre résilience</p>\n <p className=\"leading-[20px]\">au stress.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:1167\" data-name=\"Featured Section: Ma Cohérence\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1168\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] tracking-[1.2px] uppercase w-full\" data-node-id=\"565:1169\">\n <p className=\"leading-[16px]\">POINT DE DÉPART</p>\n </div>\n </div>\n <div className=\"bg-[#0f172a] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1170\" data-name=\"Background+Border+Shadow+OverlayBlur\">\n <div className=\"absolute bg-[rgba(74,184,232,0.1)] blur-[32px] right-[-48px] rounded-[9999px] size-[192px] top-[-48px]\" data-node-id=\"565:1171\" data-name=\"Overlay+Blur\" />\n <div className=\"relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1172\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[8px] items-start relative size-full\">\n <div className=\"content-stretch flex items-start justify-between relative shrink-0 w-full\" data-node-id=\"565:1173\" data-name=\"Container\">\n <div className=\"h-[36px] relative shrink-0 w-[41px]\" data-node-id=\"565:1174\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0 size-[22px]\" data-node-id=\"565:1176\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[8px] relative shrink-0 w-full\" data-node-id=\"565:1177\" data-name=\"Heading 4\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[24px] tracking-[-0.24px] w-full\" data-node-id=\"565:1178\">\n <p className=\"leading-[32px]\">Ma Cohérence</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[39px] items-start pb-[8px] relative shrink-0 w-full\" data-node-id=\"565:1179\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[31px] justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"565:1180\">\n <p className=\"leading-[20px]\">Entraînez-vous à synchroniser votre respiration sur votre cœur.</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch flex gap-[8px] items-center justify-center py-[12px] relative rounded-[8px] shrink-0 w-full\" data-node-id=\"565:1181\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1182\">\n <p className=\"leading-[16px]\">COMMENCER LA SESSION</p>\n </div>\n <div className=\"h-[8.167px] relative shrink-0 w-[6.417px]\" data-node-id=\"565:1183\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:1185\" data-name=\"Guided Protocols Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1186\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] tracking-[1.2px] uppercase w-full\" data-node-id=\"565:1187\">\n <p className=\"leading-[16px]\">PROTOCOLES GUIDÉS</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:1188\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.06)] border-solid content-stretch flex gap-[16px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1189\" data-name=\"Protocol 1\">\n <div className=\"bg-[rgba(74,184,232,0.05)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"565:1190\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"h-[17px] relative shrink-0 w-[20px]\" data-node-id=\"565:1191\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:1193\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1194\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1195\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:1196\">\n <p className=\"leading-[24px]\">Cohérence cardiaque</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1197\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:1198\">\n <p className=\"leading-[20px]\">Inspirez et expirez, 5 secondes chacun</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:1199\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex gap-[16px] items-center pl-[20px] pr-[17px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1201\" data-name=\"Protocol 2\">\n <div className=\"bg-[rgba(74,184,232,0.05)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"565:1202\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"h-[17px] relative shrink-0 w-[20px]\" data-node-id=\"565:1203\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:1205\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1206\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[219px]\" data-node-id=\"565:1207\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:1208\">\n <p className=\"leading-[24px]\">Calme express</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1209\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:1210\">\n <p className=\"leading-[20px]\">Deux inspirations, une longue expiration</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:1211\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.06)] border-solid content-stretch flex gap-[16px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1213\" data-name=\"Protocol 3\">\n <div className=\"bg-[rgba(74,184,232,0.1)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"565:1214\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"relative shrink-0 size-[18px]\" data-node-id=\"565:1215\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:1217\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1218\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1219\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:1220\">\n <p className=\"leading-[24px]\">4·4·4·4 - Équilibre</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1221\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#b3bdc5] text-[12px] w-full\" data-node-id=\"565:1222\">\n <p className=\"leading-[20px]\">Un carré respiratoire régulier</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:1223\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.06)] border-solid content-stretch flex gap-[16px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1225\" data-name=\"Protocol 4\">\n <div className=\"bg-[rgba(74,184,232,0.1)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"565:1226\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"h-[20px] relative shrink-0 w-[21px]\" data-node-id=\"565:1227\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:1229\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1230\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1231\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:1232\">\n <p className=\"leading-[24px]\">4·7·8 - Sommeil</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1233\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:1234\">\n <p className=\"leading-[20px]\">Inspiration, rétention, expiration</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:1235\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[rgba(7,14,25,0.5)] border border-[rgba(255,255,255,0.2)] border-dashed content-stretch flex gap-[11.99px] items-center justify-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1237\" data-name=\"Create Protocol\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:1238\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer8} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1240\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1241\">\n <p className=\"leading-[16px]\">Créer mon protocole</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:1242\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1243\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:1244\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1246\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:1247\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1248\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:1249\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1251\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1252\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1253\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:1254\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1256\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1257\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1258\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:1259\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1261\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1262\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1263\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:1264\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1266\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1267\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1268":"const imgEllipse1 = \"https://www.figma.com/api/mcp/asset/07d3ae9e-5e50-43d6-90ee-8eb4441c8691.png\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/68e15902-e915-4c1b-b317-e05d722b687a.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/9923b4fc-bb2e-4bfa-8788-ee88f6894160.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/3dbf9a07-07fa-46d9-a7ec-5f5f882d296f.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/e86dc60b-7878-4d25-bdcd-ca65bb50abae.svg\";\n\nexport default function MaCoherencePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"565:1268\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ma Cohérence - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[929px] items-center max-w-[448px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1269\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col h-[58px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"565:1270\" data-name=\"Header Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"565:1271\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:1272\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"565:1273\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Ma Cohérence</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1274\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.7)] text-center tracking-[0.3px] uppercase whitespace-nowrap\" data-node-id=\"565:1275\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Point de départ</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-h-[280px] max-w-[280px] pb-[32px] relative shrink-0 size-[280px]\" data-node-id=\"565:1276\" data-name=\"Central Stylized Illustration:margin\">\n <div className=\"content-stretch flex items-center justify-center max-w-[280px] py-[12px] relative shrink-0 w-full\" data-node-id=\"565:1277\" data-name=\"Central Stylized Illustration\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"565:1278\" data-name=\"Atmospheric background effect\" />\n <div className=\"backdrop-blur-[12px] bg-[rgba(12,25,39,0.4)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.2)] shrink-0 size-[256px]\" data-node-id=\"565:1279\" data-name=\"Overlay+Border+Shadow+OverlayBlur\">\n <div className=\"absolute flex inset-[calc(32.11%-0.36px)_calc(37.33%-0.25px)_calc(46.72%-0.07px)_calc(42.87%-0.14px)] items-center justify-center\" data-node-id=\"565:1280\" style={{ containerType: \"size\" }}>\n <div className=\"flex-none h-[hypot(38.4763cqw,70.7047cqh)] rotate-[-26.98deg] w-[hypot(61.5237cqw,-29.2953cqh)]\">\n <div className=\"bg-[#79d3ff] blur-[2.95px] opacity-35 relative rounded-[9999px] size-full\" data-name=\"Pulsing point indicator\" />\n </div>\n </div>\n <div className=\"mix-blend-screen relative shrink-0 size-[256px]\" data-node-id=\"565:1281\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" height=\"256\" src={imgEllipse1} width=\"256\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[431px] items-center relative shrink-0\" data-node-id=\"565:1282\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[331px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:1283\" data-name=\"Instructions List:margin\">\n <div className=\"content-stretch flex flex-col h-[87px] items-start relative shrink-0 w-full\" data-node-id=\"565:1284\" data-name=\"Instructions List\">\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[87px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1285\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:1286\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[15.562px] relative shrink-0 w-[14.013px]\" data-node-id=\"565:1287\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1289\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"565:1290\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Posez le doigt sur la caméra. `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Votre cohérence cardiaque s'affiche `}</p>\n <p className=\"leading-[20px] whitespace-pre\">en temps réel.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[332px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:1291\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:1292\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1293\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:1294\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[298px] relative shrink-0 w-[285px]\" data-node-id=\"565:1296\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"565:1297\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Quand vous respirez lentement et régulièrement, votre rythme cardiaque monte légèrement à l'inspiration et redescend à l'expiration. `}</p>\n <p className=\"leading-[20px] mb-0\">{`En calant votre souffle sur l'anneau, cette oscillation du cœur se synchronise avec celle de la respiration : `}</p>\n <p className=\"leading-[20px] mb-0\">{`c'est la cohérence cardiaque. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] mb-0\">{`Cette mise en phase sollicite le nerf vague, amplifie la variabilité cardiaque et favorise un état de calme et de récupération. `}</p>\n <p className=\"leading-[20px]\">{`Plus vous prolongez cet état, plus votre système apprend à y revenir. `}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-t bottom-0 content-stretch flex flex-col from-[#0c141f] items-start left-0 p-[20px] to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"565:1298\" data-name=\"Fixed Footer Actions\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:1299\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1300\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[12px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2)]\" data-node-id=\"565:1301\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"565:1302\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"565:1303\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1304\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1305\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1306\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1307\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1309\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1310\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1311\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1312\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1314":"const imgContainer = \"https://www.figma.com/api/mcp/asset/742e3ad7-9e70-4ef6-a54b-4887bbf91e62.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/ad48e971-2100-486c-b30f-a38773e063f7.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/7edf3563-3c30-4089-8f03-f5fd738c7128.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/7bd4069e-3f77-470b-b558-a34b748f66e0.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/65a99d1b-b5b7-48ef-a24d-d13961b1bb0b.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/700f7578-dbc9-4d4c-b8cd-aee75095c160.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/48b48abb-52a2-4a56-a271-15b2fb2921bc.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/90ea308f-e3ef-463c-a65f-242e7265af55.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/748f56f3-5fb5-4633-b856-312b0f6fd6bf.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/2052914b-a126-4292-8613-e3bb40b1c4ae.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/648ad10f-6302-48ff-a94e-dfd7894728d0.svg\";\n\nexport default function MaCoherenceRestitution() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1314\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ma Cohérence - Restitution\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1315\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1316\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1317\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1319\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1320\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1321\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1322\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:1324\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1325\" data-name=\"Success Header:margin\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-center relative shrink-0\" data-node-id=\"565:1326\" data-name=\"Success Header\">\n <div className=\"bg-[rgba(121,211,255,0.1)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[64px]\" data-node-id=\"565:1327\" data-name=\"Overlay+Border\">\n <div className=\"relative shrink-0 size-[25px]\" data-node-id=\"565:1328\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pt-[12px] relative shrink-0 w-full\" data-node-id=\"565:1330\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"565:1331\">\n <p className=\"leading-[32px]\">Séance terminée</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1332\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] text-center whitespace-nowrap\" data-node-id=\"565:1333\">\n <p className=\"leading-[20px]\">Félicitations pour ce moment de calme.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1334\" data-name=\"Hero Metric:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[8px] items-start overflow-clip p-[25px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1335\" data-name=\"Hero Metric\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1336\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:1337\">\n <p className=\"leading-[16px]\">TEMPS EN COHÉRENCE</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1338\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"content-stretch drop-shadow-[0px_0px_6px_rgba(115,209,255,0.3)] flex flex-col items-center relative shrink-0\" data-node-id=\"565:1339\" data-name=\"Shadow\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[48px] text-center tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"565:1340\">\n <p className=\"leading-[56px]\">4 min 30</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-b from-[rgba(74,184,232,0.15)] inset-0 opacity-40 to-[rgba(74,184,232,0)]\" data-node-id=\"565:1341\" data-name=\"Gradient\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:1342\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:1343\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1344\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:1345\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1346\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"565:1347\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"565:1348\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1349\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1350\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1351\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1352\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1353\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1355\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1356\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1357\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1358\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1360\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1361\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1362\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1363\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1365\" data-name=\"Action Section:margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1366\" data-name=\"Action Section\">\n <div className=\"bg-[#232a36] content-stretch flex h-[56px] items-center justify-center relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1367\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"565:1368\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Retour</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:1369\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1370\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:1371\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1373\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:1374\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1375\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:1376\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1378\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1379\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1380\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:1381\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1383\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1384\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1385\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:1386\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1388\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1389\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1390\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:1391\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1393\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1394\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1395":"const imgContainer = \"https://www.figma.com/api/mcp/asset/35448dfe-7253-42bf-83be-f80082b1bd1b.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/1b92bc38-2af9-40c8-9a02-89ee99e29041.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/43db0d54-4d4f-447e-b953-61fc50da4564.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/9a699857-baf8-4677-abf1-367e9205e074.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/a1bb6c20-e66f-4059-85a2-f0984f1ac35f.svg\";\n\nexport default function MaCoherenceEnCours() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1395\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ma Cohérence - En cours\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-h-px overflow-clip pb-[20px] pt-[96px] px-[20px] relative w-[402px]\" data-node-id=\"565:1396\" data-name=\"Main Content: Biofeedback Orb Canvas\">\n <div className=\"aspect-square content-stretch flex items-center justify-center max-w-[320px] py-[64px] relative shrink-0\" data-node-id=\"565:1397\" data-name=\"The Sync Orb Complex\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.2)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:1398\" data-name=\"Outer Guide Ring (Target Rhythm)\" />\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] blur-[32px] inset-[7.5%] opacity-0 rounded-[9999px]\" data-node-id=\"565:1399\" data-name=\"Inner Glowing Aura (Synchronization Intensity)\" />\n <div className=\"absolute border border-[rgba(255,255,255,0.05)] border-dashed inset-0 rounded-[9999px]\" data-node-id=\"565:1400\" data-name=\"Orbital Particle Decoration\" />\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.1)] border-solid content-stretch flex flex-col items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[192px]\" data-node-id=\"565:1401\" data-name=\"Heart Center (Real-time Beats)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1402\" data-name=\"Time Accumulator\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start pb-[4px] relative shrink-0\" data-node-id=\"565:1403\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1404\">\n <p className=\"leading-[16px]\">COHÉRENCE</p>\n </div>\n </div>\n <div className=\"content-stretch drop-shadow-[0px_0px_6px_rgba(121,211,255,0.5)] flex flex-col items-start relative shrink-0\" data-node-id=\"565:1405\" data-name=\"Shadow\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[48px] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"565:1406\">\n <p className=\"leading-[56px]\">04:22</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[8px] relative shrink-0\" data-node-id=\"565:1407\" data-name=\"Margin\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"565:1408\" data-name=\"Container\">\n <div className=\"h-[10.704px] relative shrink-0 w-[11.667px]\" data-node-id=\"565:1409\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1411\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:1412\">\n <p className=\"leading-[20px]\">72 BPM</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 absolute bg-[#79d3ff] left-1/2 rounded-[9999px] shadow-[0px_0px_8px_0px_#79d3ff] size-[8px] top-[-4px]\" data-node-id=\"565:1413\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[64px] relative shrink-0\" data-node-id=\"565:1414\" data-name=\"Instructional Guidance:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0\" data-node-id=\"565:1415\" data-name=\"Instructional Guidance\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1416\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:1417\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Respirez avec l'anneau. `}</p>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">Quand votre cœur suit,</p>\n <p className=\"leading-[28px] whitespace-pre\">vous êtes synchronisé.</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"565:1418\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"565:1419\" data-name=\"Background\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"565:1420\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"565:1421\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col isolate items-center pb-[40px] pt-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1422\" data-name=\"Footer - Controls Area\">\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.1)] border-solid content-stretch flex flex-col items-center justify-center max-w-[384px] overflow-clip px-px py-[17px] relative rounded-[12px] shrink-0 w-full z-[2]\" data-node-id=\"565:1423\" data-name=\"Button - Close/End Action\">\n <div className=\"absolute bg-gradient-to-r from-[rgba(255,255,255,0)] inset-[0_348px_0_-348px] to-[rgba(255,255,255,0)] via-1/2 via-[rgba(255,255,255,0.05)]\" data-node-id=\"565:1424\" data-name=\"Gradient\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:1425\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1426\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">TERMINER LA SESSION</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[24px] relative shrink-0 z-[1]\" data-node-id=\"565:1427\" data-name=\"Margin\">\n <div className=\"content-stretch flex gap-[24px] items-center relative shrink-0\" data-node-id=\"565:1428\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center opacity-60 relative shrink-0\" data-node-id=\"565:1429\" data-name=\"Button\">\n <div className=\"h-[14.583px] relative shrink-0 w-[15px]\" data-node-id=\"565:1430\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:1432\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"565:1433\">\n <p className=\"leading-[15px]\">GUIDE AUDIO</p>\n </div>\n </div>\n </div>\n <div className=\"bg-[rgba(255,255,255,0.1)] h-[12px] relative shrink-0 w-px\" data-node-id=\"565:1434\" data-name=\"Vertical Divider\" />\n <div className=\"content-stretch flex gap-[8px] items-center opacity-60 relative shrink-0\" data-node-id=\"565:1435\" data-name=\"Button\">\n <div className=\"h-[15px] relative shrink-0 w-[20px]\" data-node-id=\"565:1436\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:1438\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"565:1439\">\n <p className=\"leading-[15px]\">HAPTIQUE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1440\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1441\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1442\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1444\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1445\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1446\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1447\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1450":"const imgInfo = \"https://www.figma.com/api/mcp/asset/a10e0c22-609e-40b0-9abe-9eb6a133ab00.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:1450\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:1451\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1452\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:1453\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[285px]\" data-node-id=\"565:1455\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"565:1456\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`La respiration est la seule fonction automatique que l'on peut piloter volontairement, et le levier le`}</p>\n <p className=\"leading-[20px] mb-0\">{`plus direct sur le système nerveux. Ralentir et allonger le souffle sollicite `}</p>\n <p className=\"leading-[20px] mb-0\">{`le nerf vague et oriente l'organisme vers la récupération. `}</p>\n <p className=\"leading-[20px]\">Ma Cohérence sert de point de départ : on y repère son rythme, avant de le travailler avec les protocoles guidés.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2281":"const imgContainer = \"https://www.figma.com/api/mcp/asset/56eb0659-f9ed-4345-aa39-5d3c571777ee.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/38c6865e-e6d3-484b-9690-c29165dcc597.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/45787efe-db58-4aac-9c9c-48f40a051c69.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/841987b9-32dd-482f-ad7c-7d44ef19358e.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/c71105a2-477c-4950-aab2-7d334cbeb5e9.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/375d561a-69f0-4f13-8f86-02ab124d6df8.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/41af5ad7-3979-4fb7-a4fd-f8131f72aa78.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/37d082f2-778f-45ec-8922-5a8f5fa52a77.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/82e013b6-e942-4229-91fa-8ab75bf6ac44.svg\";\n\nexport default function CreerMonProtocole() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2281\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Créer mon protocole\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2282\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2283\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2284\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2286\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2287\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2288\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2289\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[999px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2291\" data-name=\"Main Content\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:2292\" data-name=\"Section - Header Text\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] text-center whitespace-nowrap\" data-node-id=\"565:2293\">\n <p className=\"leading-[24px] mb-0\">Réglez chaque temps du cycle et la durée de</p>\n <p className=\"leading-[24px]\">la séance.</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-full\" data-node-id=\"565:2294\" data-name=\"Settings Section\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:2295\" data-name=\"Step Controls Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2296\" data-name=\"Inspiration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2297\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2298\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"565:2299\">\n <p className=\"leading-[16px]\">INSPIRATION</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2300\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2301\">\n <p className=\"leading-[20px]\">4s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2302\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:2303\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[72.5px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:2304\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2305\" data-name=\"Rétention Haute\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2306\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2307\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"565:2308\">\n <p className=\"leading-[16px]\">RÉTENTION HAUTE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2309\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2310\">\n <p className=\"leading-[20px]\">2s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2311\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:2312\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[58px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:2313\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2314\" data-name=\"Expiration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2315\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2316\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"565:2317\">\n <p className=\"leading-[16px]\">EXPIRATION</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2318\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2319\">\n <p className=\"leading-[20px]\">6s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2320\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:2321\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[116px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:2322\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[rgba(121,211,255,0.4)] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col gap-[12px] items-start pl-[20px] pr-[17px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2323\" data-name=\"Rétention Basse\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2324\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2325\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"565:2326\">\n <p className=\"leading-[16px]\">RÉTENTION BASSE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2327\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2328\">\n <p className=\"leading-[20px]\">0s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2329\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:2330\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-0 rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:2331\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[16px] items-start p-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2332\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2333\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2334\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2336\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2337\">\n <p className=\"leading-[24px]\">Durée de la séance</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-end min-w-[35.880001068115234px] pl-[70.359px] relative\" data-node-id=\"565:2338\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2339\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2340\">\n <p className=\"leading-[20px]\">5 min</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2341\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:2342\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:2343\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start px-[20px] relative shrink-0 w-[390px]\" data-node-id=\"565:2344\" data-name=\"Nav - Bottom Action Buttons\">\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_7.5px_rgba(74,184,232,0.3)] flex items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2345\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"565:2346\">\n <p className=\"leading-[16px]\">ENREGISTRER</p>\n </div>\n </div>\n <div className=\"border border-[#3e484e] border-solid content-stretch flex items-center justify-center px-px py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2347\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"565:2348\">\n <p className=\"leading-[16px]\">TESTER MAINTENANT</p>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[191px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:2349\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2350\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2351\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2352\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[100px] relative shrink-0 w-[285px]\" data-node-id=\"565:2354\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[157px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-[285px] whitespace-pre-wrap\" data-node-id=\"565:2355\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Le rapport entre inspiration et expiration `}</p>\n <p className=\"leading-[20px] mb-0\">{`décide de l'effet : une expiration plus `}</p>\n <p className=\"leading-[20px] mb-0\">{`longue apaise, des temps égaux `}</p>\n <p className=\"leading-[20px] mb-0\">{`équilibrent, des temps courts `}</p>\n <p className=\"leading-[20px] mb-0\">{`entretiennent la vigilance. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Comprendre ce principe permet de `}</p>\n <p className=\"leading-[20px] mb-0\">{`composer un rythme adapté à ce que `}</p>\n <p className=\"leading-[20px]\">vous recherchez.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2356\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2357\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2358\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2360\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2361\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2362\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2363\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2365\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2366\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2367\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2368\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2370\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2371\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2372\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2373\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2375\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2376\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2377\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2378\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2380\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2381\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1458":"const imgContainer = \"https://www.figma.com/api/mcp/asset/e0bc3fd4-e203-4642-94d9-f93eea9f0591.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/9dce2a1c-eb0d-4aa1-a781-c7714d1b9a45.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/8e83a43c-4d20-495b-ac34-03e4d7c4d3ba.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/61328c32-ff05-489a-b1fd-003aaf800d0b.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/8a661258-1883-4b73-a963-d9c44b71b965.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/12123700-c501-4d02-aa54-9149d96f23e8.svg\";\nconst imgIcon1 = \"https://www.figma.com/api/mcp/asset/846dca56-36d6-4c0c-b222-5fa5a2c38308.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/bbe52e28-eeb7-4707-b2b9-08f85d6df487.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/31807c82-eb26-4fb8-916b-e53b8380383f.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/3f6e846e-3160-4829-8910-af6f7c924c7f.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/b6f3e98a-e76a-4f34-ad94-63741293992e.svg\";\nconst imgContainer8 = \"https://www.figma.com/api/mcp/asset/cdf1ade0-813c-41e7-82eb-bd2628c494a5.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/45c4ace0-7fc6-4a70-9440-09c2ec557406.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/326f9c7d-c3ae-447b-83fc-52b1069dc6d2.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/034b23f5-eaad-4a0b-9844-9bc5ccfe553f.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/bda5c886-e36a-40ff-b3b9-21e504e66f5f.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/adbc7d1e-dc9f-40f7-a6bb-55a149b78333.svg\";\n\nexport default function CoherenceCardiaqueFin() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1458\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Cohérence Cardiaque - Fin\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1459\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1460\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1461\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1463\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1464\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1465\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1466\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1468\" data-name=\"Main Content\">\n <div className=\"content-stretch flex flex-col isolate items-center relative shrink-0 w-full\" data-node-id=\"565:1469\" data-name=\"Hero Section\">\n <div className=\"content-stretch flex flex-col h-[173px] items-start relative shrink-0 w-[192px] z-[2]\" data-node-id=\"565:1470\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col h-[173px] items-start justify-center relative shrink-0 w-[192px]\" data-node-id=\"565:1471\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-[1_0_0] items-center justify-center min-h-px relative w-full\" data-node-id=\"565:1472\" data-name=\"Central Icon\">\n <div className=\"bg-[rgba(74,184,232,0.1)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_15px_0px_rgba(115,209,255,0.15)] shrink-0 size-[128px]\" data-node-id=\"565:1473\" data-name=\"Overlay+Border+Shadow\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"565:1474\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-center justify-center relative shrink-0 z-[1]\" data-node-id=\"565:1476\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-[16px] items-center relative shrink-0 w-full\" data-node-id=\"565:1477\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:1478\">\n <p className=\"leading-[16px]\">Séance terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:1479\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"565:1480\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1482\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1483\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-baseline justify-center relative shrink-0 w-full\" data-node-id=\"565:1484\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic opacity-50 relative shrink-0 text-[#bec8cf] text-[16px] text-center whitespace-nowrap\" data-node-id=\"565:1485\">\n <p className=\"[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-from-font decoration-solid leading-[24px] line-through\">54 ms</p>\n </div>\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"565:1486\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[48px] text-center tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"565:1487\">\n <p className=\"leading-[56px]\">61 ms</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[16px] relative shrink-0 w-full\" data-node-id=\"565:1488\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] text-center whitespace-nowrap\" data-node-id=\"565:1489\">\n <p className=\"leading-[26px] mb-0 whitespace-pre\">{`Votre progrès se lit dans la durée : `}</p>\n <p className=\"leading-[26px] whitespace-pre\">suivez votre tendance dans Mon évolution.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:1490\" data-name=\"SNA Analysis Bento Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.8)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[24px] items-start p-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1491\" data-name=\"SNA Visualization Card\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1492\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1493\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1494\">\n <p className=\"leading-[16px]\">Analyse du SNA</p>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"565:1495\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1497\" data-name=\"Axes Comparatifs\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[32px] items-start py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"565:1498\" data-name=\"Avant\">\n <div className=\"content-stretch flex items-start justify-between relative shrink-0 w-full\" data-node-id=\"565:1499\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"565:1500\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1501\">\n <p className=\"leading-[15px]\">SYMPATHIQUE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"565:1502\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1503\">\n <p className=\"leading-[15px]\">ÉTAT INITIAL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"565:1504\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1505\">\n <p className=\"leading-[15px]\">PARASYMPATHIQUE</p>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-r from-[#f43f5e] h-[8px] opacity-40 relative rounded-[9999px] shrink-0 to-[#4ab8e8] via-1/2 via-[#19202c] w-full\" data-node-id=\"565:1506\" data-name=\"Gradient\" />\n <div className=\"absolute bg-[#dce3f3] border-2 border-[#0c141f] border-solid h-[16px] left-[35%] right-[60%] rounded-[9999px] top-[19px]\" data-node-id=\"565:1507\" data-name=\"Current State Indicator\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[16px] left-[-2px] right-[-2px] rounded-[9999px] shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.1)] top-[-2px]\" data-node-id=\"565:1508\" data-name=\"Current State Indicator:shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"565:1509\" data-name=\"Après\">\n <div className=\"content-stretch flex items-start justify-between relative shrink-0 w-full\" data-node-id=\"565:1510\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"565:1511\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1512\">\n <p className=\"leading-[15px]\">ACTIVATION</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"565:1513\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1514\">\n <p className=\"leading-[15px]\">ÉTAT ACTUEL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"565:1515\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1516\">\n <p className=\"leading-[15px]\">RÉCUPÉRATION</p>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-r from-[#f43f5e] h-[8px] relative rounded-[9999px] shrink-0 to-[#4ab8e8] via-1/2 via-[#19202c] w-full\" data-node-id=\"565:1517\" data-name=\"Gradient\" />\n <div className=\"absolute bg-[#79d3ff] border-2 border-[#0c141f] border-solid h-[20px] left-[69.06%] right-[24.69%] rounded-[9999px] shadow-[0px_0px_15px_0px_rgba(115,209,255,0.15)] top-[17px]\" data-node-id=\"565:1518\" data-name=\"Current State Indicator with Glow\" />\n </div>\n </div>\n </div>\n <div className=\"bg-[rgba(74,184,232,0.05)] border-[#4ab8e8] border-l-4 border-solid relative rounded-br-[8px] rounded-tr-[8px] shrink-0 w-full\" data-node-id=\"565:1519\" data-name=\"Overlay+VerticalBorder\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[15px] items-start pl-[16px] pr-[12px] py-[12px] relative size-full\">\n <div className=\"relative self-stretch shrink-0\" data-node-id=\"565:1520\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[17.025px] relative shrink-0 w-[17.043px]\" data-node-id=\"565:1521\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon1} />\n </div>\n </div>\n </div>\n <div className=\"relative self-stretch shrink-0\" data-node-id=\"565:1522\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[49px] justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] w-[254px]\" data-node-id=\"565:1523\">\n <p className=\"leading-[20px]\">Le système parasympathique est désormais dominant, favorisant la réparation cellulaire et le calme mental.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:1524\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:1525\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1526\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:1527\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1528\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"565:1529\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"565:1530\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1531\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1532\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1533\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1534\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1535\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1537\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1538\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1539\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1540\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1542\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1543\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1544\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1545\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1547\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1548\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1549\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1550\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"565:1551\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"565:1552\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1554\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"565:1555\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"565:1556\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer8} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:1558\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1559\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:1560\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1562\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:1563\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1564\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:1565\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1567\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1568\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1569\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:1570\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1572\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1573\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1574\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:1575\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1577\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1578\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1579\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:1580\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1582\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1583\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1584":"const imgContainer = \"https://www.figma.com/api/mcp/asset/86ec9cee-9178-4f0b-9c34-7961265a5038.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/8892a71c-1773-4996-ad87-c12b8b262c33.svg\";\n\nexport default function CoherenceCardiaqueSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1584\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Cohérence Cardiaque - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1585\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1586\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1587\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1589\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1590\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1591\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1592\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1594\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col items-start py-[24px] relative shrink-0\" data-node-id=\"565:1595\" data-name=\"Phase Indicator:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:1596\" data-name=\"Phase Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1597\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] text-shadow-[0px_0px_8px_rgba(121,211,255,0.6)] tracking-[2.4px] whitespace-nowrap\" data-node-id=\"565:1598\">\n <p className=\"leading-[16px]\">INSPIREZ</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[12px] items-start pt-[8px] relative shrink-0 w-[48px]\" data-node-id=\"565:1599\" data-name=\"Margin\">\n <div className=\"bg-[rgba(121,211,255,0.2)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[48px]\" data-node-id=\"565:1600\" data-name=\"Overlay\">\n <div className=\"bg-[#79d3ff] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:1601\" data-name=\"Background\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[377px] relative shrink-0 w-full\" data-node-id=\"565:1602\" data-name=\"Main Content: Immersive Orb\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.05)] blur-[50px] left-1/2 rounded-[9999px] size-[450px] top-[calc(50%+0.5px)]\" data-node-id=\"565:1603\" data-name=\"Subtle Background Glow\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute flex items-center justify-center left-[calc(50%-0.5px)] size-[325px] top-1/2\" data-node-id=\"565:1604\">\n <div className=\"flex-none scale-x-160 scale-y-160\">\n <div className=\"content-stretch flex items-center justify-center relative rounded-[224px] shadow-[0px_0px_100px_0px_rgba(121,211,255,0.4)] size-[203.125px]\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 203.13 203.13' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(14.363 0 0 14.363 101.56 101.56)'><stop stop-color='rgba(115,209,255,0.4)' offset='0'/><stop stop-color='rgba(115,209,255,0.05)' offset='0.7'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background+Shadow\">\n <div className=\"bg-[#79d3ff] blur-[10px] opacity-80 relative rounded-[96px] shrink-0 size-[120px]\" data-node-id=\"565:1605\" data-name=\"Background+Blur\" />\n <div className=\"absolute border border-[rgba(121,211,255,0.2)] border-solid inset-[0_0.13px_0.13px_0] rounded-[224px]\" data-node-id=\"565:1606\" data-name=\"Border\" />\n <div className=\"absolute border border-[rgba(121,211,255,0.1)] border-solid inset-[10%] rounded-[179.2px]\" data-node-id=\"565:1607\" data-name=\"Border\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[384px] pt-[32px] relative shrink-0 w-full\" data-node-id=\"565:1608\" data-name=\"Footer - Bottom Controls\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-center relative shrink-0\" data-node-id=\"565:1609\" data-name=\"Timer Display\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1610\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[rgba(220,227,243,0.6)] tracking-[1.4px] whitespace-nowrap\" data-node-id=\"565:1611\">\n <p className=\"leading-[20px]\">04:51</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] h-[4px] items-start relative shrink-0\" data-node-id=\"565:1612\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-full relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:1613\" data-name=\"Background\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] h-full relative rounded-[9999px] shrink-0 w-[8px]\" data-node-id=\"565:1614\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] h-full relative rounded-[9999px] shrink-0 w-[8px]\" data-node-id=\"565:1615\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] h-full relative rounded-[9999px] shrink-0 w-[8px]\" data-node-id=\"565:1616\" data-name=\"Overlay\" />\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-start justify-center p-[5px] relative rounded-[9999px] shrink-0 w-full\" data-node-id=\"565:1617\" data-name=\"Mode Selector\">\n <div className=\"bg-[#79d3ff] flex-[1_0_0] min-w-px relative rounded-[9999px]\" data-node-id=\"565:1618\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1619\">\n <p className=\"leading-[16px]\">FOCUS</p>\n </div>\n </div>\n </div>\n <div className=\"drop-shadow-[0px_0px_6px_rgba(115,209,255,0.2)] flex-[1_0_0] min-w-px relative rounded-[9999px]\" data-node-id=\"565:1620\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#6bbbe3] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1621\">\n <p className=\"leading-[16px]\">LIBRE</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1622\" data-name=\"End Session Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"565:1623\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Terminer la séance</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1624":"const imgContainer = \"https://www.figma.com/api/mcp/asset/8284281f-8d2d-44c6-8e42-3c2e327308d5.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/801fb166-dc17-4cca-9450-39e12e55ef2a.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/5b5dca2a-eb9b-4cfc-b3a7-e1338805d430.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/e93daded-fbfa-43c1-a939-ddf67c2757e8.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/0c2a6d17-eec8-4592-b037-2c0a74e549bf.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/bc9b8a34-431b-4ab1-b4ea-f46e0b194be3.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/91300f86-fe5b-4ba8-9b4e-7e7c2a375ca5.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/d2c5595b-76d7-4483-a206-c2d59a7826fe.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/07426cd0-71fc-4f05-8c44-44c2182e2a0e.svg\";\n\nexport default function CoherenceCardiaqueReglages() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1624\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Cohérence Cardiaque - Réglages\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1625\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1626\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1627\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1629\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1630\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1631\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1632\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[795px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0\" data-node-id=\"565:1634\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex gap-[90px] items-center relative shrink-0 w-full\" data-node-id=\"565:1635\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"565:1636\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Cohérence cardiaque</p>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:1637\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:1638\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] h-[323px] items-center justify-center relative shrink-0 w-[362px]\" data-node-id=\"565:1640\" data-name=\"Ambient Visual Element:margin\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:1641\" data-name=\"Ambient Visual Element\">\n <div className=\"flex flex-[1_0_0] flex-row items-center self-stretch\" data-node-id=\"565:1642\">\n <div className=\"content-stretch flex flex-[1_0_0] h-full items-center justify-center min-w-px relative\" data-name=\"Container\">\n <div className=\"border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex flex-col gap-[12px] items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[240px]\" data-node-id=\"565:1643\" data-name=\"Border\">\n <div className=\"h-[24px] relative shrink-0 w-[30px]\" data-node-id=\"565:1644\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1646\" data-name=\"Heading 2\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] text-center whitespace-nowrap\" data-node-id=\"565:1647\">\n <p className=\"leading-[24px]\">Prêt pour la séance ?</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:1648\" data-name=\"Instructions Section:margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1649\" data-name=\"Instructions Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1650\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] text-center whitespace-nowrap\" data-node-id=\"565:1651\">\n <p className=\"leading-[26px] mb-0\">Inspirez et expirez au rythme des vibrations,</p>\n <p>\n <span className=\"[word-break:break-word] font-['Inter:Medium'] font-medium leading-[26px] not-italic text-[#79d3ff]\">cinq secondes</span>\n <span className=\"leading-[26px]\">{` chacun.`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:1652\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:1653\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:1654\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1655\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1656\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:1657\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1658\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:1659\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1660\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:1661\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1662\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:1663\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1664\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:1665\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1666\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1667\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:1668\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:1669\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:1670\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:1671\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:1672\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:1673\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1674\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:1675\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1676\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:1677\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1679\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:1680\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1681\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:1682\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1684\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1685\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1686\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:1687\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1689\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1690\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1691\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:1692\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1694\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1695\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1696\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:1697\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1699\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:1700\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1701":"const imgInfo = \"https://www.figma.com/api/mcp/asset/471a8233-1f81-4995-b5e8-cef3a658bc94.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:1701\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:1702\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1703\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:1704\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[184px] relative shrink-0 w-[285px]\" data-node-id=\"565:1706\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[184px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"565:1707\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`À environ six respirations par minute, `}</p>\n <p className=\"leading-[20px] mb-0\">le rythme cardiaque et la respiration</p>\n <p className=\"leading-[20px] mb-0\">{`entrent en résonance : la variabilité s'amplifie et le tonus vagal augmente. C'est le mécanisme respiratoire le mieux documenté. Son effet immédiat est net ; son effet sur votre variabilité de fond `}</p>\n <p className=\"leading-[20px] mb-0\">se construit avec la régularité,</p>\n <p className=\"leading-[20px]\">sur plusieurs jours.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1708":"const imgContainer = \"https://www.figma.com/api/mcp/asset/dfb1cec7-f8ad-42d4-8068-1df323b88e62.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/33984c64-18c7-407e-bdff-c214c3cb2e31.svg\";\n\nexport default function Component478Seance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1708\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4-7-8 - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1709\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1710\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1711\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1713\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1714\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1715\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1716\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:1718\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"565:1719\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col gap-[13px] h-[21px] items-start relative shrink-0\" data-node-id=\"565:1720\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"565:1721\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:1722\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Inspirez</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center opacity-80 relative shrink-0 w-full\" data-node-id=\"565:1723\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[15px] text-center tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:1724\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Par le nez, doucement</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:1725\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:1726\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:1727\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:1728\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:1729\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:1730\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:1731\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute flex h-[89.6px] items-center justify-center left-[calc(50%+0.21px)] top-[calc(50%-0.45px)] w-[50.42px]\" data-node-id=\"565:1732\">\n <div className=\"flex-none scale-x-160 scale-y-160\">\n <div className=\"content-stretch flex flex-col items-start opacity-70 relative\" data-name=\"Countdown within orb\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[48px] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"565:1733\">\n <p className=\"leading-[56px]\">4</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"565:1734\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"565:1735\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1736\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1737\">\n <p className=\"leading-[15px]\">{`4-7-8 `}</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:1738\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:1739\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:1740\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:1741\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:1742\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:1743\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:1744\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1745\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:1746\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:1747\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:1748\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1749\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:1750\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:1751\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:1752\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:1753\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1754":"const imgContainer = \"https://www.figma.com/api/mcp/asset/fb16d916-e3a7-40e7-bd01-0b463a0cfb1a.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/feadc552-ccf5-48ae-8f7b-12a5ffd0c515.svg\";\n\nexport default function Component4444RespirationCarreSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1754\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·4·4·4 - Respiration carré - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1755\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1756\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1757\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1759\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1760\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1761\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1762\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:1764\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[28px] items-start relative shrink-0\" data-node-id=\"565:1765\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[21px] items-start relative shrink-0\" data-node-id=\"565:1766\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"565:1767\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:1768\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Inspirez</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:1769\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:1770\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:1771\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:1772\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:1773\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:1774\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:1775\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute flex h-[89.6px] items-center justify-center left-[calc(50%+0.21px)] top-[calc(50%-0.45px)] w-[50.42px]\" data-node-id=\"565:1776\">\n <div className=\"flex-none scale-x-160 scale-y-160\">\n <div className=\"content-stretch flex flex-col items-start opacity-70 relative\" data-name=\"Countdown within orb\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[48px] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"565:1777\">\n <p className=\"leading-[56px]\">4</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"565:1778\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"565:1779\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1780\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:1781\">\n <p className=\"leading-[15px]\">Box 4-4-4-4</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:1782\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:1783\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:1784\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:1785\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:1786\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:1787\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:1788\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:1789\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1790\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:1791\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:1792\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:1793\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1794\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:1795\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:1796\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:1797\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:1798\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1799":"const imgContainer = \"https://www.figma.com/api/mcp/asset/eef6e797-9f1d-46b9-8acd-212e61681f4e.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/0cac163a-bf87-48cf-8c1c-0628846c9c2a.svg\";\nconst imgVector = \"https://www.figma.com/api/mcp/asset/ca1dbed6-5d30-485b-aaae-046dec8888ec.svg\";\nconst imgVector1 = \"https://www.figma.com/api/mcp/asset/c75ceed8-e87f-4477-8410-3f19838528d1.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/1fbde1fa-fe35-4549-9442-cacdb6e55441.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/229752fe-e72a-47ca-b549-0a44abdae4c1.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/b683b47a-0fc3-4edb-9ef9-13d3aa53594e.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/cc6a4a7d-dd3a-4cec-8db2-b0a0e8cf572b.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/5a6d7f3e-e4f0-4e24-bc93-44f266153661.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/3b1412e5-af1b-4a21-89a5-b45f5fc56381.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/0d67466f-68ca-4640-9faa-2051bb5dcb05.svg\";\n\nexport default function CalmeExpressRestitutionSimple() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1799\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Calme express - Restitution (simple)\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1800\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1801\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1802\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1804\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1805\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1806\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1807\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[860px] items-center justify-center overflow-clip pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1809\" data-name=\"Main Canvas\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[448px] relative shrink-0 w-[402px]\" data-node-id=\"565:1810\" data-name=\"Central Content Section\">\n <div className=\"content-stretch flex flex-col h-[208px] items-start pb-[16px] relative shrink-0 w-[192px]\" data-node-id=\"565:1811\" data-name=\"Biometric Visualizer Placeholder (Success State):margin\">\n <div className=\"content-stretch flex flex-col items-start justify-center relative shrink-0 size-[192px]\" data-node-id=\"565:1812\" data-name=\"Biometric Visualizer Placeholder (Success State)\">\n <div className=\"flex h-[192px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:1813\" style={{ containerType: \"size\" }}>\n <div className=\"-rotate-90 flex-none h-[100cqw]\">\n <div className=\"h-full overflow-clip relative w-[192px]\" data-name=\"SVG - Circular Ring\">\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"565:1814\" data-name=\"Vector\">\n <div className=\"absolute inset-[-0.57%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector} />\n </div>\n </div>\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"565:1815\" data-name=\"Vector\">\n <div className=\"absolute inset-[-2.27%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex inset-0 items-center justify-center pb-[58px] pl-[38px] pr-[58px] pt-[38px]\" data-node-id=\"565:1816\" data-name=\"Inner Icon\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.1)] content-stretch flex items-center justify-center left-1/2 rounded-[9999px] size-[96px] top-1/2\" data-node-id=\"565:1817\" data-name=\"Overlay\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(255,255,255,0)] left-1/2 rounded-[9999px] shadow-[0px_0px_15px_2px_rgba(115,209,255,0.2)] size-[96px] top-1/2\" data-node-id=\"565:1818\" data-name=\"Overlay+Shadow\" />\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"565:1819\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[12px] relative shrink-0\" data-node-id=\"565:1821\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center relative shrink-0\" data-node-id=\"565:1822\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1823\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"565:1824\">\n <p className=\"leading-[32px] mb-0 whitespace-pre\">{`Séance Calme `}</p>\n <p className=\"leading-[32px] whitespace-pre\">express terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:1825\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"565:1826\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1828\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1829\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1830\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center px-[26.73px] relative shrink-0\" data-node-id=\"565:1831\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[rgba(190,200,207,0.8)] text-center whitespace-nowrap\" data-node-id=\"565:1832\">\n <p className=\"leading-[26px] mb-0\">Félicitations, votre système nerveux est apaisé,</p>\n <p className=\"leading-[26px]\">favorisant une récupération profonde.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:1833\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:1834\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1835\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:1836\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1837\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"565:1838\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"565:1839\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1840\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1841\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1842\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1843\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1844\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1846\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1847\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1848\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1849\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1851\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1852\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1853\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1854\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[144px] items-center pb-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1856\" data-name=\"Footer - Bottom Actions Section (Premium Fixed Layout)\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1857\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1858\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1859\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1860\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"565:1861\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"565:1862\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1864\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"565:1865\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"565:1866\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1868":"const imgContainer = \"https://www.figma.com/api/mcp/asset/06698081-7762-464a-ba68-3fbc199ac5c1.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/add7065b-05d6-4f57-93f3-c5d9ac91e366.svg\";\nconst imgVector = \"https://www.figma.com/api/mcp/asset/4a3ff230-fbd0-4462-8d38-d51031b52142.svg\";\nconst imgVector1 = \"https://www.figma.com/api/mcp/asset/49a920ce-86a7-465a-962f-3d637b6430a9.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/88631f5d-121e-49a4-99b1-ef0ebd67e9ce.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/14c904fb-2ca9-4955-a00f-2fee82b8490d.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/10bb8074-32b9-4b89-bdff-f5c7db8b3072.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/1aa340e9-7b2f-4679-be45-d94c85ce870d.svg\";\n\nexport default function RespirerRestitutionSimple() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1868\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Respirer - Restitution (simple)\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1869\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1870\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1871\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1873\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1874\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1875\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1876\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[731px] items-center justify-center overflow-clip pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1878\" data-name=\"Main Canvas\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[448px] relative shrink-0\" data-node-id=\"565:1879\" data-name=\"Central Content Section\">\n <div className=\"content-stretch flex flex-col h-[208px] items-start pb-[16px] relative shrink-0 w-[192px]\" data-node-id=\"565:1880\" data-name=\"Biometric Visualizer Placeholder (Success State):margin\">\n <div className=\"content-stretch flex flex-col items-start justify-center relative shrink-0 size-[192px]\" data-node-id=\"565:1881\" data-name=\"Biometric Visualizer Placeholder (Success State)\">\n <div className=\"flex h-[192px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:1882\" style={{ containerType: \"size\" }}>\n <div className=\"-rotate-90 flex-none h-[100cqw]\">\n <div className=\"h-full overflow-clip relative w-[192px]\" data-name=\"SVG - Circular Ring\">\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"565:1883\" data-name=\"Vector\">\n <div className=\"absolute inset-[-0.57%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector} />\n </div>\n </div>\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"565:1884\" data-name=\"Vector\">\n <div className=\"absolute inset-[-2.27%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex inset-0 items-center justify-center pb-[58px] pl-[38px] pr-[58px] pt-[38px]\" data-node-id=\"565:1885\" data-name=\"Inner Icon\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.1)] content-stretch flex items-center justify-center left-1/2 rounded-[9999px] size-[96px] top-1/2\" data-node-id=\"565:1886\" data-name=\"Overlay\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(255,255,255,0)] left-1/2 rounded-[9999px] shadow-[0px_0px_15px_2px_rgba(115,209,255,0.2)] size-[96px] top-1/2\" data-node-id=\"565:1887\" data-name=\"Overlay+Shadow\" />\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"565:1888\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[12px] relative shrink-0\" data-node-id=\"565:1890\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center relative shrink-0\" data-node-id=\"565:1891\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1892\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"565:1893\">\n <p className=\"leading-[32px]\">Séance 4-7-8 terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:1894\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"565:1895\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1897\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1898\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1899\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center px-[24px] relative shrink-0\" data-node-id=\"565:1900\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[rgba(190,200,207,0.8)] text-center whitespace-nowrap\" data-node-id=\"565:1901\">\n <p className=\"leading-[26px] mb-0\">Félicitations, votre système nerveux est apaisé,</p>\n <p className=\"leading-[26px]\">favorisant une récupération profonde.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[144px] items-center pb-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1902\" data-name=\"Footer - Bottom Actions Section (Premium Fixed Layout)\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1903\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1904\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1905\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1906\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"565:1907\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"565:1908\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1910\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"565:1911\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"565:1912\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1914":"const imgContainer = \"https://www.figma.com/api/mcp/asset/6df2ad6f-085d-45b2-9953-ab81ff49ba04.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/2b939dd7-d66c-42cf-b921-c66cb025e711.svg\";\nconst imgVector = \"https://www.figma.com/api/mcp/asset/8e0dec11-4e92-4ca3-a6ec-2e610d88d887.svg\";\nconst imgVector1 = \"https://www.figma.com/api/mcp/asset/26461333-1be8-4a6e-b2a9-a207be425321.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/5d2e20f0-5cd6-4f45-ba03-d1bbd8cc9112.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/b7a7389c-d2a3-4b05-8a1b-eb7d5d95da98.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/bf385ac4-7b3e-4ed7-a1db-bb1b3fb44c6f.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/6d3f709c-d2cc-44d9-871f-6b59d1306665.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/5bc0ddfb-85f4-4898-9cf3-d236ba58b31e.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/4d3e7307-c7b5-451d-99f0-b72a720fe783.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/c39a388f-25d1-4fd1-928f-d77c9326e6a5.svg\";\n\nexport default function Component4444RespirationCarreRestitutionSimple() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1914\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·4·4·4 - Respiration carré - Restitution (simple)\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:1915\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1916\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:1917\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1919\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:1920\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:1921\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:1922\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[828px] items-center justify-center overflow-clip pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1924\" data-name=\"Main Canvas\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[448px] relative shrink-0\" data-node-id=\"565:1925\" data-name=\"Central Content Section\">\n <div className=\"content-stretch flex flex-col h-[208px] items-start pb-[16px] relative shrink-0 w-[192px]\" data-node-id=\"565:1926\" data-name=\"Biometric Visualizer Placeholder (Success State):margin\">\n <div className=\"content-stretch flex flex-col items-start justify-center relative shrink-0 size-[192px]\" data-node-id=\"565:1927\" data-name=\"Biometric Visualizer Placeholder (Success State)\">\n <div className=\"flex h-[192px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:1928\" style={{ containerType: \"size\" }}>\n <div className=\"-rotate-90 flex-none h-[100cqw]\">\n <div className=\"h-full overflow-clip relative w-[192px]\" data-name=\"SVG - Circular Ring\">\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"565:1929\" data-name=\"Vector\">\n <div className=\"absolute inset-[-0.57%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector} />\n </div>\n </div>\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"565:1930\" data-name=\"Vector\">\n <div className=\"absolute inset-[-2.27%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex inset-0 items-center justify-center pb-[58px] pl-[38px] pr-[58px] pt-[38px]\" data-node-id=\"565:1931\" data-name=\"Inner Icon\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.1)] content-stretch flex items-center justify-center left-1/2 rounded-[9999px] size-[96px] top-1/2\" data-node-id=\"565:1932\" data-name=\"Overlay\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(255,255,255,0)] left-1/2 rounded-[9999px] shadow-[0px_0px_15px_2px_rgba(115,209,255,0.2)] size-[96px] top-1/2\" data-node-id=\"565:1933\" data-name=\"Overlay+Shadow\" />\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"565:1934\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[12px] relative shrink-0\" data-node-id=\"565:1936\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center relative shrink-0\" data-node-id=\"565:1937\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1938\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"565:1939\">\n <p className=\"leading-[32px]\">Séance 4·4·4·4 terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:1940\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"565:1941\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:1943\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:1944\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1945\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center px-[26.73px] relative shrink-0\" data-node-id=\"565:1946\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[rgba(190,200,207,0.8)] text-center whitespace-nowrap\" data-node-id=\"565:1947\">\n <p className=\"leading-[26px] mb-0\">Félicitations, votre système nerveux est apaisé,</p>\n <p className=\"leading-[26px]\">favorisant une récupération profonde.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:1948\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:1949\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:1950\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:1951\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1952\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"565:1953\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"565:1954\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:1955\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1956\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1957\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1958\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1959\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1961\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1962\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1963\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1964\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:1966\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1967\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:1968\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:1969\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[144px] items-center pb-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1971\" data-name=\"Footer - Bottom Actions Section (Premium Fixed Layout)\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1972\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:1973\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1974\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:1975\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"565:1976\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"565:1977\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:1979\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"565:1980\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"565:1981\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:1983":"const imgContainer = \"https://www.figma.com/api/mcp/asset/111f0bf9-b5be-4910-a78a-4fa714d861b6.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/1fc8e2bd-191d-4a06-8654-c4d34c42f24c.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/a5ed2b62-e884-469a-9a32-bec538b3e7b0.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/aa542746-2039-4976-ae01-fd053b4d2df4.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/003a31f2-7526-45d4-8eca-3c2322586e31.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/dc7516e6-829c-46a0-a276-8e2b62b45b90.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/534b813f-c866-457e-b57b-b90e5f2d6248.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/db4df4fd-eed8-4acf-9e5f-92658d824958.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/5ce81d38-4b10-4260-98d3-7c6352d25ede.svg\";\n\nexport default function Component478SommeilPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:1983\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·7·8 - Sommeil - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:1984\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:1985\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:1986\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:1987\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">4·7·8 - Sommeil</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:1988\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:1989\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"565:1991\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:1992\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:1993\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:1994\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:1995\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:1996\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:1998\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:1999\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:2000\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Une expiration longue relâche `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">la tension et vous invite au sommeil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2001\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:2002\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2003\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2004\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2005\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2006\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2007\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2008\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2009\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2010\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2011\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2012\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2013\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2014\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2015\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2016\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2017\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2018\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:2019\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:2020\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:2021\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2022\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2023\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2024\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2025\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2026\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2028\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2029\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2030\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2031\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2033\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2034\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2035\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2037\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2038\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2039\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2040\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2042\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2043\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2044\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2045\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2047\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2048\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2049\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2050\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2052\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2053\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2054\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2055\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2057\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2058\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2059":"const imgInfo = \"https://www.figma.com/api/mcp/asset/ad822844-3a45-4275-a9cd-970e1cc72095.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2059\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2060\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2061\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2062\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[140px] relative shrink-0 w-[285px]\" data-node-id=\"565:2064\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-full whitespace-pre-wrap\" data-node-id=\"565:2065\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Quand l'expiration dure plus longtemps que l'inspiration, la bascule vers le parasympathique s'accentue, d'où un apaisement marqué. `}</p>\n <p className=\"leading-[20px]\">Un protocole à utiliser idéalement le soir, dans votre lit, pour vous aider à vous endormir.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2066":"const imgContainer = \"https://www.figma.com/api/mcp/asset/30db2cea-5d27-406f-a9c3-6efa21a4b1a3.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/4dad6cdb-159a-422d-8aba-ac47b5c394a8.svg\";\n\nexport default function CalmeExpressSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2066\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Calme express - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2067\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2068\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2069\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2071\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2072\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2073\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2074\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:2076\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2077\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[21px] items-start relative shrink-0\" data-node-id=\"565:2078\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"565:2079\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:2080\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Inspirez encore</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:2081\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:2082\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2083\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2084\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:2085\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:2086\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:2087\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"565:2088\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"565:2089\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2090\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:2091\">\n <p className=\"leading-[15px]\">Calme express</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:2092\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2093\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2094\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:2095\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:2096\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:2097\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2098\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2099\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2100\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:2101\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:2102\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2103\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:2104\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:2105\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:2106\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2107\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2108":"const imgContainer = \"https://www.figma.com/api/mcp/asset/820f4f49-6a4c-4ab0-b087-8284e17681a2.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/fa4734ff-5865-4517-94ad-9f697bb5a9da.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/e0f3dcb6-2667-42a3-a148-eea9ad012242.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/f073f4c6-6a85-49ad-b44b-f709ee5e80af.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/2eb0ab28-d32d-4444-a88f-1247bce06733.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/390682d8-99c8-49cd-bb79-bb51c0449643.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/53b50b04-1614-40a6-bf8c-99e91030ca8d.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/22138404-0e76-4c3a-8460-9b2336183f76.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/ad5038f8-5959-4e1d-bf8b-4e24979faffe.svg\";\n\nexport default function CalmeExpressPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2108\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Calme express - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2109\" data-name=\"Main\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:2110\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2111\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:2112\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Calme express</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2113\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2114\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:2116\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2117\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:2118\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:2119\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:2120\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:2122\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:2123\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:2124\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0\">Deux inspirations enchaînées, puis</p>\n <p className=\"leading-[24.75px]\">une longue expiration.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2125\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:2126\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2127\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2128\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2129\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2130\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2131\">\n <p className=\"leading-[16px]\">2 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2132\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2133\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2134\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2135\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2136\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2137\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2138\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2139\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2140\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2141\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2142\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:2143\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:2144\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:2145\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2146\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2147\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2148\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2149\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2150\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2152\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2153\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2154\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2155\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2157\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2158\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2159\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2161\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2162\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2163\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2164\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2166\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2167\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2168\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2169\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2171\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2172\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2173\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2174\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2176\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2177\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2178\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2179\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2181\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2182\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2183":"const imgInfo = \"https://www.figma.com/api/mcp/asset/65bd2f81-6e24-406f-a14d-f21421aa8cef.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2183\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2184\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2185\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2186\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[135px] relative shrink-0 w-[285px]\" data-node-id=\"565:2188\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-full whitespace-pre-wrap\" data-node-id=\"565:2189\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Le calme express :</p>\n <p className=\"leading-[20px] mb-0\">{`deux inspirations puis une expiration prolongée, rouvre les alvéoles pulmonaires et accélère l'évacuation `}</p>\n <p className=\"leading-[20px] mb-0\">{`du CO2. `}</p>\n <p className=\"leading-[20px]\">{`C'est l'une des voies les plus rapides pour faire retomber un état de tension.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2190":"const imgInfo = \"https://www.figma.com/api/mcp/asset/d255723f-1482-47a7-83bb-7dc2caf26f69.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2190\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2191\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2192\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2193\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[135px] relative shrink-0 w-[285px]\" data-node-id=\"565:2195\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[200px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-full whitespace-pre-wrap\" data-node-id=\"565:2196\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`À environ six respirations par minute, le rythme cardiaque et la respiration entrent en résonance : la variabilité s'amplifie et le tonus vagal augmente. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px]\">{`C'est le mécanisme respiratoire le mieux documenté. Son effet immédiat est net ; son effet sur votre variabilité de fond se construit avec la régularité, sur plusieurs jours.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2197":"const imgContainer = \"https://www.figma.com/api/mcp/asset/cf508c94-aff6-49fd-83aa-eb8c92554066.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/2071a9d8-a6e2-4ba0-a15b-eabd28d5e918.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/2244ad40-8ddc-4d6e-8d67-e6c69b09992f.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/20baeb48-eaf2-49c6-ae74-81a3462113c0.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/211e0b36-41ed-4de1-954e-15144cfabb9b.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/ab361f89-a265-418e-92c4-a9e7326f185a.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/c028ea12-c8ca-41e6-a46e-57ad7017c3e7.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/1429aba6-c70b-45eb-81d6-c632b054120f.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/430460a9-a0a0-4512-afa7-5bed69c54d9f.svg\";\n\nexport default function Component4444EquilibrePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2197\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·4·4·4 - Équilibre - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2198\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:2199\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2200\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:2201\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">4·4·4·4 - Équilibre</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2202\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2203\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"565:2205\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:2206\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2207\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:2208\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:2209\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:2210\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:2212\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:2213\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:2214\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Inspirez, retenez, expirez, retenez : `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">quatre temps égaux.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2215\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:2216\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2217\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2218\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2219\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2220\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2221\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2222\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2223\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2224\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2225\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2226\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2227\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2228\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2229\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2230\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2231\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2232\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:2233\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:2234\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:2235\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2236\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2237\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2238\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2239\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2240\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2242\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2243\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2244\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2245\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2247\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2248\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2249\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2251\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2252\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2253\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2254\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2256\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2257\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2258\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2259\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2261\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2262\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2263\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2264\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2266\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2267\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2268\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2269\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2271\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2272\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2273":"const imgInfo = \"https://www.figma.com/api/mcp/asset/a9d41469-9a71-4be7-a006-b7d20e34ed20.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2273\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2274\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2275\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2276\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[285px]\" data-node-id=\"565:2278\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-full whitespace-pre-wrap\" data-node-id=\"565:2279\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Des temps égaux régularisent la respiration et stabilisent le taux `}</p>\n <p className=\"leading-[20px]\">{`de CO2 ; la rétention sert de point d'ancrage à l'attention afin de parvenir à un état d'équilibre de votre système nerveux autonome.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2383":"const imgContainer = \"https://www.figma.com/api/mcp/asset/148d681f-c652-4232-8e1e-21994edcedac.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/732f0a13-77e0-453c-97f4-c6487631329e.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/53de33f9-271d-4a49-9c28-782a23a4e198.svg\";\nconst imgPulse = \"https://www.figma.com/api/mcp/asset/8246f8ad-f914-4015-bee5-8f33341f8383.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/d852cdaf-500f-4816-9d9e-cd618bb3d15a.svg\";\nconst imgAnchor = \"https://www.figma.com/api/mcp/asset/9fbafc2b-872e-4cb8-a6bc-3717f1d30593.svg\";\nconst imgCloudMoon = \"https://www.figma.com/api/mcp/asset/e1a0e4e5-999e-4db3-b642-dd9a002da91c.svg\";\nconst imgLightning = \"https://www.figma.com/api/mcp/asset/e8d2aaa3-f91b-40a5-a2eb-4cc5e77efebd.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/e51f7358-cbbc-40ec-901f-bacc72824f85.svg\";\nconst imgMoon = \"https://www.figma.com/api/mcp/asset/064c6c99-a83c-4dd9-b8c1-d85294285f0e.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/1edc0b35-2a49-4bbd-b51a-23c5bfa2009d.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/519d6b07-7757-49c0-be62-92b84b3160c2.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/60141a65-a117-4068-8037-8eeac2ee2572.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/d2173dc8-5f0a-4f36-9bb7-02a2ac6d7b8b.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/ef8ddba1-36fd-47c4-8a6a-fe0b7c12c4e5.svg\";\n\nexport default function VosOutilsAncrer() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2383\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - Ancrer\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2384\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2385\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2386\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2388\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2389\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2390\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2391\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2393\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[102px] items-start relative shrink-0 w-full\" data-node-id=\"565:2394\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-baseline justify-between relative shrink-0 w-full\" data-node-id=\"565:2395\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"565:2396\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Ancrer</p>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2397\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2398\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"565:2399\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Des vibrations haptiques structurées pour stabiliser votre physiologie. Choisissez un protocole et laissez agir.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-full\" data-node-id=\"565:2400\" data-name=\"Protocol Bento Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#c62828] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col h-[116px] items-start justify-center overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2401\" data-name=\"Featured Card: SOS Stress\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2402\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"565:2403\" data-name=\"Container\">\n <div className=\"border border-[rgba(198,40,40,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"565:2404\" data-name=\"Border\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2405\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"overflow-clip relative shrink-0 size-[60px]\" data-node-id=\"565:2406\" data-name=\"Circle Big Circle.svg\">\n <div className=\"absolute left-[20px] size-[20px] top-[20px]\" data-node-id=\"565:2407\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2409\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#c62828] text-[24px] whitespace-nowrap\" data-node-id=\"565:2410\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">SOS Stress</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:2411\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[6px] items-center relative shrink-0\" data-node-id=\"565:2412\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2413\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] whitespace-nowrap\" data-node-id=\"565:2414\">\n <p className=\"leading-[24px]\">Accompagner un pic de tension</p>\n </div>\n </div>\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[4px]\" data-node-id=\"565:2415\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2416\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#c62828] text-[16px] whitespace-nowrap\" data-node-id=\"565:2417\">\n <p className=\"leading-[24px]\">90s</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2418\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2419\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2421\" data-name=\"Micro-Ancrage\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2422\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:2423\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"565:2424\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2425\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2426\" data-name=\"Anchor\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgAnchor} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2428\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2429\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2430\">\n <p className=\"leading-[24px]\">Micro-Ancrage</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2431\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"565:2432\">\n <p>\n <span className=\"leading-[20px]\">Stabilisation rapide •</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">{` 60s`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2433\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2435\" data-name=\"Apaiser\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2436\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:2437\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"565:2438\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2439\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2440\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2442\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2443\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2444\">\n <p className=\"leading-[24px]\">Apaiser</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2445\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"565:2446\">\n <p>\n <span className=\"leading-[20px]\">Relâcher les tensions •</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">{` 1-3min`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2447\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2449\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2450\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:2451\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"565:2452\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2453\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2454\" data-name=\"Lightning\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgLightning} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2456\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2457\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2458\">\n <p className=\"leading-[24px]\">Booster</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2459\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"565:2460\">\n <p>\n <span className=\"leading-[20px]\">Remobiliser votre énergie •</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">{` 30-90s`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2461\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start opacity-60 p-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2463\" data-name=\"Synchroniser (Badge En Validation)\">\n <div aria-hidden className=\"absolute inset-0 pointer-events-none rounded-[12px]\">\n <div className=\"absolute bg-[rgba(15,23,42,0.6)] inset-0 rounded-[12px]\" />\n <div className=\"absolute backdrop-blur-[6px] bg-white inset-0 mix-blend-saturation rounded-[12px]\" />\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2464\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[16px] items-center relative shrink-0 w-[320px]\" data-node-id=\"565:2465\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[8px] shrink-0 size-[48px]\" data-node-id=\"565:2466\" data-name=\"Background+Border\">\n <div className=\"h-[11px] relative shrink-0 w-[24px]\" data-node-id=\"565:2467\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[205px]\" data-node-id=\"565:2469\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-[213px]\" data-node-id=\"565:2470\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2471\">\n <p className=\"leading-[24px]\">Synchroniser</p>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] gap-[6px] items-center min-w-px relative\" data-node-id=\"565:2472\" data-name=\"Container\">\n <div className=\"bg-[#73d1ff] relative rounded-[9999px] shrink-0 size-[6px]\" data-node-id=\"565:2473\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2474\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#73d1ff] text-[10px] tracking-[0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:2475\">\n <p className=\"leading-[15px]\">EN VALIDATION</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center relative shrink-0 w-[213px]\" data-node-id=\"565:2476\" data-name=\"Heading 4\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"565:2477\">\n <p>\n <span className=\"leading-[20px]\">{`Un rythme régulier pour alléger les pensées • `}</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">5-15 min</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2478\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2479\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:2480\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"565:2481\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2482\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2483\" data-name=\"Moon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2485\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2486\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2487\">\n <p className=\"leading-[24px]\">Endormissement</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2488\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"565:2489\">\n <p>\n <span className=\"leading-[20px]\">Un rythme lent qui décroît pour vous endormir</span>\n <span className=\"leading-[20px] tracking-[-0.1px]\">{` •`}</span>\n <span className=\"leading-[20px] text-[#4ab8e8] tracking-[-0.1px]\">{` 20-45min`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2490\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2492\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2493\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2494\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2496\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2497\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2498\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2499\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2501\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2502\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2503\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2504\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2506\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2507\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2508\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2509\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2511\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2512\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2513\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2514\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2516\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2517\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2518":"const imgInfo = \"https://www.figma.com/api/mcp/asset/26785d1d-d805-4845-83fd-6bfb606cf5e7.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2518\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2519\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2520\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2521\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[157px] relative shrink-0 w-[285px]\" data-node-id=\"565:2523\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[157px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"565:2524\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Ces vibrations proposent un rythme sur lequel votre état peut se caler, sans passer par la respiration.</p>\n <p className=\"leading-[20px]\">{`Lent et décroissant, il vise l'apaisement ; rapide et montant, la remobilisation. L'effet passe par le rythme et le ressenti ; une piste que la mesure avant/après vérifie, plutôt qu'un acquis.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2525":"const imgContainer = \"https://www.figma.com/api/mcp/asset/93237fa1-a803-4116-a5c0-98d76b747284.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/fb8be15d-cdd2-4aa7-9fdf-8f8a4af3a910.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/7c838bf9-1ddc-41cb-98c8-babb69b34ead.svg\";\n\nexport default function MicroAncrageSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2525\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Micro-Ancrage - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2526\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2527\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2528\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2530\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2531\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2532\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2533\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:2535\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"565:2536\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"565:2537\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[21px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"565:2538\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:2539\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Trois impulsions, puis une descente. `}</p>\n <p className=\"leading-[28px] whitespace-pre\">Restez posé</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:2540\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:2541\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2542\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2543\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:2544\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:2545\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:2546\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"565:2547\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"565:2548\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex gap-[6px] items-center relative shrink-0\" data-node-id=\"565:2549\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:2550\">\n <p className=\"leading-[15px]\">Micro-Ancrage</p>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[20px]\" data-node-id=\"565:2551\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2552\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:2554\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2555\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2556\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:2557\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:2558\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:2559\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2560\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2561\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2562\">\n <p className=\"leading-[20px]\">00:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:2563\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:2564\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2565\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:2566\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:2567\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:2568\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2569\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2570":"const imgContainer = \"https://www.figma.com/api/mcp/asset/07311d46-6af3-4fd1-a143-fa1a36748f2f.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/92839764-85fe-44a3-9a89-e3b7adeb1aed.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/c08f5bf3-77dd-4162-819a-02c899018414.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/c5940187-50ed-4ba3-92ae-053ae24ad496.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/f9c92503-1bfc-4e54-87ec-e17dab330d22.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/fc551c18-806c-4937-805d-52d25dc005f4.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/ce88fa80-9998-4452-8b1b-1e9dd97f47fd.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/d7a87b44-ab76-423c-9387-e867da7f69ad.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/cb4f8773-fc45-4920-b1c0-1ef2b7421832.svg\";\n\nexport default function MicroAncragePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2570\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Micro-Ancrage - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2571\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:2572\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2573\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:2574\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Micro-Ancrage</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2575\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2576\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"565:2578\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:2579\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2580\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:2581\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:2582\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:2583\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:2585\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:2586\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:2587\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Trois impulsions, puis une descente. `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">Restez posé.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[80px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2588\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2589\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:2590\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2591\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE De la sÉance</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2592\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2593\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2594\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2595\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2596\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2597\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2598\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2599\">\n <p className=\"leading-[16px]\">25 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2600\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2601\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2602\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2603\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2604\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2605\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2606\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:2607\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:2608\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:2609\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2610\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2611\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2612\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2613\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2614\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2616\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2617\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2618\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2619\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2621\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2622\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2623\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2625\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2626\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2627\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2628\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2630\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2631\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2632\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2633\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2635\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2636\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2637\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2638\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2640\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2641\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2642\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2643\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2645\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2646\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2647":"const imgInfo = \"https://www.figma.com/api/mcp/asset/64e730cc-9681-40a2-bdbc-e29a5b36521f.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2647\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2648\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2649\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2650\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[119px] relative shrink-0 w-[285px]\" data-node-id=\"565:2652\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[119px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px] whitespace-pre-wrap\" data-node-id=\"565:2653\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`L'idée : interrompre une petite montée de tension avant qu'elle s'installe. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Trois signaux nets accrochent l'attention et cassent la spirale, puis le rythme redescend pour ramener le calme. `}</p>\n <p className=\"leading-[20px]\">Un format volontairement très court.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2655":"const imgInfo = \"https://www.figma.com/api/mcp/asset/56dd4110-a1b7-4130-9fbd-ff47c1980d3c.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2655\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2656\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2657\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2658\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[100px] relative shrink-0 w-[285px]\" data-node-id=\"565:2660\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[100px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px] whitespace-pre-wrap\" data-node-id=\"565:2661\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Un rythme lent, doux et décroissant envoie au système un signal de ralentissement, propice au relâchement musculaire et mental. `}</p>\n <p className=\"leading-[20px]\">{`Rien d'autre à faire qu'être présent.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2662":"const imgContainer = \"https://www.figma.com/api/mcp/asset/6cb3a27b-1f22-47fa-b76b-e2b78d784c3f.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/10e7d170-b172-470f-b718-86f43ad8fdfe.svg\";\n\nexport default function ApaiserSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2662\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Apaiser - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2663\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2664\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2665\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2667\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2668\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2669\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2670\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:2672\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[56px] items-start relative shrink-0\" data-node-id=\"565:2673\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"565:2674\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[49px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"565:2675\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center tracking-[-0.3px] whitespace-nowrap\" data-node-id=\"565:2676\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Des vibrations lentes et amorties `}</p>\n <p className=\"leading-[28px] whitespace-pre\">accompagnent le relâchement.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:2677\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:2678\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2679\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2680\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:2681\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:2682\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:2683\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"565:2684\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"565:2685\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex items-center relative shrink-0\" data-node-id=\"565:2686\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:2687\">\n <p className=\"leading-[15px]\">Apaiser</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:2688\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2689\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2690\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:2691\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:2692\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:2693\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2694\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2695\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2696\">\n <p className=\"leading-[20px]\">02:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:2697\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:2698\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2699\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:2700\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:2701\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:2702\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2703\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2704":"const imgContainer = \"https://www.figma.com/api/mcp/asset/94a854d3-f51f-450a-b5a5-436a8d643cae.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/e76b0272-5186-4c73-b654-9cf0547b5db8.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/b8124b68-bfc1-409a-a492-bf4dc8c44b00.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/e17b9e2d-937a-431d-825f-c4ecc656ebf2.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/1d24f9a2-c3ad-4dce-9432-6d55412d253f.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/d2cd80c0-ec91-4833-8a3b-1ad333c34da9.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/83426438-8a63-4861-b578-005d6909a7d3.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/b1854bd0-f403-4cfc-a6f9-827cb7bc8141.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/9b69de26-6f6f-4c2d-9e4f-13b2ae6a4343.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/fc5c7c63-c176-43af-87ea-73cc13faad67.svg\";\n\nexport default function ApaiserPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2704\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Apaiser - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2705\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:2706\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2707\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:2708\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Apaiser</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2709\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2710\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"565:2712\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:2713\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2714\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:2715\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:2716\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:2717\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:2719\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:2720\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:2721\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Des vibrations lentes et amorties `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">accompagnent le relâchement.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[106px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2722\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[106px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"565:2723\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2724\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2725\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2727\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2728\">\n <p className=\"leading-[24px]\">Durée de la séance</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-end min-w-[35.880001068115234px] pl-[70.359px] relative\" data-node-id=\"565:2729\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2730\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2731\">\n <p className=\"leading-[20px]\">1:10 min</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2732\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:2733\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:2734\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[80px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2735\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2736\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:2737\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2738\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE De la sÉance</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2739\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2740\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2741\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2742\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2743\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2744\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2745\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2746\">\n <p className=\"leading-[16px]\">25 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2747\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2748\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2749\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2750\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2751\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2752\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2753\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:2754\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:2755\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:2756\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2757\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2758\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2759\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2760\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2761\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2763\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2764\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2765\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2766\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2768\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2769\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2770\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2772\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2773\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2774\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2775\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2777\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2778\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2779\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2780\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2782\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2783\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2784\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2785\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2787\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2788\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2789\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2790\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2792\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2793\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2795":"const imgInfo = \"https://www.figma.com/api/mcp/asset/4073e079-92e3-47b3-aa22-6750f4c2c0dc.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:2795\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2796\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2797\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:2798\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[104px] relative shrink-0 w-[285px]\" data-node-id=\"565:2800\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[104px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"565:2801\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Un rythme rapide et montant vise à relever le niveau d'activation quand l'énergie manque, sur le principe d'un niveau d'éveil optimal. À éviter en état de tension, où l'on recherche l'effet inverse.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2802":"const imgContainer = \"https://www.figma.com/api/mcp/asset/c29d9e4e-598f-4b88-aaaa-4737e838d2cc.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/8beb4e06-3fc8-467b-aaee-94fd329201d7.svg\";\n\nexport default function BoosterSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2802\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Booster - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2803\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2804\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2805\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2807\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2808\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2809\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2810\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:2812\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[56px] items-start relative shrink-0\" data-node-id=\"565:2813\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"565:2814\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[56px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"565:2815\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:2816\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Des impulsions rapides et `}</p>\n <p className=\"leading-[28px] whitespace-pre\">montantes pour remobiliser.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:2817\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:2818\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2819\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:2820\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:2821\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:2822\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:2823\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"565:2824\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"565:2825\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex items-center relative shrink-0\" data-node-id=\"565:2826\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:2827\">\n <p className=\"leading-[15px]\">Booster</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:2828\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2829\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:2830\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:2831\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:2832\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:2833\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2834\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2835\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2836\">\n <p className=\"leading-[20px]\">01:29</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:2837\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:2838\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2839\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:2840\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:2841\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:2842\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2843\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2844":"const imgContainer = \"https://www.figma.com/api/mcp/asset/4c7182ea-f260-4079-8396-88807ed78319.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/9e1b0803-4ec4-4818-8281-811e2a2f16d9.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/8f7149ce-8c06-4ead-abdb-eb278457091c.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/3dc53f0a-4089-4357-a2ff-7da5935ea243.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/5dbdfc2a-d4f0-4b22-84bf-2e127b3d926d.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/90f038d5-3556-4d6d-86a4-06474a8960de.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/7672666d-b703-4980-b472-e27b37691509.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/ac197060-012b-40ac-beb6-159ce9673362.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/f925cdb0-5a8e-434b-9b18-08be527da844.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/d55a2dcd-2b79-4718-ab7e-22b3eaa66e0b.svg\";\n\nexport default function BoosterPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2844\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Booster - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2845\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:2846\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2847\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:2848\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Booster</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:2849\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:2850\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"565:2852\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:2853\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2854\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:2855\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:2856\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:2857\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:2859\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:2860\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:2861\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Des impulsions rapides et `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">montantes pour remobiliser.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[106px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2862\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[106px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"565:2863\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2864\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:2865\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2867\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2868\">\n <p className=\"leading-[24px]\">Durée de la séance</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-end min-w-[35.880001068115234px] pl-[70.359px] relative\" data-node-id=\"565:2869\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2870\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:2871\">\n <p className=\"leading-[20px]\">37 s</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2872\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:2873\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:2874\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2875\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:2876\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:2877\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE De la sÉance</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2878\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2879\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2880\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2881\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2882\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2883\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2884\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2885\">\n <p className=\"leading-[16px]\">25 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:2886\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:2887\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2888\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:2889\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2890\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2891\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:2892\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:2893\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:2894\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:2895\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2896\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2897\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2898\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2899\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2900\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2902\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2903\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2904\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2905\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:2907\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2908\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:2909\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2911\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:2912\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2913\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:2914\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2916\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2917\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2918\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:2919\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2921\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2922\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2923\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:2924\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2926\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2927\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2928\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:2929\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2931\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2932\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:2934":"const imgContainer = \"https://www.figma.com/api/mcp/asset/2f971318-dbba-4167-bc18-15c924da9528.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/824685e4-5ac0-474c-a701-ece682172399.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/6d12bca8-477c-4407-8671-06e0be86442a.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/6e9d71e4-6781-4265-bf68-52fc4ba0d075.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/eb3e90fc-41cb-436f-8cfd-1b3854b8cddc.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/bfc1ad6b-0609-4216-8cb0-a3d737c06288.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/c514c148-a741-4ddc-a1b5-c86fbdb71f91.svg\";\n\nexport default function AncrerRestitution() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:2934\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ancrer - Restitution\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:2935\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:2936\" data-name=\"Validation / Visual Focus Area:margin\">\n <div className=\"content-stretch flex flex-col h-[218px] items-center relative shrink-0 w-full\" data-node-id=\"565:2937\" data-name=\"Validation / Visual Focus Area\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[218px] items-center py-[12px] relative shrink-0 w-full\" data-node-id=\"565:2938\" data-name=\"Container\">\n <div className=\"content-stretch flex items-start relative shrink-0\" data-node-id=\"565:2939\" data-name=\"Container\">\n <div className=\"absolute bg-[rgba(121,211,255,0.2)] blur-[32px] inset-0 rounded-[9999px]\" data-node-id=\"565:2940\" data-name=\"Overlay+Blur\" />\n <div className=\"border-2 border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:2941\" data-name=\"Border\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"565:2942\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:2944\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:2945\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"565:2946\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Séance terminée</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[25.58px] relative shrink-0 w-full\" data-node-id=\"565:2947\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center w-[362px]\" data-node-id=\"565:2948\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Prenez quelques secondes pour</p>\n <p className=\"leading-[20px]\">observer votre état.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:2949\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:2950\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:2951\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:2952\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:2953\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"565:2954\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"565:2955\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:2956\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:2957\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2958\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:2959\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:2960\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:2962\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2963\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:2964\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:2965\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:2967\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2968\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:2969\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:2970\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:2972\" data-name=\"Recommendation Card (Asymmetric / Specialized UI)\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:2973\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[37.897px] relative shrink-0 w-[27.667px]\" data-node-id=\"565:2974\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2976\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2977\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"565:2978\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">CONSEIL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:2979\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:2980\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0\">Une respiration 4–6 peut prolonger la</p>\n <p className=\"leading-[19.5px] mb-0\">descente. Elle stimule le nerf vague pour</p>\n <p className=\"leading-[19.5px]\">ancrer durablement ce calme.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-t content-stretch flex flex-col from-[#0c141f] gap-[12px] items-start p-[20px] relative shrink-0 to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"565:2981\" data-name=\"Footer - Bottom Actions Layer\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:2982\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[56px] left-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] top-0\" data-node-id=\"565:2983\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#00465e] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2984\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TERMINER</p>\n </div>\n </div>\n <div className=\"border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[56px] items-center justify-center pb-[18.5px] pt-[17.5px] px-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:2985\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:2986\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">MESURER MON ÉTAT</p>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:2987\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:2988\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:2989\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:2991\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:2992\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:2993\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:2994\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3079":"const imgContainer = \"https://www.figma.com/api/mcp/asset/93ae8024-16bb-456b-a460-109e021f0723.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/eb864eae-92d1-46ec-861f-dbaf5edf6fd8.svg\";\nconst imgAnchor = \"https://www.figma.com/api/mcp/asset/66d7f8a7-a55c-4855-a3c8-d11f88301da3.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/9d14c4ea-e1e4-44cb-bbe0-e2e9f16249e2.svg\";\nconst imgCloudMoon = \"https://www.figma.com/api/mcp/asset/5e6491c0-18c3-4f67-a6bb-f22db3270f3d.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/61697a49-38b9-4452-bbe5-475756d8c307.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/fe2ba8fa-d5c5-452f-ac61-b2e117d034cf.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/8a81ca6d-177d-49b3-b7b4-bbfae408c513.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/aa941fae-e0d1-4097-a6e2-20ee36fcd9c1.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/2b6e7214-57bc-4204-8bb6-ea4f0c66382e.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/f8658948-6eaa-4dd6-9088-74bb380e3a79.svg\";\n\nexport default function VosOutilsRecentrer() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3079\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - Recentrer\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3080\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3081\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3082\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3084\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3085\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3086\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3087\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[794px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3089\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[76px] items-start relative shrink-0 w-full\" data-node-id=\"565:3090\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-baseline justify-between relative shrink-0 w-full\" data-node-id=\"565:3091\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"565:3092\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Recentrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3093\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"565:3094\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Un repère visuel et une vibration se synchronisent. Votre attention se pose sur ce point.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[20px] h-[384px] items-start relative shrink-0 w-full\" data-node-id=\"565:3095\" data-name=\"Protocol Bento Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3096\" data-name=\"Micro-Ancrage\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3097\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:3098\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"565:3099\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3100\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:3101\" data-name=\"Anchor\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgAnchor} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3103\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3104\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:3105\">\n <p className=\"leading-[24px]\">Focus</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3106\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"565:3107\">\n <p className=\"leading-[20px]\">{`Suivez une cible du regard `}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:3108\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3110\" data-name=\"Apaiser\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3111\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:3112\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"565:3113\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3114\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:3115\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3117\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3118\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:3119\">\n <p className=\"leading-[24px]\">Concentrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3120\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"565:3121\">\n <p className=\"leading-[20px]\">Suivez un point du doigt</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:3122\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3124\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3125\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:3126\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"565:3127\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3128\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:3129\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3131\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3132\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:3133\">\n <p className=\"leading-[24px]\">Miroir Cardiaque</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3134\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"565:3135\">\n <p className=\"leading-[20px]\">Vos battements en temps réel</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:3136\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[154px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:3138\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:3139\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3140\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:3141\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[120px] relative shrink-0 w-[285px]\" data-node-id=\"565:3143\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[120px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"565:3144\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Fixer l'attention sur un repère sensoriel concret occupe le cortex préfrontal et laisse moins de place à la rumination. L'effet attentionnel est bien documenté ; son prolongement sur l'équilibre nerveux est plus indirect.`}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:3145\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3146\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:3147\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3149\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:3150\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3151\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:3152\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3154\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3155\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3156\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:3157\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3159\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3160\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3161\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:3162\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3164\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3165\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3166\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3167\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3169\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3170\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3171":"const imgContainer = \"https://www.figma.com/api/mcp/asset/4a182aa0-9abc-4d7f-9382-a7cfc11df60e.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/285803c1-4152-47f9-8834-af10f47ecae0.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/b9ff5b48-d1bd-48d7-bc16-82c21af30679.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/9164ff52-c3f5-4cfa-b419-1c7493a3794a.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/790f0b36-6475-452b-abb9-129224b4a3d5.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/924fa69b-7c44-41ca-b6a6-fa08645dcb53.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/aeee756d-3f08-4782-adfd-6478611df5eb.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/3604be8f-ac30-4fc8-915d-78c0844f1f9f.svg\";\n\nexport default function FocusPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3171\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Focus - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3172\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3173\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3174\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:3175\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Focus</p>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:3176\" data-name=\"Button\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"565:3177\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:3178\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3179\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:3180\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:3181\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:3182\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:3184\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[102px] items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:3185\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:3186\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`L'attention soutenue sur une `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`cible lente réduit le vagabondage `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`de l'esprit. Plus le regard reste`}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">engagé, moins les pensées dérivent.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:3187\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3188\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3189\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3190\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3191\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3192\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3193\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3194\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3195\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3196\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3197\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3198\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3199\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:3200\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3201\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:3202\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3203\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3204\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3205\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3207\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3208\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3209\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3210\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:3212\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3213\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:3214\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3216\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:3217\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3218\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:3219\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3221\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3222\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3223\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:3224\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3226\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3227\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3228\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:3229\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3231\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3232\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3233\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3234\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3236\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3237\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3238":"const imgContainer = \"https://www.figma.com/api/mcp/asset/101fbaed-34a6-4ff9-9874-84f9b5a5f41a.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/fb1c033b-7a5f-46bf-a344-aa3343c01954.svg\";\n\nexport default function FocusSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3238\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Focus - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3239\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3240\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3241\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3243\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3244\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3245\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3246\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:3248\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[28px] items-start relative shrink-0\" data-node-id=\"565:3249\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[21px] items-start relative shrink-0\" data-node-id=\"565:3250\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"565:3251\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:3252\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Suivez la cible du regard, sans effort.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:3253\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:3254\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:3255\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:3256\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:3257\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:3258\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:3259\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"565:3260\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"565:3261\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3262\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:3263\">\n <p className=\"leading-[15px]\">Focus</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:3264\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:3265\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:3266\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:3267\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:3268\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:3269\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3270\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3271\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:3272\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:3273\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:3274\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3275\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:3276\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:3277\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:3278\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3279\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3280":"const imgContainer = \"https://www.figma.com/api/mcp/asset/9fcaac32-2934-4d16-bd66-c49b9386db34.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/dfff86bd-e301-43b5-8bdf-8d537dfdf28d.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/25b52261-036b-4546-890e-c419fbe81a8b.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/26c8c543-af55-4757-bab4-81a0f35ab03b.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/bde90711-7c38-47ed-9469-260fbce19412.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/866e61a8-5164-41ec-bc9b-9c811f417876.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/1554d634-40db-466c-92eb-46355c254222.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/2f0eb415-af05-42e1-9622-7ffbcc455a49.svg\";\n\nexport default function ConcentrerPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3280\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Concentrer - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3281\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3282\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3283\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:3284\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Concentrer</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"565:3285\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:3286\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3287\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:3288\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:3289\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:3290\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:3292\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:3293\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:3294\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Engager la main en plus du regard `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`renforce l'ancrage : `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`la boucle sensori-motrice mobilise `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`davantage l'attention que le seul `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`suivi visuel. Utile quand l'esprit `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">{`est trop agité pour se poser. `}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:3295\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3296\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3297\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3298\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3299\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3300\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3301\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3302\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3303\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3304\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3305\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3306\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3307\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:3308\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3309\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:3310\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3311\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3312\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3313\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3315\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3316\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3317\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3318\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:3320\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3321\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:3322\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3324\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:3325\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3326\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:3327\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3329\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3330\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3331\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:3332\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3334\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3335\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3336\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:3337\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3339\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3340\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3341\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3342\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3344\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3345\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3346":"const imgContainer = \"https://www.figma.com/api/mcp/asset/841ea1f2-a85e-4918-b8af-a7760b45d9c9.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/290177aa-5082-4db6-a6bf-352a29af382f.svg\";\n\nexport default function ConcentrerSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3346\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Concentrer - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3347\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3348\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3349\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3351\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3352\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3353\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3354\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:3356\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[53px] items-start relative shrink-0\" data-node-id=\"565:3357\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[53px] items-start relative shrink-0\" data-node-id=\"565:3358\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[53px] items-center relative shrink-0 w-full\" data-node-id=\"565:3359\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[53px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center w-[355px] whitespace-pre-wrap\" data-node-id=\"565:3360\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0\">{`Gardez le doigt sur le point lumineux `}</p>\n <p className=\"leading-[28px]\">et suivez-le.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:3361\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:3362\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:3363\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:3364\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:3365\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:3366\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:3367\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"565:3368\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"565:3369\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3370\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:3371\">\n <p className=\"leading-[15px]\">Concentrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:3372\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:3373\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:3374\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:3375\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:3376\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:3377\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3378\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3379\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:3380\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:3381\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:3382\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3383\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:3384\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:3385\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:3386\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3387\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3388":"const imgContainer = \"https://www.figma.com/api/mcp/asset/74fbfc18-6232-4261-9c48-cb94c2fdf968.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/7f250ee3-0069-4fba-8ba9-5beab0998eb3.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/f2cfb515-80ea-452c-b8b6-435b40add5b8.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/c7feb3e7-5b7b-4bc5-8719-843eabcdc29c.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/e97b971f-6993-4956-897c-5602e69154d0.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/d18801eb-c025-4460-84d3-88eb1816b06b.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/cac651d8-39d4-41c0-a751-24611c695f7f.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/0ec56ad5-60e2-4a80-b401-ac3197e83f49.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/53139896-f54e-4a8a-b1b3-ac518890e845.svg\";\n\nexport default function MiroirCardiaquePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3388\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Miroir Cardiaque - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3389\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3390\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3391\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"565:3392\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Miroir Cardiaque</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[349.88px] items-center relative shrink-0 w-[362px]\" data-node-id=\"565:3393\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex h-[349.88px] items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"565:3394\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3395\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"565:3396\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:3397\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"565:3398\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"565:3400\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"565:3401\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"565:3402\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{` Posez le doigt sur la caméra. `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Chaque battement de votre cœur `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`revient par une vibration `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">et un cercle qui pulse.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:3403\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3404\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3405\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3406\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3407\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3408\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3409\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3410\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3411\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3412\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3413\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"565:3414\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"565:3415\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:3416\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3417\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:3418\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[173px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:3419\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:3420\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3421\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:3422\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[139px] relative shrink-0 w-[285px]\" data-node-id=\"565:3424\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[139px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"565:3425\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Percevoir ses propres battements développe l'interoception, la conscience des signaux internes du corps, associée à une meilleure régulation émotionnelle. La caméra estime votre rythme cardiaque ; la restitution en suit la cadence, sans viser le battement exact.`}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3426\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3427\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3428\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3430\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3431\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3432\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3433\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:3435\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3436\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:3437\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3439\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:3440\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3441\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:3442\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3444\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3445\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3446\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:3447\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3449\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3450\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3451\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:3452\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3454\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3455\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3456\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3457\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3459\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3460\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3461":"const imgContainer = \"https://www.figma.com/api/mcp/asset/fa804c0d-ad6c-4a0f-a71d-5c6d4747bce8.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/8e2aa941-c1e0-455b-89b9-560699fa4206.svg\";\n\nexport default function MiroirCardiaqueSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3461\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Miroir Cardiaque - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3462\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3463\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3464\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3466\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3467\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3468\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3469\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:3471\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[27px] items-start relative shrink-0\" data-node-id=\"565:3472\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[53px] items-start relative shrink-0\" data-node-id=\"565:3473\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[27px] items-center relative shrink-0 w-full\" data-node-id=\"565:3474\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[27px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center tracking-[-0.1px] w-[355px]\" data-node-id=\"565:3475\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">{`Portez votre attention vers l'intérieur.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:3476\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:3477\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:3478\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:3479\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:3480\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:3481\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:3482\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"565:3483\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"565:3484\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3485\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:3486\">\n <p className=\"leading-[15px]\">Miroir Cardiaque</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:3487\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:3488\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:3489\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:3490\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:3491\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:3492\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3493\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3494\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:3495\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:3496\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:3497\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3498\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:3499\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:3500\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:3501\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3502\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3503":"const imgContainer = \"https://www.figma.com/api/mcp/asset/2b7e4a99-b658-4f15-aeee-b95da92a760a.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/d65d120d-7bdf-4911-98ab-a3d1af8f462d.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/8fd4bb6c-d809-4aa3-a17d-98eb480fc81e.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/294b8eab-9c08-4840-987a-91b089c47661.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/ae5bd86a-0463-4024-a427-c09d6bd04fdd.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/789f3af6-1716-496d-9510-d9343e0f31a6.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/81131dbc-943f-4fff-9e74-a3abce89d8d0.svg\";\n\nexport default function RecentrerRestitution() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3503\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Recentrer - Restitution\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3504\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:3505\" data-name=\"Validation / Visual Focus Area:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:3506\" data-name=\"Validation / Visual Focus Area\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center py-[12px] relative shrink-0\" data-node-id=\"565:3507\" data-name=\"Container\">\n <div className=\"content-stretch flex items-start relative shrink-0\" data-node-id=\"565:3508\" data-name=\"Container\">\n <div className=\"absolute bg-[rgba(121,211,255,0.2)] blur-[32px] inset-0 rounded-[9999px]\" data-node-id=\"565:3509\" data-name=\"Overlay+Blur\" />\n <div className=\"border-2 border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:3510\" data-name=\"Border\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"565:3511\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3513\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3514\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"565:3515\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Séance terminée</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[280px] px-[25.58px] relative shrink-0\" data-node-id=\"565:3516\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3517\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Prenez quelques secondes pour</p>\n <p className=\"leading-[20px]\">observer votre état.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:3518\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:3519\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:3520\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:3521\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3522\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"565:3523\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"565:3524\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3525\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3526\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3527\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3528\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:3529\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3531\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3532\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3533\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:3534\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3536\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3537\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3538\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:3539\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:3541\" data-name=\"Recommendation Card (Asymmetric / Specialized UI)\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3542\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[37.897px] relative shrink-0 w-[27.667px]\" data-node-id=\"565:3543\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3545\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3546\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"565:3547\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">CONSEIL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3548\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3549\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0\">Une respiration 4–6 peut prolonger la</p>\n <p className=\"leading-[19.5px] mb-0\">descente. Elle stimule le nerf vague pour</p>\n <p className=\"leading-[19.5px]\">ancrer durablement ce calme.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-t content-stretch flex flex-col from-[#0c141f] gap-[12px] items-start p-[20px] relative shrink-0 to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"565:3550\" data-name=\"Footer - Bottom Actions Layer\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3551\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[56px] left-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] top-0\" data-node-id=\"565:3552\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#00465e] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:3553\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TERMINER</p>\n </div>\n </div>\n <div className=\"border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[56px] items-center justify-center pb-[18.5px] pt-[17.5px] px-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3554\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:3555\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">MESURER MON ÉTAT</p>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3556\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3557\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3558\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3560\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3561\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3562\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3563\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3566":"const imgContainer = \"https://www.figma.com/api/mcp/asset/5b4288a5-1af3-4a77-805e-0d7fc07cacfe.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/4f552e7d-68e6-410b-afc7-d6ea779e9d71.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/20cfe7d3-664e-4ad2-9689-3a4062c0b458.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/2d3ff126-d888-4452-b8e3-ab5de54fd71c.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/c8d9b0e2-7e11-4d8c-80be-af5170e25836.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/a04f46c9-bca9-44e8-8b17-8977531b2158.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/4aa8bc71-86a1-4c87-a7c0-e2d581c72e61.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/99e39c73-56d4-4c98-bc08-569d3cc4e4f3.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/f4c757c8-0c42-4bed-ae87-977eeea1443e.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/9a11333d-e08c-4120-8988-f7d1d108ff38.svg\";\n\nexport default function VosOutilsReveilIntelligent() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3566\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - Réveil intelligent\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3567\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3568\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3569\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3571\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3572\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3573\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3574\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3576\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[6.75px] items-start relative shrink-0 w-full\" data-node-id=\"565:3577\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3578\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3579\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"565:3580\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Réveil intelligent</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:3581\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"565:3582\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3584\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"565:3585\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Un réveil qui commence par une montée douce de vibrations, plutôt qu'une sonnerie.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0\" data-node-id=\"565:3586\">\n <div className=\"backdrop-blur-[6px] bg-[#0b1323] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center overflow-clip p-[33px] relative rounded-[16px] shadow-[0px_4px_24px_-4px_rgba(0,0,0,0.5)] shrink-0 w-full\" data-node-id=\"565:3587\" data-name=\"Time Picker Section\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3588\" data-name=\"Heading 3\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3589\">\n <p className=\"leading-[16px]\">HEURE DU RÉVEIL</p>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-b from-[rgba(74,184,232,0.05)] inset-0 to-[rgba(74,184,232,0)]\" data-node-id=\"565:3590\" data-name=\"Gradient\" />\n <div className=\"bg-[rgba(255,255,255,0)] border border-[rgba(74,184,232,0.2)] border-solid relative rounded-[9999px] shadow-[0px_0px_30px_0px_rgba(74,184,232,0.1)] shrink-0 size-[192px]\" data-node-id=\"565:3591\" data-name=\"Overlay+Border+Shadow\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"absolute bg-[rgba(74,184,232,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"565:3592\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:3593\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3594\" data-name=\"Container\">\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"565:3595\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start py-[4px] relative shrink-0\" data-node-id=\"565:3597\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[48px] tracking-[-2.4px] whitespace-nowrap\" data-node-id=\"565:3598\">\n <p className=\"leading-[56px]\">07</p>\n </div>\n </div>\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"565:3599\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pb-[24px] relative shrink-0\" data-node-id=\"565:3601\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[48px] tracking-[-2.4px] whitespace-nowrap\" data-node-id=\"565:3602\">\n <p className=\"leading-[56px]\">:</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3603\" data-name=\"Container\">\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"565:3604\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start py-[4px] relative shrink-0\" data-node-id=\"565:3606\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[48px] tracking-[-2.4px] whitespace-nowrap\" data-node-id=\"565:3607\">\n <p className=\"leading-[56px]\">00</p>\n </div>\n </div>\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"565:3608\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3610\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[14px] whitespace-nowrap\" data-node-id=\"565:3611\">\n <p className=\"leading-[20px]\">Demain, dans 8h 30min</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:3612\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3613\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3614\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Vibration</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col h-[147px] items-start px-[21px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3615\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"h-[110px] relative shrink-0 w-full\" data-node-id=\"565:3616\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[16px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[16px] h-[47px] items-start relative shrink-0 w-full\" data-node-id=\"565:3617\" data-name=\"Intensity Slider\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3618\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3619\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"565:3620\">\n <p className=\"leading-[20px]\">Intensité</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3621\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:3622\">\n <p className=\"leading-[20px]\">80%</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:3623\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:3624\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[249px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:3625\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:3626\" data-name=\"Softness/Duration Slider\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3627\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3628\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"565:3629\">\n <p className=\"leading-[20px]\">{`Durée `}</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3630\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:3631\">\n <p className=\"leading-[20px]\">5 min</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:3632\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"565:3633\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"565:3634\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"565:3651\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3652\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:3653\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Option</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[90px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3654\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3655\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3656\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:3657\">\n <p className=\"leading-[24px]\">Escalade sonore</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3658\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3659\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Escalade sonore si pas de réponse</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:3660\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:3661\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:3662\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3663\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"565:3664\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Activer le réveil</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:3665\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3666\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:3667\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3669\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:3670\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3671\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:3672\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3674\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3675\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3676\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:3677\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3679\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3680\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3681\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:3682\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3684\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3685\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3686\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3687\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3689\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3690\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3691":"const imgInfo = \"https://www.figma.com/api/mcp/asset/fec01c6d-f1bc-40e9-9a78-db2980258e4d.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"565:3691\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:3692\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3693\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:3694\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[240px] relative shrink-0 w-[285px]\" data-node-id=\"565:3696\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[240px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-[285px] whitespace-pre-wrap\" data-node-id=\"565:3697\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Le réveil commence par une montée douce de vibrations, plutôt que par une sonnerie brutale, atténue la lourdeur cognitive du réveil. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] mb-0\">En offre iPhone, il se déclenche à</p>\n <p className=\"leading-[20px] mb-0\">{`l'heure fixée, avec un motif de vibration que vous réglez. `}</p>\n <p className=\"leading-[20px]\">En Premium, la montre peut en plus viser une phase de sommeil léger dans votre fenêtre, pour un réveil encore moins lourd.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3699":"const imgContainer = \"https://www.figma.com/api/mcp/asset/b1545602-f0b0-4630-9089-23306d8dd91e.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/2b480213-8a52-4fca-b97e-f9983eaade86.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/7889eb4a-d4b5-49b9-b97a-fbb643c9275d.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/9dcb249c-8b3a-4b6b-a39b-f7c5d6842466.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/da37468c-9f05-4df9-9bb4-cf60dd7b5180.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/3342c98e-944b-46b4-ae7d-08ec4003654b.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/99794a3f-a2f8-4038-8c70-124d6aa7c23a.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/2e287ede-ae68-46d0-822d-bb150277caea.svg\";\n\nexport default function ReferencesScientifiques() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3699\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Références scientifiques\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3700\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3701\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3702\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3704\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3705\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3706\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3707\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3709\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[6.75px] items-start relative shrink-0 w-full\" data-node-id=\"565:3710\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3711\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3712\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"565:3713\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Références scientifiques</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3716\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"565:3717\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Haptika, de la mesure passive à l'intervention tactile, réunit les principes de la psychophysiologie et des neurosciences du toucher par le biais des vibrations tactiles afin d’agir sur votre équilibre nerveux et réguler votre stress au quotidien.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3718\" data-name=\"Guided Protocols Section\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:3719\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3720\" data-name=\"Protocol 2\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:3721\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[6px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3722\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"565:3723\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"565:3724\">\n <p className=\"leading-[20px]\">Le système nerveux autonome</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3725\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:3726\">\n <p className=\"leading-[16px]\">Porges, S. W. (2011) — The Polyvagal Theory: Neurophysiological Foundations of Emotions.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:3727\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3729\" data-name=\"Protocol 2\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:3730\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[6px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3731\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"565:3732\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"565:3733\">\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`La mesure : Variabilité de la Fréquence `}</p>\n <p className=\"leading-[20px] whitespace-pre\">Cardiaque (VFC)</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3734\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:3735\">\n <p className=\"leading-[16px]\">{`Shaffer, F., & Ginsberg, J. P. (2017) — An Overview of Heart Rate Variability Metrics and Norms.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:3736\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3738\" data-name=\"Protocol 3\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:3739\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[6px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3740\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"565:3741\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"565:3742\">\n <p className=\"leading-[20px]\">Respirer : la voie respiratoire</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3743\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:3744\">\n <p className=\"leading-[16px] mb-0\">{`Lehrer, P. M., & Gevirtz, R. (2014) — Heart Rate Variability Biofeedback.`}</p>\n <p className=\"leading-[16px]\">Zaccaro, A., et al. (2018) — How Breath-Control Can Change Your Life.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:3745\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3747\" data-name=\"Protocol 4\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:3748\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3749\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"565:3750\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"565:3751\">\n <p className=\"leading-[24px]\">Ancrer : la voie haptique directe</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3752\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:3753\">\n <p className=\"leading-[16px]\">McGlone, F., et al. (2014) — Discriminative and Affective Touch: Sensing and Feeling.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:3754\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:3756\" data-name=\"Protocol 5\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"565:3757\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"565:3758\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[219px]\" data-node-id=\"565:3759\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"565:3760\">\n <p className=\"leading-[24px]\">Recentrer : la voie visuo-haptique</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:3761\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"565:3762\">\n <p className=\"leading-[16px] mb-0\">Lutz, A., et al. (2008) — Attention Regulation and Monitoring in Meditation.</p>\n <p className=\"leading-[16px]\">{`Smallwood, J., & Schooler, J. W. (2015) — The Science of Mind-Wandering.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"565:3763\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:3792\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3793\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:3794\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3796\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:3797\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3798\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:3799\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3801\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3802\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3803\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:3804\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3806\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3807\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3808\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:3809\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3811\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3812\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3813\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3814\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3816\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3817\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3818":"const imgAb6AXuDjX90EYJAd3K2WxIbuvTiezyTv2HqrcYLhDbnwaIlV4Cb4WE6Uo719Drl7MzuaUyuYwNzZlLkXlHlBh3K56Hz7UJnRxjcmPzd22EOzh2Rqktig7AuTkbXbUaZ1UUfuWbq6Wigeos77IZt40KmNscAoEcoaIlKem0A9KSmpXcCaV3Cb7Sc2OrMiNgdhzOptJyRh6XPvmLx9MiGSnFuUuObrsSkMitvmAk72RvPkokHzOr6NCQ = \"https://www.figma.com/api/mcp/asset/75181f6b-d7f3-4366-9f57-d3337c34d6c1.png\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/76338af3-5bf4-4b12-82e0-a1577515b815.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/d44d9b12-7a0e-472f-af95-35fe9f544ef4.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/f1fbaec0-980d-4791-81bf-a08873d4d4bf.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/a99a373c-27fe-4bf5-acb9-b249e6af8917.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/fa7b59b5-138c-4053-a399-ba1b28942ec2.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/860159b5-f1dd-4794-9558-7168a408c066.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/23c7dd17-4d05-4ffc-aa25-a3efdbc1fad8.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/59aba90e-fa5d-4086-bc63-43da2dd2b09a.svg\";\nconst imgBellRinging = \"https://www.figma.com/api/mcp/asset/9d253d67-d5c0-4226-bc54-aebcf64ed5dd.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/12bb12b1-d603-43fe-bf33-c4c6360d8d57.svg\";\nconst imgContainer8 = \"https://www.figma.com/api/mcp/asset/f45e0188-feb4-4d9d-ae2c-44268e4def29.svg\";\nconst imgContainer9 = \"https://www.figma.com/api/mcp/asset/319c1431-cf41-4c5b-b432-9439e6811a06.svg\";\nconst imgContainer10 = \"https://www.figma.com/api/mcp/asset/b3ad93ea-ef33-4eda-9a17-0c1cb0cec59a.svg\";\nconst imgContainer11 = \"https://www.figma.com/api/mcp/asset/2d460a14-614d-4d0b-a5f0-a53561f3bd0b.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/6e9b3365-c7ac-473c-a40a-05c652186aea.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/74f03e46-c9ce-4dbc-bb49-c686e1ab7769.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/4ae2aa53-0060-42da-9264-7b1d2afe2692.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/67fda240-79c0-4fde-ade7-4fc4511e19a2.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/749e7117-80e2-4c5c-b289-acf9cedbb73e.svg\";\n\nexport default function Profil() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3818\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Profil\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3819\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3820\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3821\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3823\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3824\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3825\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3826\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1184px] items-start max-w-[672px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3828\" data-name=\"Main\">\n <div className=\"h-[246px] relative shrink-0 w-full\" data-node-id=\"565:3829\" data-name=\"User Profile Top Section\">\n <div className=\"absolute content-stretch flex flex-col items-start left-[121.91px] pb-[4px] top-[136px]\" data-node-id=\"565:3830\" data-name=\"Heading 2:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3831\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] text-center whitespace-nowrap\" data-node-id=\"565:3832\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Alexandre</p>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex flex-col items-start left-[96.89px] pb-[16px] top-[168px]\" data-node-id=\"565:3833\" data-name=\"Margin\">\n <div className=\"bg-[rgba(74,184,232,0.2)] border border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:3834\" data-name=\"Overlay+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3835\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:3836\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">EXPLORATEUR HAPTIKA</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 absolute content-stretch flex flex-col items-center left-1/2 top-[206px]\" data-node-id=\"565:3837\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3838\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Système nerveux en équilibre favorable</p>\n <p className=\"leading-[20px]\">depuis 12 jours.</p>\n </div>\n </div>\n <div className=\"absolute content-stretch flex flex-col items-start left-[119px] pb-[24px] top-0\" data-node-id=\"565:3839\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3840\" data-name=\"Container\">\n <div className=\"border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex flex-col items-start justify-center p-[5px] relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.15)] shrink-0 size-[112px]\" data-node-id=\"565:3841\" data-name=\"Overlay+Border+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 pointer-events-none rounded-[9999px]\" />\n <div className=\"flex-[1_0_0] min-h-px relative rounded-[9999px] w-full\" data-node-id=\"565:3842\" data-name=\"AB6AXuDjX90_eY-JAd3k2wxIBUVTiezyTv2hqrcYLhDbnwa_IlV4cb4wE6uo719Drl7mzuaUyuYwNZZlLkXlHlBH3k-56HZ7uJNRxjcmPzd22eOzh2rqktig7AuTKBXbUa_Z1uUfuWbq6wigeos77iZt40KmNSCAoEcoaIlKem0A9kSmpXcCaV3cb7Sc2orMiNgdhzOPTJyRh6xPvmLX9MiGSnFuUuObrsSKMitvmAK72RVPkokHzOR6nC_Q\">\n <div className=\"absolute bg-clip-padding border-0 border-[transparent] border-solid inset-0 overflow-hidden pointer-events-none rounded-[9999px]\">\n <img alt=\"\" className=\"absolute h-[179.02%] left-0 max-w-none top-[-39.51%] w-full\" src={imgAb6AXuDjX90EYJAd3K2WxIbuvTiezyTv2HqrcYLhDbnwaIlV4Cb4WE6Uo719Drl7MzuaUyuYwNzZlLkXlHlBh3K56Hz7UJnRxjcmPzd22EOzh2Rqktig7AuTkbXbUaZ1UUfuWbq6Wigeos77IZt40KmNscAoEcoaIlKem0A9KSmpXcCaV3Cb7Sc2OrMiNgdhzOptJyRh6XPvmLx9MiGSnFuUuObrsSkMitvmAk72RvPkokHzOr6NCQ} />\n </div>\n </div>\n <div className=\"absolute inset-0 pointer-events-none rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(121,211,255,0.1)]\" />\n </div>\n <div className=\"absolute bg-[#79d3ff] bottom-[-4px] content-stretch flex items-center justify-center right-[-4px] rounded-[9999px] size-[24px]\" data-node-id=\"565:3843\" data-name=\"Background\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] bottom-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] size-[24px]\" data-node-id=\"565:3844\" data-name=\"Overlay+Shadow\" />\n <div className=\"h-[12.25px] relative shrink-0 w-[12.833px]\" data-node-id=\"565:3845\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-full\" data-node-id=\"565:3847\" data-name=\"Profile Sections\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:3848\" data-name=\"Section - Compte et Abonnement\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3849\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:3850\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">COMPTE ET ABONNEMENT</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3851\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3852\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:3853\" data-name=\"Container\">\n <div className=\"h-[15px] relative shrink-0 w-[19px]\" data-node-id=\"565:3854\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3856\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3857\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Gérer l'abonnement`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"565:3858\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3859\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[12px] text-center whitespace-nowrap\" data-node-id=\"565:3860\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Haptika pro</p>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3861\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"565:3863\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3864\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[14.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3865\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3867\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3868\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Informations personnelles</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3869\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"565:3871\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3872\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[18.942px] relative shrink-0 w-[15px]\" data-node-id=\"565:3873\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3875\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3876\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Données de santé & Confidentialité`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3877\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:3879\" data-name=\"Section - Dispositifs\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3880\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:3881\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">DISPOSITIFS</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3882\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3883\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:3884\" data-name=\"Container\">\n <div className=\"h-[16px] relative shrink-0 w-[20px]\" data-node-id=\"565:3885\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3887\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"565:3888\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Équipement</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"565:3889\" data-name=\"Container\">\n <div className=\"bg-[#3fdfc9] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(63,223,201,0.5)] shrink-0 size-[6px]\" data-node-id=\"565:3890\" data-name=\"Background+Shadow\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3891\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#3fdfc9] text-[12px] whitespace-nowrap\" data-node-id=\"565:3892\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Iphone + Apple Watch</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"565:3907\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:3908\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3909\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"580:117\" data-name=\"BellRinging\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgBellRinging} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3911\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3912\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Rappels</p>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3913\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"565:3893\" data-name=\"HorizontalBorder\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3894\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"565:3895\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3897\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"565:3898\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apple Santé</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3899\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"bg-[#3fdfc9] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(63,223,201,0.5)] shrink-0 size-[6px]\" data-node-id=\"565:3900\" data-name=\"Background+Shadow\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3901\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#3fdfc9] text-[12px] whitespace-nowrap\" data-node-id=\"565:3902\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Connecté</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:3903\" data-name=\"Section - Méthodologie\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3904\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:3905\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">{`MÉTHODOLOGIE & APPRENTISSAGE`}</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3906\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"565:3915\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3916\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[16.269px] relative shrink-0 w-[19.923px]\" data-node-id=\"565:3917\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer8} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3919\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3920\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Guide des exercices</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3921\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"565:3923\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3924\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[18.519px] relative shrink-0 w-[13.115px]\" data-node-id=\"565:3925\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer9} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3927\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3928\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Références scientifiques</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3929\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"565:3931\" data-name=\"Section - Support\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"565:3932\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:3933\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">SUPPORT</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3934\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:3935\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"565:3936\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:3937\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer10} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3939\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3940\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Aide & Support`}</p>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3941\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"565:3943\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3944\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:3945\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer11} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:3947\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3948\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">À propos</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"565:3949\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-center relative shrink-0 w-full\" data-node-id=\"565:3951\" data-name=\"Actions Section\">\n <div className=\"content-stretch flex flex-col items-center justify-center relative shrink-0\" data-node-id=\"565:3952\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#ffb4ab] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:3953\">\n <p className=\"leading-[20px]\">Se déconnecter</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3954\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[12px] text-[rgba(190,200,207,0.3)] whitespace-nowrap\" data-node-id=\"565:3955\">\n <p className=\"leading-[16px]\">Haptika v1.4.2</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:3956\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3957\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:3958\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3960\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:3961\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3962\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:3963\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3965\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3966\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3967\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:3968\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3970\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3971\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3972\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:3973\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3975\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3976\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3977\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:3978\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:3980\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:3981\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:3982":"const imgContainer = \"https://www.figma.com/api/mcp/asset/78a1dd77-807a-4df8-b2b3-495fb6456af1.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/60507315-3581-43e8-9f02-74c3af7b62e7.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/94120e2e-5d2d-4004-9dad-32bad0704013.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/efabde02-b52d-4c54-8384-7c1ad18a10b9.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/f54c07fc-ae88-4245-ac3d-49aab4f8e5ed.svg\";\nconst imgSvg = \"https://www.figma.com/api/mcp/asset/d04eebe4-d5cb-4bc1-a6d7-6b4314abbd3e.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/bbbfae5e-66ec-4fa0-b780-3ba1185ad356.svg\";\nconst imgSvg1 = \"https://www.figma.com/api/mcp/asset/38a6d4b6-0276-470e-9cf4-e4767fe4b6fb.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/ba7d6015-ce87-406e-acf9-01838c544c6e.svg\";\nconst imgSvg2 = \"https://www.figma.com/api/mcp/asset/d9799bb0-a8bd-472c-bd76-8ae3f92c15e7.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/471855cc-8a95-4ea8-93e1-47c98889351f.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/7b79662c-0d79-4cb2-975f-dfe6eb2b0e4f.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/861bd510-f84c-481d-9b7d-3d3fa90f2c64.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/4131bbf9-8d1d-4c59-931f-3522fb71c183.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/a17dc81c-edc0-4bca-aac8-26cb275b2911.svg\";\n\nexport default function EvolutionV1() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:3982\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Évolution - V1\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:3983\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:3984\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:3985\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:3987\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:3988\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:3989\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:3990\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1041px] items-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:3992\" data-name=\"Main Content\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"565:3993\" data-name=\"Section - Page Header\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full\" data-node-id=\"565:3994\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[170px] h-[28px] items-start relative shrink-0 w-full\" data-node-id=\"565:3995\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"565:3996\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Mon évolution</p>\n </div>\n <div className=\"content-stretch flex h-[28px] items-center justify-center relative rounded-[9999px] shrink-0 w-[30px]\" data-node-id=\"579:80\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"579:81\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start opacity-70 relative shrink-0 w-full\" data-node-id=\"565:3997\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] w-full\" data-node-id=\"565:3998\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Observez votre équilibre nerveux dans le temps.</p>\n </div>\n </div>\n </div>\n <div className=\"bg-[rgba(26,48,69,0.3)] border border-[#1a3045] border-solid content-stretch flex items-center justify-between overflow-auto p-[5px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:3999\" data-name=\"Segmented Control\">\n <div className=\"opacity-60 relative rounded-[8px] shrink-0\" data-node-id=\"565:4000\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"565:4001\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">7 jours</p>\n </div>\n </div>\n </div>\n <div className=\"bg-[#1a3045] drop-shadow-[0px_2px_2px_rgba(0,0,0,0.2)] relative rounded-[8px] shrink-0\" data-node-id=\"565:4002\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center whitespace-nowrap\" data-node-id=\"565:4003\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">30 jours</p>\n </div>\n </div>\n </div>\n <div className=\"opacity-60 relative rounded-[8px] shrink-0\" data-node-id=\"565:4004\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"565:4005\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">3 mois</p>\n </div>\n </div>\n </div>\n <div className=\"opacity-60 relative rounded-[8px] shrink-0\" data-node-id=\"565:4006\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"565:4007\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Personnalisé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"615:11\" data-name=\"Metric Cards Stack\">\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"615:36\" data-name=\"Article - CARD 2: SOUPLESSE\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"615:37\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start max-w-[221.1999969482422px] relative shrink-0\" data-node-id=\"615:38\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"615:39\" data-name=\"Container\">\n <div className=\"bg-[#ea8308] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"615:40\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"615:41\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#ea8308] text-[17px] tracking-[0.85px] uppercase whitespace-nowrap\" data-node-id=\"615:42\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">SOUPLESSE</p>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] content-stretch flex flex-col gap-[3px] items-start leading-[0] relative shrink-0 w-full whitespace-nowrap\" data-node-id=\"615:43\" data-name=\"Container\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#ea8308] text-[12px]\" data-node-id=\"615:44\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Votre VFC, suivie dans le temps</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal justify-center relative shrink-0 text-[10px] text-[rgba(190,200,207,0.8)]\" data-node-id=\"615:45\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">Capacité de votre système nerveux à</p>\n <p className=\"leading-[16px]\">{`s'adapter aux variations du quotidien.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0\" data-node-id=\"615:46\" data-name=\"Container\">\n <div className=\"[word-break:break-word] font-['SF_Pro:Thin'] font-[110.72500610351562] h-[64px] leading-[0] relative shrink-0 text-[#dce3f3] text-right tracking-[-1.28px] w-full whitespace-nowrap\" data-node-id=\"615:47\" data-name=\"Paragraph\">\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center right-[24.32px] text-[64px] top-[31.5px]\" data-node-id=\"615:48\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[64px]\">66</p>\n </div>\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center opacity-50 right-[0.62px] text-[24px] top-[46.5px]\" data-node-id=\"615:49\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[3.99px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"615:50\" data-name=\"Container\">\n <div className=\"h-[1.167px] relative shrink-0 w-[9.333px]\" data-node-id=\"615:51\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[10px] text-[rgba(190,200,207,0.6)] text-right whitespace-nowrap\" data-node-id=\"615:53\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Stable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[96px] relative shrink-0 w-full\" data-node-id=\"615:54\" data-name=\"Mask Group\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute content-stretch flex flex-col h-[96px] items-start justify-center left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-size-[100%_96px] right-0 top-0\" data-node-id=\"615:56\" style={{ maskImage: `url(\"${imgContainer3}\")` }} data-name=\"Container\">\n <div className=\"flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"615:57\" data-name=\"SVG\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSvg} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"615:60\" data-name=\"Article - CARD 3: TENSION\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"615:61\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start max-w-[221.1999969482422px] relative shrink-0\" data-node-id=\"615:62\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"615:63\" data-name=\"Container\">\n <div className=\"bg-[#ef4444] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"615:64\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"615:65\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#ef4444] text-[17px] tracking-[0.85px] uppercase whitespace-nowrap\" data-node-id=\"615:66\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TENSION</p>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] content-stretch flex flex-col gap-[3px] items-start leading-[0] relative shrink-0 w-full whitespace-nowrap\" data-node-id=\"615:67\" data-name=\"Container\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#ef4444] text-[12px]\" data-node-id=\"615:68\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Votre niveau de stress, sur la durée</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal justify-center relative shrink-0 text-[10px] text-[rgba(190,200,207,0.8)]\" data-node-id=\"615:69\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">Niveau de sollicitation et de charge</p>\n <p className=\"leading-[16px]\">cumulée de votre système nerveux.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0\" data-node-id=\"615:70\" data-name=\"Container\">\n <div className=\"[word-break:break-word] font-['SF_Pro:Thin'] font-[110.72500610351562] h-[64px] leading-[0] relative shrink-0 text-[#dce3f3] text-right tracking-[-1.28px] w-full whitespace-nowrap\" data-node-id=\"615:71\" data-name=\"Paragraph\">\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center right-[22.67px] text-[64px] top-[31.5px]\" data-node-id=\"615:72\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[64px]\">28</p>\n </div>\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center opacity-50 right-[-0.72px] text-[24px] top-[46.5px]\" data-node-id=\"615:73\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"615:74\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"615:75\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#2dd4bf] text-[10px] text-right w-[111px]\" data-node-id=\"615:77\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">En baisse — Favorable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[96px] relative shrink-0 w-full\" data-node-id=\"615:78\" data-name=\"Mask Group\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute content-stretch flex flex-col h-[96px] items-start justify-center left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-size-[100%_96px] right-0 top-0\" data-node-id=\"615:80\" style={{ maskImage: `url(\"${imgContainer3}\")` }} data-name=\"Container\">\n <div className=\"flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"615:81\" data-name=\"SVG\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSvg1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#0c1b27] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"615:84\" data-name=\"Article - CARD 4: ÉQUILIBRE PHYSIOLOGIQUE\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"615:85\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-[237px]\" data-node-id=\"615:86\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"615:87\" data-name=\"Container\">\n <div className=\"bg-[#84cc16] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"615:88\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start pr-[55.39px] relative shrink-0\" data-node-id=\"615:89\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#84cc16] text-[17px] tracking-[0.85px] uppercase whitespace-nowrap\" data-node-id=\"615:90\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">ÉQUILIBRE</p>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] content-stretch flex flex-col gap-[3px] items-start leading-[0] relative shrink-0 w-full\" data-node-id=\"615:91\" data-name=\"Container\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#84cc16] text-[12px] w-full\" data-node-id=\"615:92\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Synthèse de vos 2 tendances</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal justify-center relative shrink-0 text-[10px] text-[rgba(190,200,207,0.8)] w-full\" data-node-id=\"615:93\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Votre état nerveux global.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0\" data-node-id=\"615:94\" data-name=\"Container\">\n <div className=\"[word-break:break-word] font-['SF_Pro:Thin'] font-[110.72500610351562] h-[64px] leading-[0] relative shrink-0 text-[#dce3f3] text-right tracking-[-1.28px] w-full whitespace-nowrap\" data-node-id=\"615:95\" data-name=\"Paragraph\">\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center right-[22.67px] text-[64px] top-[31.5px]\" data-node-id=\"615:96\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[64px]\">75</p>\n </div>\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center opacity-50 right-[-0.47px] text-[24px] top-[46.5px]\" data-node-id=\"615:97\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"615:98\" data-name=\"Container\">\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"615:99\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#84cc16] text-[10px] text-right whitespace-nowrap\" data-node-id=\"615:101\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">En hausse</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[96px] relative shrink-0 w-full\" data-node-id=\"615:102\" data-name=\"Mask Group\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute content-stretch flex flex-col h-[96px] items-start justify-center left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-size-[100%_96px] right-0 top-0\" data-node-id=\"615:104\" style={{ maskImage: `url(\"${imgContainer3}\")` }} data-name=\"Container\">\n <div className=\"flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"615:105\" data-name=\"SVG\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSvg2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[53px] items-start relative shrink-0 w-full\" data-node-id=\"565:4101\" data-name=\"Footer Info\">\n <div className=\"h-[53px] relative shrink-0 w-full\" data-node-id=\"565:4102\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center px-[16px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[53px] justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.5)] text-center w-[313px]\" data-node-id=\"565:4103\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0\">Ces indicateurs sont calculés à partir de vos données</p>\n <p className=\"leading-[19.5px] mb-0\">physiologiques : HRV, fréquence cardiaque, respiration,</p>\n <p className=\"leading-[19.5px]\">sommeil et activité.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:4104\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4105\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:4106\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4108\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:4109\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4110\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:4111\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4113\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4114\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4115\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:4116\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4118\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4119\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4120\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:4121\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4123\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4124\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4125\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:4126\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4128\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4129\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:4131":"const imgPulse = \"https://www.figma.com/api/mcp/asset/03004163-37b4-4a34-acdb-5de3776077b9.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/e1874a6c-a1ad-441d-9a66-b0043b683911.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/bc5fd208-30ab-4fe9-acf0-c4f6db9f4e5a.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/22851a6f-223e-419f-b2b2-8ac084831fe6.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/4e09e143-5109-4ff1-8fad-8b50e9f1c3f8.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/83efa4ae-a405-4d74-b26c-70943d2d7782.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/01c5f109-7625-46b9-8898-af8592903238.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/6d6fdfae-503c-4b66-a210-d1816fd34ecd.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/42a4dd72-5cbe-46dd-b2b3-4e3751880716.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/0892009b-b0ab-4bab-88b4-9b759883082c.svg\";\n\nexport default function SosStressEntree() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:4131\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"SOS Stress - Entrée\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[920px] items-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:4132\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center px-[13px] relative shrink-0 w-full\" data-node-id=\"565:4133\" data-name=\"Hero Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 size-[96px]\" data-node-id=\"565:4134\" data-name=\"Margin\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 size-[96px]\" data-node-id=\"565:4135\" data-name=\"Container\">\n <div className=\"absolute bg-[#c62828] inset-0 rounded-[9999px]\" data-node-id=\"565:4136\" data-name=\"Overlay\" />\n <div className=\"overflow-clip relative shrink-0 size-[60px]\" data-node-id=\"565:4137\" data-name=\"Circle Big Circle.svg\">\n <div className=\"absolute left-[5px] size-[50px] top-[5px]\" data-node-id=\"565:4138\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:4140\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:4141\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">Retrouver son calme</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4142\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:4143\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] h-[20px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center w-[233px]\" data-node-id=\"565:4144\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">SOS Stress</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pl-[7.22px] pr-[7.23px] relative shrink-0 w-full\" data-node-id=\"565:4145\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center w-[336px]\" data-node-id=\"565:4146\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Lors d'un pic aigu de stress, les vibrations captent votre attention puis leur rythme ralentit pour vous accompagner jusqu'à l'apaisement.`}</p>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[216px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"565:4147\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"565:4148\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4149\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"565:4150\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[80px] relative shrink-0 w-[285px]\" data-node-id=\"565:4152\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[180px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"565:4153\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Le pic de stress mobilise le système sympathique avant la pensée consciente. Le corps s’active en premier, la volonté n’a pas de prise sur lui ; d’où la difficulté à se calmer soi-même dans ces moments-là. Les vibrations, elles, se ressentent tout de suite dans la main : un repère physique qui agit rapidement, indépendamment de la volonté</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border-[rgba(121,211,255,0.5)] border-b border-l-4 border-r border-solid border-t content-stretch flex items-center justify-between pl-[28px] pr-[25px] py-[25px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4154\" data-name=\"Section - Info Card\">\n <div className=\"relative shrink-0 w-[141px]\" data-node-id=\"565:4155\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start leading-[0] pr-[30.28px] relative size-full\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#c1e8ff] text-[11px] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:4156\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">DURÉE</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Medium'] font-[510] justify-center relative shrink-0 text-[#dce3f3] text-[22px] w-[141px]\" data-node-id=\"565:4157\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">90 secondes</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4158\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-end pl-[60.34px] relative shrink-0\" data-node-id=\"565:4159\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] text-right whitespace-nowrap\" data-node-id=\"565:4160\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">{`Vous n'avez rien à`}</p>\n <p className=\"leading-[16px]\">configurer.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:4161\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"565:4162\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4163\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:4164\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"565:4165\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"565:4166\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"565:4167\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:4168\" data-name=\"Actions\">\n <div className=\"bg-[#c62828] content-stretch flex gap-[8px] h-[64px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4169\" data-name=\"Button\">\n <div className=\"h-[12px] relative shrink-0 w-[8px]\" data-node-id=\"565:4170\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[12px] text-center text-white uppercase whitespace-nowrap\" data-node-id=\"565:4172\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:4173\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4174\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:4175\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4177\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:4178\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:4179\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:4180\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"565:4182\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4183\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"565:4184\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4186\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"565:4187\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4188\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"565:4189\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4191\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4192\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4193\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"565:4194\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4196\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4197\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4198\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"565:4199\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4201\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4202\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4203\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"565:4204\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4206\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4207\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:4208":"const imgContainer = \"https://www.figma.com/api/mcp/asset/d03fede2-5b35-4885-b5a9-58e1e0a665c5.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/cdb03958-46c7-4a91-92db-8a0d7168e370.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/ff8d8580-6764-42b1-9319-f2c3fa40b40e.svg\";\n\nexport default function SosStressSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:4208\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"SOS Stress - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:4209\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4210\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:4211\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4213\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:4214\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:4215\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:4216\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"565:4218\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[56px] items-start relative shrink-0\" data-node-id=\"565:4219\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"565:4220\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[56px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"565:4221\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"565:4222\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Tenez votre iPhone en main `}</p>\n <p className=\"leading-[28px] whitespace-pre\">et laissez les vibrations vous apaiser.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"565:4223\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"565:4224\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:4225\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"565:4226\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"565:4227\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"565:4228\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"565:4229\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"565:4230\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"565:4231\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex gap-[6px] items-center relative shrink-0\" data-node-id=\"565:4232\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"565:4233\">\n <p className=\"leading-[15px]\">SOS Stress</p>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[20px]\" data-node-id=\"565:4234\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"565:4235\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"565:4237\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:4238\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"565:4239\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"565:4240\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"565:4241\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"565:4242\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:4243\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4244\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"565:4245\">\n <p className=\"leading-[20px]\">01:29</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"565:4246\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"565:4247\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4248\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"565:4249\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"565:4250\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"565:4251\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"565:4252\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","565:4253":"const imgContainer = \"https://www.figma.com/api/mcp/asset/0667df78-3663-4d32-97b8-0ab981ab4e96.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/7120afd3-17c7-4746-adaa-00aa466fa2f8.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/49daea26-e46f-40c1-94ba-e8c936e70cc4.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/4c82aa3e-b1af-404c-b3d1-0952beff0ad3.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/6829f9cf-8989-4ace-978d-1b773f793898.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/4b95e561-c3c8-4f82-a844-78ecef10e276.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/fb0ea78d-8a84-4f72-9832-167626418c22.svg\";\n\nexport default function SosStressFin() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"565:4253\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"SOS Stress - Fin\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"565:4254\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"565:4255\" data-name=\"Validation / Visual Focus Area:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:4256\" data-name=\"Validation / Visual Focus Area\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center py-[12px] relative shrink-0\" data-node-id=\"565:4257\" data-name=\"Container\">\n <div className=\"content-stretch flex items-start relative shrink-0\" data-node-id=\"565:4258\" data-name=\"Container\">\n <div className=\"absolute bg-[rgba(121,211,255,0.2)] blur-[32px] inset-0 rounded-[9999px]\" data-node-id=\"565:4259\" data-name=\"Overlay+Blur\" />\n <div className=\"border-2 border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"565:4260\" data-name=\"Border\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"565:4261\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"565:4263\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"565:4264\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"565:4265\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Séance terminée</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[280px] px-[25.58px] relative shrink-0\" data-node-id=\"565:4266\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:4267\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Prenez quelques secondes pour</p>\n <p className=\"leading-[20px]\">observer votre état.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:4268\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"565:4269\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"565:4270\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"565:4271\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4272\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"565:4273\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"565:4274\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"565:4275\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4276\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4277\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:4278\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:4279\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4281\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4282\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:4283\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:4284\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4286\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4287\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"565:4288\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"565:4289\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"565:4291\" data-name=\"Recommendation Card (Asymmetric / Specialized UI)\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4292\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[37.897px] relative shrink-0 w-[27.667px]\" data-node-id=\"565:4293\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4295\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:4296\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"565:4297\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">CONSEIL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"565:4298\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"565:4299\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0 whitespace-pre\">{`Une respiration 4·4·4·4 - Équilibre régularisent la `}</p>\n <p className=\"leading-[19.5px] mb-0 whitespace-pre\">{`respiration et stabilisent le taux de CO2. `}</p>\n <p className=\"leading-[19.5px] mb-0 whitespace-pre\">{`Ce qui permet de parvenir à un état d'équilibre `}</p>\n <p className=\"leading-[19.5px] whitespace-pre\">de votre système nerveux autonome.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-t content-stretch flex flex-col from-[#0c141f] gap-[12px] items-start p-[20px] relative shrink-0 to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"565:4300\" data-name=\"Footer - Bottom Actions Layer\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4301\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[56px] left-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] top-0\" data-node-id=\"565:4302\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#00465e] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:4303\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TERMINER</p>\n </div>\n </div>\n <div className=\"border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[56px] items-center justify-center pb-[18.5px] pt-[17.5px] px-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"565:4304\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"565:4305\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">MESURER MON ÉTAT</p>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"565:4306\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"565:4307\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"565:4308\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"565:4310\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"565:4311\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"565:4312\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"565:4313\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","579:84":"const imgInfo = \"https://www.figma.com/api/mcp/asset/8f975828-8aa3-4949-9745-3cf491a878ed.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"579:84\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"579:85\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"579:86\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"579:87\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[124px] relative shrink-0 w-[285px]\" data-node-id=\"579:89\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[124px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-[285px] whitespace-pre-wrap\" data-node-id=\"579:90\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Un état isolé dépend de mille facteurs passagers ; c'est la tendance, sur des jours ou des semaines, qui révèle une évolution réelle de votre équilibre. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Cette page sert à lire ce mouvement `}</p>\n <p className=\"leading-[20px]\">{`de fond. `}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","617:952":"const imgImage3 = \"https://www.figma.com/api/mcp/asset/2d3304cc-797c-48d8-8314-9ef7cbd062b1.png\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/6a0404e9-5c8a-4017-86c9-c53ef253c841.svg\";\nconst imgHeart = \"https://www.figma.com/api/mcp/asset/e9079ece-dfd1-4814-b4c7-4008fc764868.svg\";\nconst imgPulse = \"https://www.figma.com/api/mcp/asset/ee48c745-eb1e-4c87-b55a-eb3fc165d014.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/5a2835ed-fd48-4b2a-86ee-23d304d12543.svg\";\nconst imgSentimentStressedOutlineSvg = \"https://www.figma.com/api/mcp/asset/43a69456-1d85-4487-a55b-85acc5bf9a17.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/969eecbf-18be-4662-bbfa-a5c48418c95f.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/fa8bd37c-bf8c-4389-b2a3-cef2a38f395d.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/43fa3e13-9322-4c6a-93e6-6d20070bd458.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/b82f2116-de71-4424-896e-41a3b9f87fc1.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/bcc7f8d0-7f8b-4989-83db-a8d80dfd8b29.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/1335f367-5d6a-4b31-885a-b1db3397c0d9.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/d65f4979-c68c-4756-a15d-3a35b0429697.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/51b6b84d-fc35-493c-8960-8ec0106f45c8.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/8ea4e861-6e43-4a05-ae8e-9c4ff56ae8ff.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/41b0b846-2090-4b12-901c-792644f73360.svg\";\n\nexport default function AccueilMonEtatActuel() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"617:952\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Accueil - Mon état actuel\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1454px] items-start pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"617:953\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[10px] items-center relative shrink-0 w-full\" data-node-id=\"617:954\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:955\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"617:956\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"617:957\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">Mon état actuel</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-end justify-center relative shrink-0 w-[206px]\" data-node-id=\"617:958\" data-name=\"Heading 2:margin\">\n <div className=\"content-stretch flex flex-col h-[24px] items-start relative shrink-0 w-[175px]\" data-node-id=\"617:959\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] h-[24px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] text-center w-[182px]\" data-node-id=\"617:960\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">{`Bonjour [Prénom] `}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[2px] items-center pl-[18.88px] pr-[18.87px] relative shrink-0 w-[312px]\" data-node-id=\"617:961\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"617:962\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{` Vue d'ensemble de votre SNA actuel`}</p>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-center justify-center relative shrink-0 w-[178.31px]\" data-node-id=\"617:963\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"617:964\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] text-center whitespace-nowrap\" data-node-id=\"617:965\">\n <p className=\"leading-[20px]\">Mesuré à 08:42</p>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[17px]\" data-node-id=\"617:966\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] h-[1054px] items-start relative shrink-0 w-full\" data-node-id=\"617:967\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[594px] items-center relative shrink-0 w-full\" data-node-id=\"617:968\" data-name=\"Visual Core Section\">\n <div className=\"content-stretch flex flex-col gap-[16px] h-[90px] items-center justify-center max-w-[320px] relative shrink-0 w-[320px]\" data-node-id=\"617:969\" data-name=\"SNA Axis Slider\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col gap-[20px] items-center min-h-px relative w-full\" data-node-id=\"617:970\">\n <div className=\"content-stretch flex h-[11px] items-start justify-between opacity-60 relative shrink-0 w-full\" data-node-id=\"617:971\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-full items-start relative shrink-0\" data-node-id=\"617:972\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#ef4444] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"617:973\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">SYMPATHIQUE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-full items-start relative shrink-0\" data-node-id=\"617:974\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#4ab8e8] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"617:975\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">PARASYMPATHIQUE</p>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-r flex-[1_0_0] from-[#ef4444] min-h-px relative rounded-[9999px] to-[#4ab8e8] via-1/2 via-white w-[319px]\" data-node-id=\"617:976\" data-name=\"Background\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(190,200,207,0.4)] h-[16px] left-[calc(50%+0.5px)] top-[calc(50%+0.5px)] w-px\" data-node-id=\"617:977\" data-name=\"Vertical Divider\" />\n <div className=\"-translate-y-1/2 absolute bg-[#0c141f] border-3 border-[#dce3f3] border-solid h-[21px] left-[80.09%] right-[13.32%] rounded-[9999px] top-[calc(50%-1px)]\" data-node-id=\"617:978\" data-name=\"Cursor at +68 (Calculated position: 50% center + 18% right shift)\">\n <div className=\"-translate-y-1/2 absolute bg-[rgba(255,255,255,0)] h-[24px] left-[-3px] right-[-3px] rounded-[9999px] shadow-[0px_20px_25px_-5px_rgba(0,0,0,0.1),0px_8px_10px_-6px_rgba(0,0,0,0.1)] top-[calc(50%+0.5px)]\" data-node-id=\"617:979\" data-name=\"Cursor at +68 (Calculated position: 50% center + 18% right shift):shadow\" />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[320px]\" data-node-id=\"617:980\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular_Italic'] font-normal italic justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] text-center w-full\" data-node-id=\"617:981\" style={{ fontVariationSettings: '\"YAXS\" 400' }}>\n <p className=\"leading-[16px] mb-0\">Votre système nerveux montre une excellente capacité</p>\n <p className=\"leading-[16px]\">de régulation.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] h-[108px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"617:982\" data-name=\"Gauge\">\n <div className=\"content-stretch flex flex-col h-[54px] items-center justify-center relative rounded-[90px] shrink-0 w-[180px]\" data-node-id=\"617:983\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-[53px] items-center justify-center relative shrink-0 w-[180px]\" data-node-id=\"617:984\" data-name=\"Container\">\n <div className=\"[word-break:break-word] content-stretch flex font-['Inter:Bold'] font-bold h-[52px] items-end leading-[0] not-italic relative shrink-0 text-[#73c8f2] text-center text-shadow-[0px_0px_10px_rgba(74,184,232,0.5)] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"617:985\" data-name=\"Paragraph\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[48px]\" data-node-id=\"617:986\">\n <p className=\"leading-[56px]\">68</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[24px]\" data-node-id=\"617:987\">\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"617:988\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:989\" data-name=\"Margin\">\n <div className=\"bg-[rgba(121,211,255,0.1)] border border-[rgba(121,211,255,0.3)] border-solid content-stretch flex flex-col h-[28px] items-center justify-center px-[13px] py-px relative rounded-[9999px] shrink-0\" data-node-id=\"617:990\" data-name=\"Overlay+Border\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] whitespace-nowrap\" data-node-id=\"617:991\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">ÉQUILIBRE FAVORABLE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[407px] items-start relative shrink-0 w-[310px]\" data-node-id=\"617:992\" data-name=\"Central Silhouette:margin\">\n <div className=\"content-stretch flex flex-col h-[407px] items-start justify-center relative shrink-0 w-[309px]\" data-node-id=\"617:993\" data-name=\"Central Silhouette\">\n <div className=\"drop-shadow-[0px_2px_3.5px_#052d68] h-[353px] overflow-clip relative shrink-0 w-full\" data-node-id=\"617:994\" data-name=\"Silhouette\">\n <div className=\"absolute h-[635px] left-[45px] top-[-56.5px] w-[234px]\" data-node-id=\"617:995\" data-name=\"image 3\">\n <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <img alt=\"\" className=\"absolute h-full left-[-131.91%] max-w-none top-0 w-[248.99%]\" src={imgImage3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[13px] h-[247px] items-center relative shrink-0 w-[362px]\" data-node-id=\"617:996\" data-name=\"Section - Metrics Grid\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"617:997\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col h-[118px] items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:998\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:999\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:1000\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"617:1001\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[17px] relative shrink-0 w-[19px]\" data-node-id=\"617:1002\" data-name=\"Heart\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgHeart} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:1004\">\n <p className=\"leading-[16px]\">72bpm</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1005\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[2px] items-start relative shrink-0 w-full\" data-node-id=\"617:1006\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1007\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:1008\">\n <p className=\"leading-[20px]\">Pulsation</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1009\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] w-full\" data-node-id=\"617:1010\">\n <p className=\"leading-[20px]\">Au repos</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:1011\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1012\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:1013\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"617:1014\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[21px] relative shrink-0 w-[22px]\" data-node-id=\"617:1015\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:1017\">\n <p className=\"leading-[16px]\">54 ms</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1018\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full\" data-node-id=\"617:1019\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1020\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:1021\">\n <p className=\"leading-[20px]\">VFC Moyenne</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center relative shrink-0 w-full\" data-node-id=\"617:1022\" data-name=\"Container\">\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"617:1023\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1025\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"617:1026\">\n <p className=\"leading-[20px]\">+5%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"617:1027\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:1028\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1029\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:1030\" data-name=\"Background+Border\">\n <div className=\"h-[23px] relative shrink-0 w-[22px]\" data-node-id=\"663:2\" data-name=\"Sentiment Stressed Outline.svg\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSentimentStressedOutlineSvg} />\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#ffa369] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:1034\">\n <p className=\"leading-[16px]\">Modéré</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1035\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[2px] items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1036\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1037\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:1038\">\n <p className=\"leading-[20px]\">Stress</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1039\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] w-full\" data-node-id=\"617:1040\">\n <p className=\"leading-[20px]\">Acceptable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col h-[116px] items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:1041\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1042\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:1043\" data-name=\"Background+Border\">\n <div className=\"h-[15px] relative shrink-0 w-[12px]\" data-node-id=\"617:1044\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:1046\">\n <p className=\"leading-[16px]\">62%</p>\n </div>\n </div>\n </div>\n <div className=\"h-[51px] relative shrink-0 w-full\" data-node-id=\"617:1047\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[43px] items-start relative shrink-0 w-full\" data-node-id=\"617:1048\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1049\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:1050\">\n <p className=\"leading-[20px]\">Énergie Dispo.</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"617:1051\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"617:1052\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"617:1053\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"617:1054\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px opacity-50 relative rounded-[9999px]\" data-node-id=\"617:1055\" data-name=\"Background\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-[362px]\" data-node-id=\"617:1056\" data-name=\"Section - Recommendation Card\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1057\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[22px]\" data-node-id=\"617:1058\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1060\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[11px] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"617:1061\">\n <p className=\"leading-[14px]\">RECOMMANDÉ MAINTENANT</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:1062\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1063\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1064\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] whitespace-nowrap\" data-node-id=\"617:1065\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Respiration 4·4·4·4 - Équilibre</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:1066\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] w-full\" data-node-id=\"617:1067\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">{`Pour favoriser un état d'équilibre de votre système nerveux autonome`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-end relative shrink-0\" data-node-id=\"617:1068\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1069\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"617:1070\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">5 min</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#2dd4bf] h-[31px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"617:1071\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[12px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#001e2b] text-[10px] text-center whitespace-nowrap\" data-node-id=\"617:1072\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Commencer</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] h-[120px] items-start relative shrink-0 w-full\" data-node-id=\"617:1073\" data-name=\"Section - Main CTA:margin\">\n <div className=\"bg-[#79d3ff] content-stretch flex gap-[8px] h-[52px] items-center justify-center py-[16px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"617:1074\" data-name=\"Section - Main CTA → Button\">\n <div className=\"relative shrink-0 size-[9px]\" data-node-id=\"617:1075\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[14px] shadow-[0px_5px_7.9px_5px_rgba(121,211,255,0.1)]\" data-node-id=\"617:1077\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[8px] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase w-[131px]\" data-node-id=\"617:1078\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Actualiser mon état</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[52px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"617:1079\" data-name=\"Section - Actions\">\n <div className=\"content-stretch flex gap-[8px] h-[52px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"617:1080\" data-name=\"Button\">\n <div className=\"absolute bg-[#79d3ff] h-[52px] left-0 right-0 rounded-[14px] top-0\" data-node-id=\"617:1081\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"617:1082\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Mesurer ma vfc</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"617:1083\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"617:1084\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"617:1085\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"617:1087\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"617:1088\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"617:1089\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"617:1090\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"617:1092\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"617:1093\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"617:1094\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1096\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"617:1097\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"617:1098\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"617:1099\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1101\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"617:1102\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"617:1103\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"617:1104\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1106\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"617:1107\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"617:1108\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"617:1109\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1111\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"617:1112\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"617:1113\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"617:1114\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:1116\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"617:1117\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:51":"const imgEllipse1 = \"https://www.figma.com/api/mcp/asset/af186fee-6797-4397-8a61-908e0c9b44b7.png\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/dc572fa5-a16b-4150-b72d-39839f8fefff.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/4aa0a578-1a48-41e4-a315-296a29b00df9.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/bb6fb328-ebf8-4ef4-b219-866b7140fd6a.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/2eaf6681-5078-41d0-b737-842531ce2fad.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/2eebfa36-b683-4ea9-b322-2893d247f9a0.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/d290e2ec-8c85-4bfe-8d3e-014b5d56bc7e.svg\";\n\nexport default function PreparationMesureMonEtat() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"560:51\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Préparation Mesure mon etat\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[761px] items-center max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"560:52\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col h-[58px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"560:53\" data-name=\"Header Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"560:54\" data-name=\"Header Section\">\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"560:55\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"560:56\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Mesure de votre état</p>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"560:57\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"560:59\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.7)] text-center tracking-[0.3px] uppercase whitespace-nowrap\" data-node-id=\"560:60\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">PHASE DE CALIBRAGE BIOMÉTRIQUE</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-h-[280px] max-w-[280px] pb-[32px] relative shrink-0 size-[280px]\" data-node-id=\"560:61\" data-name=\"Central Stylized Illustration:margin\">\n <div className=\"content-stretch flex items-center justify-center max-w-[280px] py-[12px] relative shrink-0 w-full\" data-node-id=\"560:62\" data-name=\"Central Stylized Illustration\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"560:63\" data-name=\"Atmospheric background effect\" />\n <div className=\"backdrop-blur-[12px] bg-[rgba(12,25,39,0.4)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.2)] shrink-0 size-[256px]\" data-node-id=\"560:64\" data-name=\"Overlay+Border+Shadow+OverlayBlur\">\n <div className=\"absolute flex inset-[calc(32.11%-0.36px)_calc(37.33%-0.25px)_calc(46.72%-0.07px)_calc(42.87%-0.14px)] items-center justify-center\" data-node-id=\"560:65\" style={{ containerType: \"size\" }}>\n <div className=\"flex-none h-[hypot(38.4763cqw,70.7047cqh)] rotate-[-26.98deg] w-[hypot(61.5237cqw,-29.2953cqh)]\">\n <div className=\"bg-[#79d3ff] blur-[2.95px] opacity-35 relative rounded-[9999px] size-full\" data-name=\"Pulsing point indicator\" />\n </div>\n </div>\n <div className=\"mix-blend-screen relative shrink-0 size-[256px]\" data-node-id=\"560:66\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" height=\"256\" src={imgEllipse1} width=\"256\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"560:67\">\n <div className=\"content-stretch flex flex-col h-[243px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"560:68\" data-name=\"Instructions List:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[243px] items-start relative shrink-0 w-full\" data-node-id=\"560:69\" data-name=\"Instructions List\">\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:70\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:71\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[14.394px] relative shrink-0 w-[8.437px]\" data-node-id=\"560:72\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:74\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"560:75\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Installez-vous confortablement dans `}</p>\n <p className=\"leading-[20px] whitespace-pre\">un environnement calme</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:76\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:77\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[15.562px] relative shrink-0 w-[14.013px]\" data-node-id=\"560:78\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:80\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"560:81\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Placez simplement votre doigt sur</p>\n <p className=\"leading-[20px]\">la caméra (avant ou arrière)</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:82\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:83\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"560:84\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:86\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"560:87\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Restez immobile en évitant de parler, `}</p>\n <p className=\"leading-[20px] whitespace-pre\">le temps de la mesure.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-t bottom-0 content-stretch flex flex-col from-[#0c141f] items-start left-0 p-[20px] to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"560:95\" data-name=\"Fixed Footer Actions\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"560:96\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:97\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[12px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2)]\" data-node-id=\"560:98\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center tracking-[1.4px] uppercase whitespace-nowrap\" data-node-id=\"560:99\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"560:100\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"560:101\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"560:102\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"560:103\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"560:104\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:106\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"560:107\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"560:108\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"560:109\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:111":"const imgInfo = \"https://www.figma.com/api/mcp/asset/729cbe72-f7ec-4f37-b08a-30a48f2896bc.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"560:111\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:112\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:113\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"560:114\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[182px] relative shrink-0 w-[285px]\" data-node-id=\"560:116\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[182px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"560:117\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Le SNA règle votre rythme cardiaque, votre respiration, votre digestion et votre sommeil. Il repose sur deux branches : `}</p>\n <p className=\"leading-[20px] mb-0\">{`la sympathique, qui mobilise l’organisme et accélère le cœur face à l’effort ou `}</p>\n <p className=\"leading-[20px] mb-0\">{`au stress ; la parasympathique, qui `}</p>\n <p className=\"leading-[20px]\">\n {`le ralentit et restaure l’énergie au repos. `}\n <br aria-hidden />\n Le SNA est un levier essentiel de votre bien-être au quotidien.\n </p>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:118":"const imgInfo = \"https://www.figma.com/api/mcp/asset/c2a44952-8dbf-4b1a-bff5-54df87d9b6e8.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"560:118\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:119\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:120\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"560:121\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[179px] relative shrink-0 w-[285px]\" data-node-id=\"560:123\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[179px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[13px] w-full whitespace-pre-wrap\" data-node-id=\"560:124\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`L'axe rouge-bleu résume l'équilibre de votre système nerveux : vers le rouge, l'activation (le sympathique, l'accélérateur) ; vers le bleu, la récupération (le parasympathique, le frein). `}</p>\n <p className=\"leading-[20px] mb-0\">{`C'est une photographie de l'instant : un système sain se déplace des deux côtés selon le moment. `}</p>\n <p className=\"leading-[20px]\">{`Haptika situe où vous êtes pour orienter l'action utile.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:125":"const imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1 = \"https://www.figma.com/api/mcp/asset/94cec028-86c0-4f92-91ef-63308865f13a.png\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/1cd1e51c-02cd-45f5-98e8-cf0892e0f391.svg\";\nconst imgHeart = \"https://www.figma.com/api/mcp/asset/f2da36d6-5169-4b4e-8118-89c6ae59b0d5.svg\";\nconst imgPulse = \"https://www.figma.com/api/mcp/asset/284ea4d7-d80e-453d-b839-0cb751241da5.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/4ee79680-af68-4cc9-9cdb-ac653194a452.svg\";\nconst imgSentimentStressedOutlineSvg = \"https://www.figma.com/api/mcp/asset/3963af03-5796-40a9-8887-d716551e77d9.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/ea1f490d-5449-49be-ba85-35e606a09f94.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/fe8f42f5-1cad-408d-a03c-70ca7ce354cf.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/1e4f311d-0b70-4815-9dc1-04fb9094d4db.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/bd4b278a-7ffe-428f-a615-a5b5ee687408.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/5287e8f1-6c9f-447d-95f1-ecd19662725c.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/620016ab-2204-4b15-9374-2cf7ceff20b6.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/d79d153b-0165-48c8-ac28-11b3fab72940.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/06f71274-19cf-467c-b7dd-b094a19dbf1c.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/6105ce01-84cb-41e5-94c3-caa9007dc69f.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/0f18cc51-c242-4abb-b85f-0c0d95ac509f.svg\";\n\nexport default function AccueilMonEtatActuel() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"560:125\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Accueil - Mon état actuel\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1454px] items-start pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"560:126\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[10px] items-center relative shrink-0 w-full\" data-node-id=\"560:127\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:128\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"560:129\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"560:130\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">Mon état actuel</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-end justify-center relative shrink-0 w-[206px]\" data-node-id=\"560:131\" data-name=\"Heading 2:margin\">\n <div className=\"content-stretch flex flex-col h-[24px] items-start relative shrink-0 w-[175px]\" data-node-id=\"560:132\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] h-[24px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] text-center w-[182px]\" data-node-id=\"560:133\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">{`Bonjour [Prénom] `}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[2px] items-center pl-[18.88px] pr-[18.87px] relative shrink-0 w-[312px]\" data-node-id=\"560:134\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"560:135\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Votre SNA du moment</p>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-center justify-center relative shrink-0 w-[178.31px]\" data-node-id=\"560:136\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"560:137\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] text-center whitespace-nowrap\" data-node-id=\"560:138\">\n <p className=\"leading-[20px]\">Mesuré à 08:42</p>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[17px]\" data-node-id=\"560:139\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] h-[1054px] items-start relative shrink-0 w-full\" data-node-id=\"560:140\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[594px] items-center relative shrink-0 w-full\" data-node-id=\"560:141\" data-name=\"Visual Core Section\">\n <div className=\"content-stretch flex flex-col gap-[16px] h-[90px] items-center justify-center max-w-[320px] relative shrink-0 w-[320px]\" data-node-id=\"560:142\" data-name=\"SNA Axis Slider\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col gap-[20px] items-center min-h-px relative w-full\" data-node-id=\"560:143\">\n <div className=\"content-stretch flex h-[11px] items-start justify-between opacity-60 relative shrink-0 w-full\" data-node-id=\"560:144\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-full items-start relative shrink-0\" data-node-id=\"560:145\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#ef4444] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"560:146\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">SYMPATHIQUE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-full items-start relative shrink-0\" data-node-id=\"560:147\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#4ab8e8] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"560:148\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">PARASYMPATHIQUE</p>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-r flex-[1_0_0] from-[#ef4444] min-h-px relative rounded-[9999px] to-[#4ab8e8] via-1/2 via-white w-[319px]\" data-node-id=\"560:149\" data-name=\"Background\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(190,200,207,0.4)] h-[16px] left-[calc(50%+0.5px)] top-[calc(50%+0.5px)] w-px\" data-node-id=\"560:150\" data-name=\"Vertical Divider\" />\n <div className=\"-translate-y-1/2 absolute bg-[#0c141f] border-3 border-[#dce3f3] border-solid h-[21px] left-[80.09%] right-[13.32%] rounded-[9999px] top-[calc(50%-1px)]\" data-node-id=\"560:151\" data-name=\"Cursor at +68 (Calculated position: 50% center + 18% right shift)\">\n <div className=\"-translate-y-1/2 absolute bg-[rgba(255,255,255,0)] h-[24px] left-[-3px] right-[-3px] rounded-[9999px] shadow-[0px_20px_25px_-5px_rgba(0,0,0,0.1),0px_8px_10px_-6px_rgba(0,0,0,0.1)] top-[calc(50%+0.5px)]\" data-node-id=\"560:152\" data-name=\"Cursor at +68 (Calculated position: 50% center + 18% right shift):shadow\" />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[320px]\" data-node-id=\"560:153\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular_Italic'] font-normal italic justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] text-center w-full\" data-node-id=\"560:154\" style={{ fontVariationSettings: '\"YAXS\" 400' }}>\n <p className=\"leading-[16px] mb-0\">Votre système nerveux montre une excellente capacité</p>\n <p className=\"leading-[16px]\">de régulation.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] h-[108px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"615:115\" data-name=\"Gauge\">\n <div className=\"content-stretch flex flex-col h-[54px] items-center justify-center relative rounded-[90px] shrink-0 w-[180px]\" data-node-id=\"615:116\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-[53px] items-center justify-center relative shrink-0 w-[180px]\" data-node-id=\"615:117\" data-name=\"Container\">\n <div className=\"[word-break:break-word] content-stretch flex font-['Inter:Bold'] font-bold h-[52px] items-end leading-[0] not-italic relative shrink-0 text-[#73c8f2] text-center text-shadow-[0px_0px_10px_rgba(74,184,232,0.5)] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"615:118\" data-name=\"Paragraph\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[48px]\" data-node-id=\"615:119\">\n <p className=\"leading-[56px]\">68</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[24px]\" data-node-id=\"615:120\">\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"615:127\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"615:128\" data-name=\"Margin\">\n <div className=\"bg-[rgba(121,211,255,0.1)] border border-[rgba(121,211,255,0.3)] border-solid content-stretch flex flex-col h-[28px] items-center justify-center px-[13px] py-px relative rounded-[9999px] shrink-0\" data-node-id=\"615:129\" data-name=\"Overlay+Border\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] whitespace-nowrap\" data-node-id=\"615:130\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">ÉQUILIBRE FAVORABLE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[407px] items-start relative shrink-0 w-[310px]\" data-node-id=\"560:155\" data-name=\"Central Silhouette:margin\">\n <div className=\"content-stretch flex flex-col h-[407px] items-start justify-center relative shrink-0 w-[309px]\" data-node-id=\"560:156\" data-name=\"Central Silhouette\">\n <div className=\"drop-shadow-[0px_2px_3.5px_#052d68] h-[353px] overflow-clip relative shrink-0 w-full\" data-node-id=\"560:162\" data-name=\"Silhouette\">\n <div className=\"absolute h-[536px] left-[38px] top-[-38px] w-[234px]\" data-node-id=\"663:16\" data-name=\"Gemini_Generated_Image_86lnbp86lnbp86ln 1\">\n <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <img alt=\"\" className=\"absolute h-full left-[-11.23%] max-w-none top-0 w-[208.88%]\" src={imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[13px] h-[247px] items-center relative shrink-0 w-[362px]\" data-node-id=\"617:891\" data-name=\"Section - Metrics Grid\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"617:892\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col h-[118px] items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:893\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:894\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:895\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"617:896\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[17px] relative shrink-0 w-[19px]\" data-node-id=\"617:897\" data-name=\"Heart\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgHeart} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:899\">\n <p className=\"leading-[16px]\">72bpm</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:900\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[2px] items-start relative shrink-0 w-full\" data-node-id=\"617:901\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:902\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:903\">\n <p className=\"leading-[20px]\">Pulsation</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:904\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] w-full\" data-node-id=\"617:905\">\n <p className=\"leading-[20px]\">Au repos</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:906\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:907\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:908\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"617:909\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[21px] relative shrink-0 w-[22px]\" data-node-id=\"617:910\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:912\">\n <p className=\"leading-[16px]\">54 ms</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:913\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full\" data-node-id=\"617:914\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:915\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:916\">\n <p className=\"leading-[20px]\">VFC Moyenne</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center relative shrink-0 w-full\" data-node-id=\"617:917\" data-name=\"Container\">\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"617:918\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"617:920\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"617:921\">\n <p className=\"leading-[20px]\">+5%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"617:922\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:923\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:924\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:925\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"617:926\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[23px] relative shrink-0 w-[22px]\" data-node-id=\"634:2\" data-name=\"Sentiment Stressed Outline.svg\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSentimentStressedOutlineSvg} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#ffa369] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:929\">\n <p className=\"leading-[16px]\">Modéré</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:930\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[2px] items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:931\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:932\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:933\">\n <p className=\"leading-[20px]\">Stress</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:934\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] w-full\" data-node-id=\"617:935\">\n <p className=\"leading-[20px]\">Acceptable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col h-[116px] items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"617:936\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"617:937\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"617:938\" data-name=\"Background+Border\">\n <div className=\"h-[15px] relative shrink-0 w-[12px]\" data-node-id=\"617:939\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"617:941\">\n <p className=\"leading-[16px]\">62%</p>\n </div>\n </div>\n </div>\n <div className=\"h-[51px] relative shrink-0 w-full\" data-node-id=\"617:942\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[43px] items-start relative shrink-0 w-full\" data-node-id=\"617:943\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"617:944\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"617:945\">\n <p className=\"leading-[20px]\">Énergie Dispo.</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"617:946\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"617:947\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"617:948\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"617:949\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px opacity-50 relative rounded-[9999px]\" data-node-id=\"617:950\" data-name=\"Background\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-[362px]\" data-node-id=\"560:189\" data-name=\"Section - Recommendation Card\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"560:190\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[22px]\" data-node-id=\"560:191\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:193\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[11px] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"560:194\">\n <p className=\"leading-[14px]\">RECOMMANDÉ MAINTENANT</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"560:195\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:196\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"560:197\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] whitespace-nowrap\" data-node-id=\"560:198\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Respiration 4·4·4·4 - Équilibre</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"560:199\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] w-full\" data-node-id=\"560:200\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">{`Pour favoriser un état d'équilibre de votre système nerveux autonome`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-end relative shrink-0\" data-node-id=\"560:201\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:202\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:203\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">5 min</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#2dd4bf] h-[31px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"560:204\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[12px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#001e2b] text-[10px] text-center whitespace-nowrap\" data-node-id=\"560:205\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Commencer</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] h-[120px] items-start relative shrink-0 w-full\" data-node-id=\"560:206\" data-name=\"Section - Main CTA:margin\">\n <div className=\"bg-[#79d3ff] content-stretch flex gap-[8px] h-[52px] items-center justify-center py-[16px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"560:207\" data-name=\"Section - Main CTA → Button\">\n <div className=\"relative shrink-0 size-[9px]\" data-node-id=\"560:208\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[14px] shadow-[0px_5px_7.9px_5px_rgba(121,211,255,0.1)]\" data-node-id=\"560:210\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[8px] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase w-[131px]\" data-node-id=\"560:211\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Actualiser mon état</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[52px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"560:212\" data-name=\"Section - Actions\">\n <div className=\"content-stretch flex gap-[8px] h-[52px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"560:213\" data-name=\"Button\">\n <div className=\"absolute bg-[#79d3ff] h-[52px] left-0 right-0 rounded-[14px] top-0\" data-node-id=\"560:214\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"560:215\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Mesurer ma vfc</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"560:216\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"560:217\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"560:218\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:220\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"560:221\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"560:222\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"560:223\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"560:225\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"560:226\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"560:227\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:229\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"560:230\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:231\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"560:232\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:234\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:235\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:236\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"560:237\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:239\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:240\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:241\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"560:242\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:244\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:245\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:246\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"560:247\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:249\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:250\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:368":"const imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1 = \"https://www.figma.com/api/mcp/asset/a7c20654-d2ab-434d-a80c-87b664a5e8fa.png\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/0cabb583-5608-40ec-8f15-fa37d8662392.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/873191cb-36ca-4cf6-a84b-4fe27a5c59cb.svg\";\nconst imgPulse = \"https://www.figma.com/api/mcp/asset/11b85b43-5007-45f0-ba26-bccb138d2519.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/92d7eb11-9b98-4119-9777-e64db97c1fdb.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/305db664-0f87-4322-99d2-5bc589d436a5.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/4f0837b0-0847-43aa-9549-6315c63fad40.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/2339c2aa-15a5-4174-a3f1-f8c325046bff.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/e164faa3-f7e4-49f6-82db-2f17315d1efd.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/1de78590-bc9c-41ff-9fab-c30dfa6cd1e6.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/b8f397ba-4128-4d34-8ba4-24c127294176.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/32567152-fe05-4cfe-8561-f2779bde1ef1.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/44f369c2-7c38-4ea1-860a-d1ccc2dd0cff.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/45c48ba4-54b8-4b0d-9c70-dd9f9f63f148.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/6377d0b8-49e4-4f2b-ba3b-9c57775f1ce8.svg\";\n\nexport default function AccueilDiagnosticMatinal() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"560:368\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Accueil - Diagnostic matinal\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1376px] items-start pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"560:369\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[10px] items-center relative shrink-0 w-full\" data-node-id=\"560:370\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:371\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"560:372\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"560:373\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">Mon diagnostic matinal</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-end justify-center relative shrink-0 w-[206px]\" data-node-id=\"560:374\" data-name=\"Heading 2:margin\">\n <div className=\"content-stretch flex flex-col h-[24px] items-start relative shrink-0 w-[175px]\" data-node-id=\"560:375\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] h-[24px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] text-center w-[182px]\" data-node-id=\"560:376\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">{`Bonjour [Prénom] `}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[2px] items-center pl-[18.88px] pr-[18.87px] relative shrink-0 w-[312px]\" data-node-id=\"560:377\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"560:378\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Votre SNA au réveil</p>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-center justify-center relative shrink-0 w-[178.31px]\" data-node-id=\"560:379\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"560:380\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] text-center whitespace-nowrap\" data-node-id=\"560:381\">\n <p className=\"leading-[20px]\">14 août 2026</p>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[17px]\" data-node-id=\"560:382\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] h-[1044px] items-start relative shrink-0 w-full\" data-node-id=\"560:383\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[594px] items-center relative shrink-0 w-full\" data-node-id=\"560:384\" data-name=\"Visual Core Section\">\n <div className=\"content-stretch flex flex-col gap-[16px] h-[90px] items-center justify-center max-w-[320px] relative shrink-0 w-[320px]\" data-node-id=\"560:385\" data-name=\"SNA Axis Slider\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col gap-[20px] items-center min-h-px relative w-full\" data-node-id=\"560:386\">\n <div className=\"content-stretch flex h-[11px] items-start justify-between opacity-60 relative shrink-0 w-full\" data-node-id=\"560:387\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-full items-start relative shrink-0\" data-node-id=\"560:388\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#ef4444] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"560:389\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">SYMPATHIQUE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-full items-start relative shrink-0\" data-node-id=\"560:390\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#4ab8e8] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"560:391\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">PARASYMPATHIQUE</p>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-r flex-[1_0_0] from-[#ef4444] min-h-px relative rounded-[9999px] to-[#4ab8e8] via-1/2 via-white w-[319px]\" data-node-id=\"560:392\" data-name=\"Background\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(190,200,207,0.4)] h-[16px] left-[calc(50%+0.5px)] top-[calc(50%+0.5px)] w-px\" data-node-id=\"560:393\" data-name=\"Vertical Divider\" />\n <div className=\"-translate-y-1/2 absolute bg-[#0c141f] border-3 border-[#dce3f3] border-solid h-[21px] left-[80.09%] right-[13.32%] rounded-[9999px] top-[calc(50%-1px)]\" data-node-id=\"560:394\" data-name=\"Cursor at +68 (Calculated position: 50% center + 18% right shift)\">\n <div className=\"-translate-y-1/2 absolute bg-[rgba(255,255,255,0)] h-[24px] left-[-3px] right-[-3px] rounded-[9999px] shadow-[0px_20px_25px_-5px_rgba(0,0,0,0.1),0px_8px_10px_-6px_rgba(0,0,0,0.1)] top-[calc(50%+0.5px)]\" data-node-id=\"560:395\" data-name=\"Cursor at +68 (Calculated position: 50% center + 18% right shift):shadow\" />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[320px]\" data-node-id=\"560:396\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular_Italic'] font-normal italic justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] text-center w-full\" data-node-id=\"560:397\" style={{ fontVariationSettings: '\"YAXS\" 400' }}>\n <p className=\"leading-[16px] mb-0\">Votre système nerveux a bien récupéré cette nuit.</p>\n <p className=\"leading-[16px]\"></p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] h-[108px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"560:642\" data-name=\"Gauge\">\n <div className=\"content-stretch flex flex-col h-[54px] items-center justify-center relative rounded-[90px] shrink-0 w-[180px]\" data-node-id=\"560:643\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-[53px] items-center justify-center relative shrink-0 w-[180px]\" data-node-id=\"560:646\" data-name=\"Container\">\n <div className=\"[word-break:break-word] content-stretch flex font-['Inter:Bold'] font-bold h-[52px] items-end leading-[0] not-italic relative shrink-0 text-[#73c8f2] text-center text-shadow-[0px_0px_10px_rgba(74,184,232,0.5)] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"560:647\" data-name=\"Paragraph\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[48px]\" data-node-id=\"560:648\">\n <p className=\"leading-[56px]\">78</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[24px]\" data-node-id=\"560:649\">\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[28px] items-center justify-center relative rounded-[10px] shrink-0 w-full\" data-node-id=\"560:400\" data-name=\"Score Overlay\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"560:401\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:402\" data-name=\"Margin\">\n <div className=\"bg-[rgba(121,211,255,0.1)] border border-[rgba(121,211,255,0.3)] border-solid content-stretch flex flex-col h-[28px] items-center justify-center px-[13px] py-px relative rounded-[9999px] shrink-0\" data-node-id=\"560:403\" data-name=\"Overlay+Border\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] whitespace-nowrap\" data-node-id=\"560:404\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">RÉCUPÉRATION SATISFAISANTE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[407px] items-start relative shrink-0 w-[310px]\" data-node-id=\"560:398\" data-name=\"Central Silhouette:margin\">\n <div className=\"content-stretch flex flex-col h-[407px] items-start justify-center relative shrink-0 w-[309px]\" data-node-id=\"560:399\" data-name=\"Central Silhouette\">\n <div className=\"h-[353px] overflow-clip relative shrink-0 w-full\" data-node-id=\"560:405\" data-name=\"Silhouette\">\n <div className=\"absolute h-[345px] left-0 top-[8px] w-[309px]\" data-node-id=\"663:8\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 309 345' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.4 17.6 -15.763 0.35826 154.5 172.5)'><stop stop-color='rgba(252,218,0,1)' offset='0'/><stop stop-color='rgba(200,167,11,0.9)' offset='0.088942'/><stop stop-color='rgba(149,115,22,0.8)' offset='0.17788'/><stop stop-color='rgba(113,90,22,0.7875)' offset='0.38341'/><stop stop-color='rgba(78,64,23,0.775)' offset='0.58894'/><stop stop-color='rgba(42,39,23,0.7625)' offset='0.79447'/><stop stop-color='rgba(24,26,24,0.75625)' offset='0.89724'/><stop stop-color='rgba(6,13,24,0.75)' offset='1'/></radialGradient></defs></svg>\\\")\" }} />\n <div className=\"absolute h-[536px] left-[38px] top-[-37px] w-[234px]\" data-node-id=\"663:14\" data-name=\"Gemini_Generated_Image_86lnbp86lnbp86ln 1\">\n <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <img alt=\"\" className=\"absolute h-full left-[-11.23%] max-w-none top-0 w-[208.88%]\" src={imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[13px] h-[237px] items-center relative shrink-0 w-full\" data-node-id=\"560:407\" data-name=\"Section - Metrics Grid\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"564:671\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"560:416\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:691\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"564:692\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[15px]\" data-node-id=\"564:693\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"564:695\">\n <p className=\"leading-[16px]\">7h 12m</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:696\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full\" data-node-id=\"564:697\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"564:698\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"564:699\">\n <p className=\"leading-[20px]\">Sommeil</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"564:700\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] w-full\" data-node-id=\"564:701\">\n <p className=\"leading-[20px]\">Bonne qualité</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"560:424\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:703\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"564:704\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"564:705\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[21px] relative shrink-0 w-[22px]\" data-node-id=\"617:878\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"564:707\">\n <p className=\"leading-[16px]\">54 ms</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:708\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full\" data-node-id=\"564:709\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"564:710\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"564:711\">\n <p className=\"leading-[20px]\">VFC Moyenne</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center relative shrink-0 w-full\" data-node-id=\"564:712\" data-name=\"Container\">\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"564:713\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"564:715\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"564:716\">\n <p className=\"leading-[20px]\">+5%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"564:673\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"564:674\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:718\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"564:719\" data-name=\"Background+Border\">\n <div className=\"h-[15px] relative shrink-0 w-[14.259px]\" data-node-id=\"564:720\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#ffb5b9] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"564:722\">\n <p className=\"leading-[16px]\">Faible</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:723\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"564:724\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"564:725\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"564:726\">\n <p className=\"leading-[20px]\">Tension nocturne</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"564:727\" data-name=\"Signal Quality Indicator adapted for stress level\">\n <div className=\"bg-[#ffb5b9] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"564:728\" data-name=\"Background\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"564:729\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"564:730\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"564:731\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col items-center p-[17px] relative rounded-[14px] shrink-0 w-[175px]\" data-node-id=\"564:682\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:733\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"bg-[#2e3541] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"564:734\" data-name=\"Background+Border\">\n <div className=\"h-[15px] relative shrink-0 w-[12px]\" data-node-id=\"564:735\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[20px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"564:737\">\n <p className=\"leading-[16px]\">82%</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:738\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"564:739\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"564:740\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"564:741\">\n <p className=\"leading-[20px]\">Énergie Dispo.</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"564:742\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"564:743\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"564:744\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px relative rounded-[9999px]\" data-node-id=\"595:2\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] flex-[1_0_0] h-[4px] min-w-px opacity-50 relative rounded-[9999px]\" data-node-id=\"564:745\" data-name=\"Background\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-[362px]\" data-node-id=\"560:432\" data-name=\"Section - Recommendation Card\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"560:433\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[22px]\" data-node-id=\"560:434\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:436\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[11px] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"560:437\">\n <p className=\"leading-[14px]\">RECOMMANDÉ MAINTENANT</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"560:438\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:439\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"560:440\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] whitespace-nowrap\" data-node-id=\"560:441\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Respiration 4·4·4·4 - Équilibre</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"560:442\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] w-full\" data-node-id=\"560:443\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">{`Pour favoriser un état d'équilibre de votre système nerveux autonome`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-end relative shrink-0\" data-node-id=\"560:444\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:445\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:446\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">5 min</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#2dd4bf] h-[31px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"560:447\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[12px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#001e2b] text-[10px] text-center whitespace-nowrap\" data-node-id=\"560:448\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Commencer</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[52px] items-start relative shrink-0 w-full\" data-node-id=\"560:449\" data-name=\"Section - Main CTA:margin\">\n <div className=\"bg-[#79d3ff] content-stretch flex gap-[8px] h-[52px] items-center justify-center py-[16px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"560:450\" data-name=\"Section - Main CTA → Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[14px] shadow-[0px_5px_7.9px_5px_rgba(121,211,255,0.1)]\" data-node-id=\"560:453\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[8px] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase w-[147px]\" data-node-id=\"560:454\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Voir mon état actuel →</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"560:459\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"560:460\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"560:461\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:463\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"560:464\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"560:465\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"560:466\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"560:468\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"560:469\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"560:470\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:472\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"560:473\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:474\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"560:475\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:477\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:478\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:479\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"560:480\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:482\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:483\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:484\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"560:485\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:487\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:488\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:489\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"560:490\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:492\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:493\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:251":"const imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1 = \"https://www.figma.com/api/mcp/asset/c153df02-16d7-42b7-a114-dbffa44d035d.png\";\nconst imgBroadcast = \"https://www.figma.com/api/mcp/asset/a3ee4ef4-ad9d-4f24-8a67-96192830d681.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/7bf0af59-f704-427a-8bf4-490bab09284e.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/defa0bad-fb21-44d4-af1e-57fb6e4f41d0.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/802eec6c-2dc7-4aa0-8bcd-c8c58fb3123d.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/5d4fbc33-2ab0-4642-a8be-5ccad92afe54.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/923e9d5a-c635-47f7-a30b-a1e30fee76d7.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/a8a49fed-418a-4b2c-8289-35976a622def.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/4b70104a-e715-40e1-81bc-3be3c5af7207.svg\";\n\nexport default function AccueilPremiereArrivee() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"560:251\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Accueil - Première arrivée\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[814px] items-start pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"560:252\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[14px] items-center relative shrink-0 w-full\" data-node-id=\"560:253\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-end justify-center relative shrink-0 w-[206px]\" data-node-id=\"560:254\" data-name=\"Heading 2:margin\">\n <div className=\"content-stretch flex flex-col h-[24px] items-start relative shrink-0 w-[175px]\" data-node-id=\"560:255\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] h-[24px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] text-center w-[182px]\" data-node-id=\"560:256\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">{`Bonjour [Prénom] `}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pl-[18.88px] pr-[18.87px] relative shrink-0 w-full\" data-node-id=\"560:257\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center tracking-[-0.2px] w-[356px] whitespace-pre-wrap\" data-node-id=\"560:258\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Nous allons réaliser une première mesure `}</p>\n <p className=\"leading-[20px] mb-0\">{`de votre variabilité cardiaque (VFC) à l’aide `}</p>\n <p className=\"leading-[20px] mb-0\">{`de la caméra de votre iPhone. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Cette mesure vous permettra d’estimer `}</p>\n <p className=\"leading-[20px] mb-0\">{`l’état actuel de votre système nerveux `}</p>\n <p className=\"leading-[20px]\">autonome (SNA) sur l’axe sympathique/ parasympathique.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[404px] items-start relative shrink-0 w-full\" data-node-id=\"560:259\">\n <div className=\"content-stretch flex flex-col h-[364px] items-center relative shrink-0 w-full\" data-node-id=\"560:260\" data-name=\"Visual Core Section\">\n <div className=\"content-stretch flex flex-col h-[374px] items-start relative shrink-0 w-[310px]\" data-node-id=\"560:261\" data-name=\"Central Silhouette:margin\">\n <div className=\"content-stretch flex flex-col h-[374px] items-start justify-center relative shrink-0 w-[309px]\" data-node-id=\"560:262\" data-name=\"Central Silhouette\">\n <div className=\"drop-shadow-[0px_2px_3.5px_#052d68] h-[353px] overflow-clip relative shrink-0 w-full\" data-node-id=\"560:263\" data-name=\"Silhouette\">\n <div className=\"absolute h-[582px] left-[28px] top-[-44.5px] w-[254px]\" data-node-id=\"663:12\" data-name=\"Gemini_Generated_Image_86lnbp86lnbp86ln 1\">\n <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <img alt=\"\" className=\"absolute h-full left-[-11.23%] max-w-none top-0 w-[208.88%]\" src={imgGeminiGeneratedImage86Lnbp86Lnbp86Ln1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[52px] items-start relative shrink-0 w-full\" data-node-id=\"560:265\" data-name=\"Section - Main CTA:margin\">\n <div className=\"bg-[#79d3ff] content-stretch flex gap-[8px] h-[52px] items-center justify-center py-[16px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"560:266\" data-name=\"Section - Main CTA → Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 size-[12px]\" data-node-id=\"560:267\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[12px]\" data-node-id=\"560:268\" data-name=\"Broadcast\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgBroadcast} />\n </div>\n </div>\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[14px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.1),0px_4px_6px_-4px_rgba(121,211,255,0.1)]\" data-node-id=\"560:270\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[8px] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase w-[131px]\" data-node-id=\"560:271\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">mesurer mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"560:272\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"560:273\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"560:274\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:276\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"560:277\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"560:278\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"560:279\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"560:281\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"560:282\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"560:283\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:285\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"560:286\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:287\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"560:288\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:290\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:291\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:292\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"560:293\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:295\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:296\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:297\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"560:298\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:300\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:301\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:302\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"560:303\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:305\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"560:306\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:307":"const imgEllipse1 = \"https://www.figma.com/api/mcp/asset/4d2ae13b-15f9-4f8d-88ac-b1506d7284f7.png\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/566b4304-0f7e-4c23-90fe-d2d9be90a81e.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/0555c948-5000-47b0-955a-20add810bb99.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/c291a087-8335-4e44-8c9c-96a6890af354.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/6329a71d-6944-48db-90fe-9df5811abe38.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/dab4e194-4946-4dfd-8394-a92b3d3d86ad.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/c3f49326-30af-4a17-8400-49303ffd9066.svg\";\n\nexport default function PreparationMesureVfc() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"560:307\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Préparation Mesure VFC\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[761px] items-center max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"560:308\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col h-[58px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"560:309\" data-name=\"Header Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"560:310\" data-name=\"Header Section\">\n <div className=\"content-stretch flex gap-[8px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"560:311\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"560:312\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Mesure de votre VFC</p>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"560:313\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"560:315\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.7)] text-center tracking-[0.3px] uppercase whitespace-nowrap\" data-node-id=\"560:316\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">PHASE DE CALIBRAGE BIOMÉTRIQUE</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-h-[280px] max-w-[280px] pb-[32px] relative shrink-0 size-[280px]\" data-node-id=\"560:317\" data-name=\"Central Stylized Illustration:margin\">\n <div className=\"content-stretch flex items-center justify-center max-w-[280px] py-[12px] relative shrink-0 w-full\" data-node-id=\"560:318\" data-name=\"Central Stylized Illustration\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"560:319\" data-name=\"Atmospheric background effect\" />\n <div className=\"backdrop-blur-[12px] bg-[rgba(12,25,39,0.4)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.2)] shrink-0 size-[256px]\" data-node-id=\"560:320\" data-name=\"Overlay+Border+Shadow+OverlayBlur\">\n <div className=\"absolute flex inset-[calc(32.11%-0.36px)_calc(37.33%-0.25px)_calc(46.72%-0.07px)_calc(42.87%-0.14px)] items-center justify-center\" data-node-id=\"560:321\" style={{ containerType: \"size\" }}>\n <div className=\"flex-none h-[hypot(38.4763cqw,70.7047cqh)] rotate-[-26.98deg] w-[hypot(61.5237cqw,-29.2953cqh)]\">\n <div className=\"bg-[#79d3ff] blur-[2.95px] opacity-35 relative rounded-[9999px] size-full\" data-name=\"Pulsing point indicator\" />\n </div>\n </div>\n <div className=\"mix-blend-screen relative shrink-0 size-[256px]\" data-node-id=\"560:322\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" height=\"256\" src={imgEllipse1} width=\"256\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"560:323\">\n <div className=\"content-stretch flex flex-col h-[243px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"560:324\" data-name=\"Instructions List:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[243px] items-start relative shrink-0 w-full\" data-node-id=\"560:325\" data-name=\"Instructions List\">\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:326\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:327\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[14.394px] relative shrink-0 w-[8.437px]\" data-node-id=\"560:328\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:330\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"560:331\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Installez-vous confortablement dans `}</p>\n <p className=\"leading-[20px] whitespace-pre\">un environnement calme</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:332\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:333\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[15.562px] relative shrink-0 w-[14.013px]\" data-node-id=\"560:334\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:336\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"560:337\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Placez simplement votre doigt sur</p>\n <p className=\"leading-[20px]\">la caméra (avant ou arrière)</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[73px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:338\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:339\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"560:340\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:342\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"560:343\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Restez immobile en évitant de parler, `}</p>\n <p className=\"leading-[20px] whitespace-pre\">le temps de la mesure.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-t bottom-0 content-stretch flex flex-col from-[#0c141f] items-start left-0 p-[20px] to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"560:344\" data-name=\"Fixed Footer Actions\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"560:345\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"560:346\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[12px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2)]\" data-node-id=\"560:347\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center tracking-[1.4px] uppercase whitespace-nowrap\" data-node-id=\"560:348\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"560:349\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"560:350\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"560:351\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"560:352\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"560:353\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"560:355\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"560:356\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"560:357\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"560:358\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","560:360":"const imgInfo = \"https://www.figma.com/api/mcp/asset/e6866361-1cda-4c32-b734-941fbc39c38c.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"560:360\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"560:361\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"560:362\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"560:363\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[285px]\" data-node-id=\"560:365\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[299px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"560:366\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`La VFC, variabilité de la fréquence cardiaque, mesure les infimes écarts de durée entre deux battements. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Un cœur sain ne bat jamais de façon parfaitement régulière : ces micro-variations traduisent l'activité de votre système nerveux autonome. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] mb-0\">Une VFC élevée signale un système en</p>\n <p className=\"leading-[20px] mb-0\">{`récupération, dominé par le frein parasympathique ; une VFC basse, un système sous tension. `}</p>\n <p className=\"leading-[20px]\">{`C'est l'indicateur le plus fiable, sans appareil médical, pour lire votre équilibre nerveux du moment.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","564:748":"const imgContainer = \"https://www.figma.com/api/mcp/asset/fb4d675f-c696-4582-ba0b-1cca84ec9ff2.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/a448294b-0320-40ea-a1cb-77836cb10353.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/135052ef-8253-496f-8cdd-3a580ce7fdf4.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/c0dd2efc-927f-4771-8061-951453c9ae68.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/b3c44cbd-4d51-4061-88dd-268c035dd823.svg\";\n\nexport default function ResultatMesureVfc() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"564:748\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Résultat Mesure VFC\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[886px] items-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"564:749\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[105px] items-start relative shrink-0\" data-node-id=\"564:750\" data-name=\"Success Header:margin\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-center relative shrink-0\" data-node-id=\"564:751\" data-name=\"Success Header\">\n <div className=\"bg-[rgba(121,211,255,0.1)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[64px]\" data-node-id=\"564:752\" data-name=\"Overlay+Border\">\n <div className=\"relative shrink-0 size-[25px]\" data-node-id=\"564:753\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pt-[12px] relative shrink-0 w-full\" data-node-id=\"564:755\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"564:756\">\n <p className=\"leading-[32px]\">Mesure terminée</p>\n </div>\n </div>\n <div className=\"h-[20px] relative shrink-0 w-full\" data-node-id=\"564:757\" data-name=\"Container\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"564:758\" data-name=\"Hero Metric:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start overflow-clip p-[25px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"564:759\" data-name=\"Hero Metric\">\n <div className=\"h-[12px] relative shrink-0 w-full\" data-node-id=\"564:760\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold h-[12px] justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[1.2px] uppercase w-[147px]\" data-node-id=\"564:761\">\n <p className=\"leading-[16px]\">TEMPS de l’analyse</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"564:762\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"content-stretch drop-shadow-[0px_0px_6px_rgba(115,209,255,0.3)] flex flex-col items-center relative shrink-0\" data-node-id=\"564:763\" data-name=\"Shadow\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold h-[27px] justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[36px] text-center tracking-[-0.96px] w-[148px]\" data-node-id=\"564:764\">\n <p className=\"leading-[56px]\">4 min 30</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-b from-[rgba(74,184,232,0.15)] inset-0 opacity-40 to-[rgba(74,184,232,0)]\" data-node-id=\"564:765\" data-name=\"Gradient\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"564:766\" data-name=\"Hero Section: Score\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"564:767\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Thin'] font-[110.72500610351562] h-[76px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[0px] text-center w-[152px]\" data-node-id=\"564:768\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p>\n <span className=\"leading-[72px] text-[64px]\">7</span>\n <span className=\"leading-[72px] text-[64px] tracking-[5.12px]\">2</span>\n <span className=\"leading-[72px] text-[32px]\">ms</span>\n </p>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"564:769\" data-name=\"Container\">\n <div className=\"h-[6.417px] relative shrink-0 w-[11.083px]\" data-node-id=\"564:770\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"564:772\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[17px] text-center whitespace-nowrap\" data-node-id=\"564:773\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Équilibre favorable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[210px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"564:774\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"564:775\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"564:776\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"564:777\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[177px] relative shrink-0 w-[285px]\" data-node-id=\"564:779\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"564:780\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Votre VFC s'exprime en millisecondes : plus le chiffre est élevé, plus votre système penche vers la récupération. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] mb-0\">{`Une valeur seule reste peu parlante : `}</p>\n <p className=\"leading-[20px] mb-0\">{`elle change avec l'heure, la position, `}</p>\n <p className=\"leading-[20px] mb-0\">la digestion.</p>\n <p className=\"leading-[20px]\">{`C'est en la suivant sur plusieurs jours qu'une tendance se dégage.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-full\" data-node-id=\"564:781\">\n <div className=\"content-stretch flex flex-col h-[52px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"564:782\" data-name=\"Section - Actions\">\n <div className=\"bg-[#79d3ff] content-stretch flex gap-[8px] h-[52px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"564:783\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[52px] left-0 right-0 rounded-[14px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2),0px_4px_6px_-4px_rgba(121,211,255,0.2)] top-0\" data-node-id=\"564:784\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"564:785\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Voir mon état</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[52px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"564:786\" data-name=\"Section - Actions\">\n <div className=\"content-stretch flex gap-[8px] h-[52px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"564:787\" data-name=\"Button\">\n <div className=\"absolute border border-[#282b2c] border-solid h-[52px] left-0 right-0 rounded-[14px] top-0\" data-node-id=\"564:788\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"564:789\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Voir mon évolution</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"564:790\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"564:791\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"564:792\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:794\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"564:795\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"564:796\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"564:797\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","564:799":"const imgContainer = \"https://www.figma.com/api/mcp/asset/6f358fb1-6d88-4f9b-a175-dbb6b6322abe.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/fe270375-0db3-467f-b947-dabb889f632f.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/370dff19-eb2e-4027-91b0-50b35384856b.svg\";\n\nexport default function MesureHrvEnCours() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"564:799\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Mesure HRV en cours\">\n <div className=\"content-stretch flex flex-col gap-[55px] h-[607px] items-center justify-center pt-[100px] px-[20px] relative shrink-0 w-full\" data-node-id=\"564:800\" data-name=\"Main - Center Visualization (Minimalist Focus)\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"564:801\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start pb-[8px] relative shrink-0\" data-node-id=\"564:802\" data-name=\"Margin\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"564:803\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] relative rounded-[9999px] shadow-[0px_0px_8px_0px_#79d3ff] shrink-0 size-[8px]\" data-node-id=\"564:804\" data-name=\"Background+Shadow\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"564:805\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] tracking-[1.1px] uppercase whitespace-nowrap\" data-node-id=\"564:806\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">ENREGISTREMENT DIRECT</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"564:807\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] whitespace-nowrap\" data-node-id=\"564:808\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p>\n <span className=\"[word-break:break-word] font-['SF_Pro:Regular'] font-normal leading-[28px]\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n Analyse\n </span>\n <span className=\"leading-[28px]\">{` en cours`}</span>\n </p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pl-[26.8px] pr-[26.81px] relative shrink-0 w-full\" data-node-id=\"564:809\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[15px] text-[rgba(190,200,207,0.8)] text-center w-[308px]\" data-node-id=\"564:810\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Restez posé, respirez normalement.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[256px]\" data-node-id=\"564:811\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[4px] h-[32px] items-end relative shrink-0\" data-node-id=\"564:812\" data-name=\"Real-time Signal Visualization (Micro-interaction)\">\n <div className=\"bg-[#79d3ff] h-[12.8px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:813\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[22.39px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:814\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[17.59px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:815\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[27.19px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:816\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] h-[19.19px] relative rounded-[9999px] shrink-0 w-[4px]\" data-node-id=\"564:817\" data-name=\"Background\" />\n </div>\n <div className=\"absolute border border-[rgba(26,48,69,0.3)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"564:818\" data-name=\"Camera Viewfinder Overlay (Simulated)\" />\n <div className=\"absolute border border-[rgba(121,211,255,0.2)] border-solid inset-[16px] rounded-[9999px]\" data-node-id=\"564:819\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[40px] items-start relative shrink-0 w-[326px]\" data-node-id=\"564:820\" data-name=\"Footer - Bottom Controls & Feedback\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"564:821\" data-name=\"Signal Quality & Info\">\n <div className=\"backdrop-blur-[12px] bg-[#0c141f] border border-[rgba(26,48,69,0.5)] border-solid content-stretch flex gap-[16px] items-center px-[17px] py-[9px] relative rounded-[9999px] shrink-0\" data-node-id=\"564:822\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0\" data-node-id=\"564:823\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"564:824\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">Qualité SIGNAL</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:825\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[6px] items-start relative size-full\">\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:826\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:827\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:828\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:829\" data-name=\"Background\" />\n <div className=\"bg-[#79d3ff] relative rounded-[3px] shrink-0 size-[6px]\" data-node-id=\"564:830\" data-name=\"Background\" />\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:831\" data-name=\"Margin\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[4px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"564:832\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[15px]\">EXCELLENT</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"564:833\" data-name=\"Stop Button\">\n <div className=\"content-stretch flex flex-col items-start overflow-clip px-[40px] py-[16px] relative rounded-[12px] shrink-0\" data-node-id=\"564:834\" data-name=\"Button\">\n <div className=\"absolute backdrop-blur-[6px] bg-[#0c1927] border border-[#1a3045] border-solid inset-[0_0.15px_0_0] rounded-[14px]\" data-node-id=\"564:835\" data-name=\"Overlay+Border+OverlayBlur\" />\n <div className=\"content-stretch flex gap-[11.99px] items-center relative shrink-0\" data-node-id=\"564:836\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"564:837\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"564:839\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[16px] text-center whitespace-nowrap\" data-node-id=\"564:840\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Arrêter</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"564:841\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"564:842\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"564:843\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"564:844\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"564:845\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"564:847\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"564:848\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"564:849\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"564:850\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:4392":"const imgContainer = \"https://www.figma.com/api/mcp/asset/74af5d93-c8bb-437e-bb32-d2d326ce0b16.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/8d2ff265-a2be-43f6-9e6f-f2c0a3029f51.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/d0a1a438-6835-4d3e-b71e-5cacbfdb056b.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/078dbfb5-c1ed-49ee-bd14-23a6bee6ff98.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/6c296044-72fe-499c-a97c-2109ff620662.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/fbc76d9b-3a94-4f65-b18f-1108484cdfd3.svg\";\nconst imgRecord = \"https://www.figma.com/api/mcp/asset/2e3a976b-b24b-43da-aff8-284d568527f0.svg\";\nconst imgSunHorizon = \"https://www.figma.com/api/mcp/asset/2aa8e28c-d427-4a5e-8350-6d50bb2460ff.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/d00c5186-1888-427f-9e52-238602cd21c2.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/170b90f2-b036-44b7-80a8-2832b5794eb8.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/0fe8140d-4858-4111-af1d-e92f4af7d6db.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/1bed03aa-bccf-4786-97d0-648d678f76ca.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/1abc6d35-c42e-4246-9541-6ca0bd12bb24.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/33f8fe8d-be4b-423b-8b18-e78f860df636.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/c5c34218-de8a-4fa5-b384-142759675c6b.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/a1559d03-c475-4eba-b4e7-85513b4ae8da.svg\";\n\nexport default function VosOutils() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:4392\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos Outils\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:4393\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4394\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:4395\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4397\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:4398\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:4399\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:4400\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1350px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:4402\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"566:4403\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4404\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] h-[20px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] w-full\" data-node-id=\"566:4405\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Vos Outils</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4406\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[36px] justify-center leading-[0] relative shrink-0 text-[15px] text-[rgba(190,200,207,0.8)] w-full whitespace-pre-wrap\" data-node-id=\"566:4407\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Choisissez une famille pour agir sur votre `}</p>\n <p className=\"leading-[20px]\">système nerveux.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:4408\" data-name=\"Section - Tool Families - Large Vertical Cards\">\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4409\" data-name=\"Card 1: RESPIRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"566:4410\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(74,184,232,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:4411\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-[74.519%] via-[rgba(15,23,42,0)]\" data-node-id=\"566:4412\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"566:4413\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(74,184,232,0.2)] border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"566:4414\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[17px] relative shrink-0 w-[20px]\" data-node-id=\"566:4415\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4417\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"566:4418\">\n <p className=\"leading-[24px]\">RESPIRER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"566:4419\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[20px] items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4420\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[31px] justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] w-full\" data-node-id=\"566:4421\">\n <p className=\"leading-[20px] mb-0\">Régulez votre rythme respiratoire et</p>\n <p className=\"leading-[20px]\">votre cohérence cardiaque.</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4422\" data-name=\"Container\">\n <div className=\"bg-[rgba(74,184,232,0.1)] content-stretch flex flex-col items-start px-[8px] py-[4px] relative rounded-[4px] shrink-0\" data-node-id=\"566:4423\" data-name=\"Overlay\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"566:4424\">\n <p className=\"leading-[15px]\">5 EXERCICES</p>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4425\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4427\" data-name=\"Card 2: ANCRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"566:4428\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(167,139,250,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:4429\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-3/4 via-[rgba(15,23,42,0)]\" data-node-id=\"566:4430\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"566:4431\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(167,139,250,0.2)] border border-[rgba(167,139,250,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"566:4432\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[18px] relative shrink-0 w-[24px]\" data-node-id=\"566:4433\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4435\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#a78bfa] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"566:4436\">\n <p className=\"leading-[24px]\">ANCRER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"566:4437\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[20px] items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4438\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[31px] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[16px] w-full\" data-node-id=\"566:4439\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Retrouvez votre stabilité par des</p>\n <p className=\"leading-[20px]\">vibrations haptiques ciblées.</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4440\" data-name=\"Container\">\n <div className=\"bg-[rgba(167,139,250,0.1)] content-stretch flex flex-col items-start px-[8px] py-[4px] relative rounded-[4px] shrink-0\" data-node-id=\"566:4441\" data-name=\"Overlay\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#a78bfa] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"566:4442\">\n <p className=\"leading-[15px]\">5 PROTOCOLES</p>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4443\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4445\" data-name=\"Card 3: RECENTRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"566:4446\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(45,212,191,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:4447\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-3/4 via-[rgba(15,23,42,0)]\" data-node-id=\"566:4448\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"566:4449\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(45,212,191,0.2)] border border-[rgba(45,212,191,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"566:4450\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 size-[18px]\" data-node-id=\"566:4451\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4453\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2dd4bf] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"566:4454\">\n <p className=\"leading-[24px]\">RECENTRER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"566:4455\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[20px] items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4456\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[32px] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[16px] w-full\" data-node-id=\"566:4457\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Fixez votre attention et relâchez les</p>\n <p className=\"leading-[20px]\">tensions oculaires et mentales.</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4458\" data-name=\"Container\">\n <div className=\"bg-[rgba(45,212,191,0.1)] content-stretch flex flex-col items-start px-[8px] py-[4px] relative rounded-[4px] shrink-0\" data-node-id=\"566:4459\" data-name=\"Overlay\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2dd4bf] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"566:4460\">\n <p className=\"leading-[15px]\">2 MODULES</p>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4461\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4463\" data-name=\"Card 3: RECENTRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"566:4464\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(233,70,151,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:4465\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-3/4 via-[rgba(15,23,42,0)]\" data-node-id=\"566:4466\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"566:4467\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(233,70,151,0.2)] border border-[rgba(233,70,151,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"566:4468\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4469\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[28px]\" data-node-id=\"566:4470\" data-name=\"Record\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgRecord} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4472\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#e94697] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"566:4473\">\n <p className=\"leading-[24px]\">MÉDITATION HAPTIQUE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"566:4474\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[20px] items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4475\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[32px] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[16px] w-full whitespace-pre-wrap\" data-node-id=\"566:4476\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Méditez en silence, la vibration pour `}</p>\n <p className=\"leading-[20px]\">{`seul guide. `}</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4477\" data-name=\"Container\">\n <div className=\"bg-[rgba(233,70,151,0.1)] content-stretch flex flex-col items-start px-[8px] py-[4px] relative rounded-[4px] shrink-0\" data-node-id=\"566:4478\" data-name=\"Overlay\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#e94697] text-[10px] tracking-[1px] uppercase whitespace-nowrap\" data-node-id=\"566:4479\">\n <p className=\"leading-[15px]\">2 MODULES</p>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4480\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col isolate items-start overflow-clip p-px relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4482\" data-name=\"Card 3: RECENTRER\">\n <div className=\"h-[72px] relative shrink-0 w-full z-[2]\" data-node-id=\"566:4483\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start justify-center overflow-clip relative rounded-[inherit] size-full\">\n <div className=\"bg-[rgba(212,184,45,0.2)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:4484\" data-name=\"Image\" />\n <div className=\"absolute bg-gradient-to-t from-[#0f172a] inset-0 to-[rgba(15,23,42,0)] via-3/4 via-[rgba(15,23,42,0)]\" data-node-id=\"566:4485\" data-name=\"Gradient\" />\n <div className=\"absolute bottom-[16px] content-stretch flex gap-[12px] items-center left-[16px]\" data-node-id=\"566:4486\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(212,184,45,0.2)] border border-[rgba(212,184,45,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"566:4487\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4488\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:4489\" data-name=\"SunHorizon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSunHorizon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4491\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#d4b82d] text-[16px] tracking-[0.4px] whitespace-nowrap\" data-node-id=\"566:4492\">\n <p className=\"leading-[24px]\">RÉVEIL INTELLIGENT</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full z-[1]\" data-node-id=\"566:4493\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start px-[20px] py-[16px] relative size-full\">\n <div className=\"content-stretch flex h-[41px] items-start relative shrink-0 w-full\" data-node-id=\"566:4494\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-[1_0_0] flex-col font-['SF_Pro:Regular'] font-normal h-[32px] justify-center leading-[0] min-w-px relative text-[#bec8cf] text-[16px]\" data-node-id=\"566:4495\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Un réveil progressif calculé sur votre phase de sommeil idéal</p>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4496\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] h-[137px] items-start relative shrink-0 w-[350px]\" data-node-id=\"566:4498\" data-name=\"Mes sessions Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4499\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4500\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[11px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[16px] w-[102px]\" data-node-id=\"566:4501\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Mes sessions</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center justify-center relative shrink-0\" data-node-id=\"566:4502\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[8px] justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[1px] uppercase w-[63px]\" data-node-id=\"566:4503\">\n <p className=\"leading-[15px]\">VOIR TOUT</p>\n </div>\n </div>\n </div>\n <div className=\"h-[126px] overflow-auto relative shrink-0 w-full\" data-node-id=\"566:4504\" data-name=\"Container\">\n <div className=\"absolute backdrop-blur-[6px] bg-gradient-to-r border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t bottom-[16px] content-stretch flex flex-col from-[rgba(74,184,232,0.08)] gap-[4px] items-start left-0 pl-[20px] pr-[17px] py-[17px] rounded-[12px] to-[rgba(74,184,232,0)] top-0 w-[256px]\" data-node-id=\"566:4505\" data-name=\"Session 1\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4506\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex font-['Inter:Regular'] font-normal items-start justify-between leading-[0] not-italic relative size-full whitespace-nowrap\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[#79d3ff] text-[10px]\" data-node-id=\"566:4507\">\n <p className=\"leading-[15px]\">COHÉRENCE</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[#bec8cf] text-[12px]\" data-node-id=\"566:4508\">\n <p className=\"leading-[18px]\">Hier</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4509\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] w-full\" data-node-id=\"566:4510\">\n <p className=\"leading-[24px]\">Session Équilibre</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4511\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[13.333px]\" data-node-id=\"566:4512\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4514\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4515\">\n <p className=\"leading-[18px]\">5 min</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[4px] items-start px-[4px] relative shrink-0 w-[12px]\" data-node-id=\"566:4516\" data-name=\"Margin\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[4px]\" data-node-id=\"566:4517\" data-name=\"Background\" />\n </div>\n <div className=\"h-[12.233px] relative shrink-0 w-[13.333px]\" data-node-id=\"566:4518\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4520\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:4521\">\n <p className=\"leading-[18px]\">VFC +12%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[6px] bg-[#0f172a] border-[rgba(121,211,255,0.2)] border-b border-l-4 border-r border-solid border-t bottom-[16px] content-stretch flex flex-col gap-[4px] items-start left-[272px] pl-[20px] pr-[17px] py-[17px] rounded-[12px] top-0 w-[256px]\" data-node-id=\"566:4522\" data-name=\"Session 2\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4523\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex font-['Inter:Regular'] font-normal items-start justify-between leading-[0] not-italic relative size-full text-[#bec8cf] whitespace-nowrap\">\n <div className=\"flex flex-col justify-center relative shrink-0 text-[10px]\" data-node-id=\"566:4524\">\n <p className=\"leading-[15px]\">ANCRAGE</p>\n </div>\n <div className=\"flex flex-col justify-center relative shrink-0 text-[12px]\" data-node-id=\"566:4525\">\n <p className=\"leading-[18px]\">Lundi</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4526\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pt-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] w-full\" data-node-id=\"566:4527\">\n <p className=\"leading-[24px]\">Sommeil Profond</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4528\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[13.333px]\" data-node-id=\"566:4529\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4531\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4532\">\n <p className=\"leading-[18px]\">10 min</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[4px] items-start px-[4px] relative shrink-0 w-[12px]\" data-node-id=\"566:4533\" data-name=\"Margin\">\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[4px]\" data-node-id=\"566:4534\" data-name=\"Background\" />\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[16px]\" data-node-id=\"566:4535\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4537\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4538\">\n <p className=\"leading-[18px]\">Mode Doux</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:4556\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4557\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:4558\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4560\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:4561\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4562\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:4563\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4565\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4566\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4567\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:4568\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4570\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4571\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4572\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:4573\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4575\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4576\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4577\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:4578\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4580\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4581\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:4582":"const imgContainer = \"https://www.figma.com/api/mcp/asset/c24d7c70-aad2-48c7-8758-86ea0de311b2.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/c910fcd2-9554-440e-b67c-50048b5fa54a.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/89990c71-9b6d-4e1e-a59d-e31f11932598.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/043c0c5f-fdb7-4d7a-b93f-49672c28cc4c.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/c05784b6-1a3a-4b2c-85ae-28336ee85d2f.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/31f70818-515e-41e8-8340-011bd1644af7.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/dfef59a7-a03c-4f9c-859c-1f1e0061ffdb.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/7f24373c-36d7-4653-978a-0d72ee66a37c.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/455e2ee7-10f8-45d1-881a-16df32f3deda.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/d3d7390a-b8a2-46b0-a832-8e6d4a238802.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/ee4c398e-f0b5-4be9-a5f9-4138aeeac015.svg\";\nconst imgContainer8 = \"https://www.figma.com/api/mcp/asset/410eda30-3fee-453b-9acf-27c33048fb8a.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/8098c853-27d3-421a-ad28-0b363374a590.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/e20e8b3e-1224-4c19-9359-62015f0c419e.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/7b99aa27-e110-458d-8227-87838cd706a9.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/9f0cc002-f978-470b-af06-a894e7994ac7.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/554f936d-fdda-433a-a3d4-028538b15fc8.svg\";\n\nexport default function VosOutilsRespirez() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:4582\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - respirez\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:4583\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4584\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:4585\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4587\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:4588\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:4589\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:4590\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:4592\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[6.75px] items-start relative shrink-0 w-full\" data-node-id=\"566:4593\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4594\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4595\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"566:4596\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Respirer</p>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:4597\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4599\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"566:4600\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Ma Cohérence est le point de départ pour stabiliser</p>\n <p className=\"leading-[20px] mb-0\">votre système nerveux et améliorer votre résilience</p>\n <p className=\"leading-[20px]\">au stress.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:4601\" data-name=\"Featured Section: Ma Cohérence\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4602\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] tracking-[1.2px] uppercase w-full\" data-node-id=\"566:4603\">\n <p className=\"leading-[16px]\">POINT DE DÉPART</p>\n </div>\n </div>\n <div className=\"bg-[#0f172a] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4604\" data-name=\"Background+Border+Shadow+OverlayBlur\">\n <div className=\"absolute bg-[rgba(74,184,232,0.1)] blur-[32px] right-[-48px] rounded-[9999px] size-[192px] top-[-48px]\" data-node-id=\"566:4605\" data-name=\"Overlay+Blur\" />\n <div className=\"relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4606\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[8px] items-start relative size-full\">\n <div className=\"content-stretch flex items-start justify-between relative shrink-0 w-full\" data-node-id=\"566:4607\" data-name=\"Container\">\n <div className=\"h-[36px] relative shrink-0 w-[41px]\" data-node-id=\"566:4608\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0 size-[22px]\" data-node-id=\"566:4610\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[8px] relative shrink-0 w-full\" data-node-id=\"566:4611\" data-name=\"Heading 4\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[24px] tracking-[-0.24px] w-full\" data-node-id=\"566:4612\">\n <p className=\"leading-[32px]\">Ma Cohérence</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[39px] items-start pb-[8px] relative shrink-0 w-full\" data-node-id=\"566:4613\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[31px] justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"566:4614\">\n <p className=\"leading-[20px]\">Entraînez-vous à synchroniser votre respiration sur votre cœur.</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch flex gap-[8px] items-center justify-center py-[12px] relative rounded-[8px] shrink-0 w-full\" data-node-id=\"566:4615\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:4616\">\n <p className=\"leading-[16px]\">COMMENCER LA SESSION</p>\n </div>\n <div className=\"h-[8.167px] relative shrink-0 w-[6.417px]\" data-node-id=\"566:4617\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:4619\" data-name=\"Guided Protocols Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4620\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] tracking-[1.2px] uppercase w-full\" data-node-id=\"566:4621\">\n <p className=\"leading-[16px]\">PROTOCOLES GUIDÉS</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:4622\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.06)] border-solid content-stretch flex gap-[16px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4623\" data-name=\"Protocol 1\">\n <div className=\"bg-[rgba(74,184,232,0.05)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"566:4624\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"h-[17px] relative shrink-0 w-[20px]\" data-node-id=\"566:4625\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"566:4627\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4628\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4629\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:4630\">\n <p className=\"leading-[24px]\">Cohérence cardiaque</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4631\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"566:4632\">\n <p className=\"leading-[20px]\">Inspirez et expirez, 5 secondes chacun</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4633\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex gap-[16px] items-center pl-[20px] pr-[17px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4635\" data-name=\"Protocol 2\">\n <div className=\"bg-[rgba(74,184,232,0.05)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"566:4636\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"h-[17px] relative shrink-0 w-[20px]\" data-node-id=\"566:4637\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"566:4639\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4640\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[219px]\" data-node-id=\"566:4641\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:4642\">\n <p className=\"leading-[24px]\">Calme express</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4643\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"566:4644\">\n <p className=\"leading-[20px]\">Deux inspirations, une longue expiration</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4645\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.06)] border-solid content-stretch flex gap-[16px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4647\" data-name=\"Protocol 3\">\n <div className=\"bg-[rgba(74,184,232,0.1)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"566:4648\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"relative shrink-0 size-[18px]\" data-node-id=\"566:4649\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"566:4651\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4652\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4653\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:4654\">\n <p className=\"leading-[24px]\">4·4·4·4 - Équilibre</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4655\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#b3bdc5] text-[12px] w-full\" data-node-id=\"566:4656\">\n <p className=\"leading-[20px]\">Un carré respiratoire régulier</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4657\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border border-[rgba(255,255,255,0.06)] border-solid content-stretch flex gap-[16px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4659\" data-name=\"Protocol 4\">\n <div className=\"bg-[rgba(74,184,232,0.1)] border border-[rgba(74,184,232,0.3)] border-solid relative rounded-[9999px] shrink-0 size-[48px]\" data-node-id=\"566:4660\" data-name=\"Overlay+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"h-[20px] relative shrink-0 w-[21px]\" data-node-id=\"566:4661\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n </div>\n </div>\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"566:4663\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:4664\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4665\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:4666\">\n <p className=\"leading-[24px]\">4·7·8 - Sommeil</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4667\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"566:4668\">\n <p className=\"leading-[20px]\">Inspiration, rétention, expiration</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"566:4669\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[rgba(7,14,25,0.5)] border border-[rgba(255,255,255,0.2)] border-dashed content-stretch flex gap-[11.99px] items-center justify-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4671\" data-name=\"Create Protocol\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:4672\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer8} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4674\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[12px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:4675\">\n <p className=\"leading-[16px]\">Créer mon protocole</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:4676\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4677\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:4678\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4680\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:4681\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4682\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:4683\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4685\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4686\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4687\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:4688\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4690\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4691\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4692\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:4693\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4695\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4696\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4697\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:4698\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4700\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4701\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:4702":"const imgInfo = \"https://www.figma.com/api/mcp/asset/77afd14a-f053-4dcb-ad00-5e58bb9d2cc7.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:4702\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:4703\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4704\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:4705\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[285px]\" data-node-id=\"566:4707\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"566:4708\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`La respiration est la seule fonction automatique que l'on peut piloter volontairement, et le levier le`}</p>\n <p className=\"leading-[20px] mb-0\">{`plus direct sur le système nerveux. Ralentir et allonger le souffle sollicite `}</p>\n <p className=\"leading-[20px] mb-0\">{`le nerf vague et oriente l'organisme vers la récupération. `}</p>\n <p className=\"leading-[20px]\">Ma Cohérence sert de point de départ : on y repère son rythme, avant de le travailler avec les protocoles guidés.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:4759":"const imgEllipse1 = \"https://www.figma.com/api/mcp/asset/f84e2237-165b-4d99-a799-5ad6080cc7d0.png\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/fe0df552-1747-43f1-88bd-12dcc000589d.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/48ee9240-5975-4658-8fe4-ed9798eea697.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/85124d00-76a3-4859-ae08-6c8bee496985.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/3c97d299-918f-4d9d-87d6-7dcf85d13f5e.svg\";\n\nexport default function MaCoherencePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-center relative size-full\" data-node-id=\"566:4759\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ma Cohérence - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[929px] items-center max-w-[448px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:4760\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col h-[58px] items-start pb-[32px] relative shrink-0 w-[362px]\" data-node-id=\"566:4761\" data-name=\"Header Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"566:4762\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:4763\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"566:4764\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Ma Cohérence</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:4765\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.7)] text-center tracking-[0.3px] uppercase whitespace-nowrap\" data-node-id=\"566:4766\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Point de départ</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-h-[280px] max-w-[280px] pb-[32px] relative shrink-0 size-[280px]\" data-node-id=\"566:4767\" data-name=\"Central Stylized Illustration:margin\">\n <div className=\"content-stretch flex items-center justify-center max-w-[280px] py-[12px] relative shrink-0 w-full\" data-node-id=\"566:4768\" data-name=\"Central Stylized Illustration\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"566:4769\" data-name=\"Atmospheric background effect\" />\n <div className=\"backdrop-blur-[12px] bg-[rgba(12,25,39,0.4)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.2)] shrink-0 size-[256px]\" data-node-id=\"566:4770\" data-name=\"Overlay+Border+Shadow+OverlayBlur\">\n <div className=\"absolute flex inset-[calc(32.11%-0.36px)_calc(37.33%-0.25px)_calc(46.72%-0.07px)_calc(42.87%-0.14px)] items-center justify-center\" data-node-id=\"566:4771\" style={{ containerType: \"size\" }}>\n <div className=\"flex-none h-[hypot(38.4763cqw,70.7047cqh)] rotate-[-26.98deg] w-[hypot(61.5237cqw,-29.2953cqh)]\">\n <div className=\"bg-[#79d3ff] blur-[2.95px] opacity-35 relative rounded-[9999px] size-full\" data-name=\"Pulsing point indicator\" />\n </div>\n </div>\n <div className=\"mix-blend-screen relative shrink-0 size-[256px]\" data-node-id=\"566:4772\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" height=\"256\" src={imgEllipse1} width=\"256\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[431px] items-center relative shrink-0\" data-node-id=\"566:4773\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[331px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:4774\" data-name=\"Instructions List:margin\">\n <div className=\"content-stretch flex flex-col h-[87px] items-start relative shrink-0 w-full\" data-node-id=\"566:4775\" data-name=\"Instructions List\">\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] h-[87px] items-center p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4776\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:4777\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"h-[15.562px] relative shrink-0 w-[14.013px]\" data-node-id=\"566:4778\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4780\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"566:4781\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Posez le doigt sur la caméra. `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Votre cohérence cardiaque s'affiche `}</p>\n <p className=\"leading-[20px] whitespace-pre\">en temps réel.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[332px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:4782\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:4783\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4784\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:4785\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[298px] relative shrink-0 w-[285px]\" data-node-id=\"566:4787\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"566:4788\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Quand vous respirez lentement et régulièrement, votre rythme cardiaque monte légèrement à l'inspiration et redescend à l'expiration. `}</p>\n <p className=\"leading-[20px] mb-0\">{`En calant votre souffle sur l'anneau, cette oscillation du cœur se synchronise avec celle de la respiration : `}</p>\n <p className=\"leading-[20px] mb-0\">{`c'est la cohérence cardiaque. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px] mb-0\">{`Cette mise en phase sollicite le nerf vague, amplifie la variabilité cardiaque et favorise un état de calme et de récupération. `}</p>\n <p className=\"leading-[20px]\">{`Plus vous prolongez cet état, plus votre système apprend à y revenir. `}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-t bottom-0 content-stretch flex flex-col from-[#0c141f] items-start left-0 p-[20px] to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"566:4789\" data-name=\"Fixed Footer Actions\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:4790\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4791\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[12px] shadow-[0px_10px_15px_-3px_rgba(121,211,255,0.2)]\" data-node-id=\"566:4792\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"566:4793\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[32px] items-center justify-center py-[12px] relative shrink-0 w-full\" data-node-id=\"566:4794\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:4795\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Annuler</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:4796\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4797\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:4798\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4800\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:4801\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:4802\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:4803\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:4805":"const imgContainer = \"https://www.figma.com/api/mcp/asset/e951c0fa-7a65-4885-b755-ba1832adfb2c.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/8b36cba7-92ea-4fff-af51-bbf0aebab202.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/73f35be9-9987-4eb8-8480-9a0d23da50b3.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/7543ab60-bfe7-4510-ae4a-1df655f5dab8.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/bb2ed8e6-6b4b-40bb-a280-96b7730276e7.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/5f1752ac-39b8-4bba-b9e9-f6f5737ef895.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/91be093a-f3fd-4e45-8f7f-88ae96517036.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/b480e007-8de3-4113-9af2-0b4f9a3f05eb.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/8a7a8412-27a4-47f4-a898-9ac8c0330dfa.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/2514a4ac-cc6c-4538-a04d-76c0d1b3be62.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/e3802695-bb2b-4334-b2da-e843fc9af09d.svg\";\n\nexport default function MaCoherenceRestitution() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:4805\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ma Cohérence - Restitution\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:4806\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4807\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:4808\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4810\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:4811\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:4812\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:4813\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:4815\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4816\" data-name=\"Success Header:margin\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-center relative shrink-0\" data-node-id=\"566:4817\" data-name=\"Success Header\">\n <div className=\"bg-[rgba(121,211,255,0.1)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[64px]\" data-node-id=\"566:4818\" data-name=\"Overlay+Border\">\n <div className=\"relative shrink-0 size-[25px]\" data-node-id=\"566:4819\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pt-[12px] relative shrink-0 w-full\" data-node-id=\"566:4821\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"566:4822\">\n <p className=\"leading-[32px]\">Séance terminée</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:4823\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] text-center whitespace-nowrap\" data-node-id=\"566:4824\">\n <p className=\"leading-[20px]\">Félicitations pour ce moment de calme.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4825\" data-name=\"Hero Metric:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[8px] items-start overflow-clip p-[25px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4826\" data-name=\"Hero Metric\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4827\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:4828\">\n <p className=\"leading-[16px]\">TEMPS EN COHÉRENCE</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4829\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"content-stretch drop-shadow-[0px_0px_6px_rgba(115,209,255,0.3)] flex flex-col items-center relative shrink-0\" data-node-id=\"566:4830\" data-name=\"Shadow\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[48px] text-center tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"566:4831\">\n <p className=\"leading-[56px]\">4 min 30</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-b from-[rgba(74,184,232,0.15)] inset-0 opacity-40 to-[rgba(74,184,232,0)]\" data-node-id=\"566:4832\" data-name=\"Gradient\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:4833\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:4834\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:4835\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:4836\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:4837\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:4838\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:4839\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4840\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:4841\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4842\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:4843\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:4844\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:4846\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4847\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:4848\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:4849\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:4851\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4852\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:4853\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:4854\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4856\" data-name=\"Action Section:margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:4857\" data-name=\"Action Section\">\n <div className=\"bg-[#232a36] content-stretch flex h-[56px] items-center justify-center relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4858\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"566:4859\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Retour</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:4860\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4861\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:4862\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4864\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:4865\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4866\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:4867\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4869\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4870\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4871\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:4872\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4874\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4875\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4876\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:4877\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4879\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4880\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4881\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:4882\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4884\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:4885\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:4886":"const imgContainer = \"https://www.figma.com/api/mcp/asset/9c64db33-0937-4d18-b8f4-07cb25b54b3d.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/325d6b21-04db-45c2-a58b-119ed92d1a55.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/41cc4a99-d3e5-4d21-a2c9-fb3d5958a6ac.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/284d9c5b-fdc8-4d19-b425-abca781420ee.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/3fc6884a-fe35-4e4a-9163-d5481c5a2431.svg\";\n\nexport default function MaCoherenceEnCours() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:4886\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ma Cohérence - En cours\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-h-px overflow-clip pb-[20px] pt-[96px] px-[20px] relative w-[402px]\" data-node-id=\"566:4887\" data-name=\"Main Content: Biofeedback Orb Canvas\">\n <div className=\"aspect-square content-stretch flex items-center justify-center max-w-[320px] py-[64px] relative shrink-0\" data-node-id=\"566:4888\" data-name=\"The Sync Orb Complex\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.2)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:4889\" data-name=\"Outer Guide Ring (Target Rhythm)\" />\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] blur-[32px] inset-[7.5%] opacity-0 rounded-[9999px]\" data-node-id=\"566:4890\" data-name=\"Inner Glowing Aura (Synchronization Intensity)\" />\n <div className=\"absolute border border-[rgba(255,255,255,0.05)] border-dashed inset-0 rounded-[9999px]\" data-node-id=\"566:4891\" data-name=\"Orbital Particle Decoration\" />\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.1)] border-solid content-stretch flex flex-col items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[192px]\" data-node-id=\"566:4892\" data-name=\"Heart Center (Real-time Beats)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4893\" data-name=\"Time Accumulator\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start pb-[4px] relative shrink-0\" data-node-id=\"566:4894\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:4895\">\n <p className=\"leading-[16px]\">COHÉRENCE</p>\n </div>\n </div>\n <div className=\"content-stretch drop-shadow-[0px_0px_6px_rgba(121,211,255,0.5)] flex flex-col items-start relative shrink-0\" data-node-id=\"566:4896\" data-name=\"Shadow\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[48px] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"566:4897\">\n <p className=\"leading-[56px]\">04:22</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[8px] relative shrink-0\" data-node-id=\"566:4898\" data-name=\"Margin\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"566:4899\" data-name=\"Container\">\n <div className=\"h-[10.704px] relative shrink-0 w-[11.667px]\" data-node-id=\"566:4900\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4902\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:4903\">\n <p className=\"leading-[20px]\">72 BPM</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 absolute bg-[#79d3ff] left-1/2 rounded-[9999px] shadow-[0px_0px_8px_0px_#79d3ff] size-[8px] top-[-4px]\" data-node-id=\"566:4904\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[64px] relative shrink-0\" data-node-id=\"566:4905\" data-name=\"Instructional Guidance:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0\" data-node-id=\"566:4906\" data-name=\"Instructional Guidance\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:4907\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:4908\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Respirez avec l'anneau. `}</p>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">Quand votre cœur suit,</p>\n <p className=\"leading-[28px] whitespace-pre\">vous êtes synchronisé.</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"566:4909\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"566:4910\" data-name=\"Background\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"566:4911\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"566:4912\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col isolate items-center pb-[40px] pt-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:4913\" data-name=\"Footer - Controls Area\">\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.1)] border-solid content-stretch flex flex-col items-center justify-center max-w-[384px] overflow-clip px-px py-[17px] relative rounded-[12px] shrink-0 w-full z-[2]\" data-node-id=\"566:4914\" data-name=\"Button - Close/End Action\">\n <div className=\"absolute bg-gradient-to-r from-[rgba(255,255,255,0)] inset-[0_348px_0_-348px] to-[rgba(255,255,255,0)] via-1/2 via-[rgba(255,255,255,0.05)]\" data-node-id=\"566:4915\" data-name=\"Gradient\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:4916\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:4917\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">TERMINER LA SESSION</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[24px] relative shrink-0 z-[1]\" data-node-id=\"566:4918\" data-name=\"Margin\">\n <div className=\"content-stretch flex gap-[24px] items-center relative shrink-0\" data-node-id=\"566:4919\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center opacity-60 relative shrink-0\" data-node-id=\"566:4920\" data-name=\"Button\">\n <div className=\"h-[14.583px] relative shrink-0 w-[15px]\" data-node-id=\"566:4921\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:4923\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"566:4924\">\n <p className=\"leading-[15px]\">GUIDE AUDIO</p>\n </div>\n </div>\n </div>\n <div className=\"bg-[rgba(255,255,255,0.1)] h-[12px] relative shrink-0 w-px\" data-node-id=\"566:4925\" data-name=\"Vertical Divider\" />\n <div className=\"content-stretch flex gap-[8px] items-center opacity-60 relative shrink-0\" data-node-id=\"566:4926\" data-name=\"Button\">\n <div className=\"h-[15px] relative shrink-0 w-[20px]\" data-node-id=\"566:4927\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:4929\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"566:4930\">\n <p className=\"leading-[15px]\">HAPTIQUE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:4931\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4932\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:4933\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4935\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:4936\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:4937\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:4938\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:4940":"const imgContainer = \"https://www.figma.com/api/mcp/asset/4d94f1a1-9f93-4632-83a5-1122816ea714.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/b2a37587-1007-46d5-80c1-1ed66c299aed.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/a1ca09b9-d311-4353-96fd-386aeb46b080.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/a4aad203-6cf6-4251-b800-1d870e3ca66e.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/b288227a-0e54-413f-a48a-2dea4169beb9.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/5b9a450f-993f-491b-b8b9-d7626b36dd2d.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/85d7a53c-39c1-4186-a1dc-1130b395786a.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/3690cf39-1da2-4b18-b7d3-27e87b886ef1.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/5b58aed2-d5ec-4c0a-80f9-4c4bc96f64e8.svg\";\n\nexport default function CreerMonProtocole() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:4940\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Créer mon protocole\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:4941\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:4942\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:4943\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:4945\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:4946\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:4947\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:4948\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[999px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:4950\" data-name=\"Main Content\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:4951\" data-name=\"Section - Header Text\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] text-center whitespace-nowrap\" data-node-id=\"566:4952\">\n <p className=\"leading-[24px] mb-0\">Réglez chaque temps du cycle et la durée de</p>\n <p className=\"leading-[24px]\">la séance.</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-full\" data-node-id=\"566:4953\" data-name=\"Settings Section\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:4954\" data-name=\"Step Controls Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4955\" data-name=\"Inspiration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4956\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4957\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:4958\">\n <p className=\"leading-[16px]\">INSPIRATION</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4959\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:4960\">\n <p className=\"leading-[20px]\">4s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4961\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:4962\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[72.5px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:4963\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4964\" data-name=\"Rétention Haute\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4965\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4966\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:4967\">\n <p className=\"leading-[16px]\">RÉTENTION HAUTE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4968\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:4969\">\n <p className=\"leading-[20px]\">2s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4970\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:4971\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[58px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:4972\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[12px] items-start p-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4973\" data-name=\"Expiration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4974\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4975\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:4976\">\n <p className=\"leading-[16px]\">EXPIRATION</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4977\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:4978\">\n <p className=\"leading-[20px]\">6s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4979\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:4980\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[116px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:4981\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[rgba(121,211,255,0.4)] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col gap-[12px] items-start pl-[20px] pr-[17px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4982\" data-name=\"Rétention Basse\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4983\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4984\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:4985\">\n <p className=\"leading-[16px]\">RÉTENTION BASSE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4986\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:4987\">\n <p className=\"leading-[20px]\">0s</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4988\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:4989\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-0 rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:4990\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[16px] items-start p-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:4991\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:4992\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:4993\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4995\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:4996\">\n <p className=\"leading-[24px]\">Durée de la séance</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-end min-w-[35.880001068115234px] pl-[70.359px] relative\" data-node-id=\"566:4997\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:4998\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:4999\">\n <p className=\"leading-[20px]\">5 min</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5000\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:5001\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:5002\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start px-[20px] relative shrink-0 w-[390px]\" data-node-id=\"566:5003\" data-name=\"Nav - Bottom Action Buttons\">\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_7.5px_rgba(74,184,232,0.3)] flex items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5004\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:5005\">\n <p className=\"leading-[16px]\">ENREGISTRER</p>\n </div>\n </div>\n <div className=\"border border-[#3e484e] border-solid content-stretch flex items-center justify-center px-px py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5006\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:5007\">\n <p className=\"leading-[16px]\">TESTER MAINTENANT</p>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[191px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:5008\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5009\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5010\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:5011\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[100px] relative shrink-0 w-[285px]\" data-node-id=\"566:5013\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[157px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:5014\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Le rapport entre inspiration et expiration `}</p>\n <p className=\"leading-[20px] mb-0\">{`décide de l'effet : une expiration plus `}</p>\n <p className=\"leading-[20px] mb-0\">{`longue apaise, des temps égaux `}</p>\n <p className=\"leading-[20px] mb-0\">{`équilibrent, des temps courts `}</p>\n <p className=\"leading-[20px] mb-0\">{`entretiennent la vigilance. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Comprendre ce principe permet de `}</p>\n <p className=\"leading-[20px] mb-0\">{`composer un rythme adapté à ce que `}</p>\n <p className=\"leading-[20px]\">vous recherchez.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:5015\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5016\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:5017\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5019\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:5020\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5021\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:5022\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5024\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5025\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5026\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:5027\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5029\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5030\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5031\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:5032\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5034\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5035\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5036\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:5037\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5039\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5040\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5041":"const imgContainer = \"https://www.figma.com/api/mcp/asset/9d6599db-817e-492a-9907-e24126a7f064.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/9269d62b-03a9-449d-9ded-5f5671922c98.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/7771d959-bab7-4834-88d0-ae46c12f2698.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/65b2f061-104c-40a7-85ee-fdd7d15f26eb.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/f3c8c716-430b-4cbf-ba3e-d059e61d435c.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/ff95c553-6866-4d37-b646-58afc2f66908.svg\";\nconst imgIcon1 = \"https://www.figma.com/api/mcp/asset/e084b525-f60f-4022-a190-e9a0b10db0e9.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/52acaf2c-e7f6-490e-9e1f-8a0eb87473e1.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/63e7438e-d3ec-45a3-b8ed-651492babc7c.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/49b4c8d1-ef18-4bd0-841c-0daa9c9bf0b8.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/fd4315ca-9e69-4d8b-a18e-310388328bbb.svg\";\nconst imgContainer8 = \"https://www.figma.com/api/mcp/asset/d21ea81d-82fa-416c-8086-2fb54f89718b.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/9631d2f5-ca06-497e-9085-b26905ff759b.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/4eaf894a-cb09-4c16-bd46-bab49cd7261a.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/103411fe-5fe5-4def-b9a8-51b6d61327ec.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/6e8eb07f-6855-4e1a-b55f-ac018642c27c.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/eb1ed266-35ef-482f-96c3-50c2fb75017b.svg\";\n\nexport default function CoherenceCardiaqueFin() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5041\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Cohérence Cardiaque - Fin\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5042\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5043\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5044\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5046\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5047\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5048\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5049\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5051\" data-name=\"Main Content\">\n <div className=\"content-stretch flex flex-col isolate items-center relative shrink-0 w-full\" data-node-id=\"566:5052\" data-name=\"Hero Section\">\n <div className=\"content-stretch flex flex-col h-[173px] items-start relative shrink-0 w-[192px] z-[2]\" data-node-id=\"566:5053\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col h-[173px] items-start justify-center relative shrink-0 w-[192px]\" data-node-id=\"566:5054\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-[1_0_0] items-center justify-center min-h-px relative w-full\" data-node-id=\"566:5055\" data-name=\"Central Icon\">\n <div className=\"bg-[rgba(74,184,232,0.1)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_15px_0px_rgba(115,209,255,0.15)] shrink-0 size-[128px]\" data-node-id=\"566:5056\" data-name=\"Overlay+Border+Shadow\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:5057\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-center justify-center relative shrink-0 z-[1]\" data-node-id=\"566:5059\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-[16px] items-center relative shrink-0 w-full\" data-node-id=\"566:5060\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5061\">\n <p className=\"leading-[16px]\">Séance terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:5062\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:5063\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5065\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5066\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-baseline justify-center relative shrink-0 w-full\" data-node-id=\"566:5067\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic opacity-50 relative shrink-0 text-[#bec8cf] text-[16px] text-center whitespace-nowrap\" data-node-id=\"566:5068\">\n <p className=\"[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-from-font decoration-solid leading-[24px] line-through\">54 ms</p>\n </div>\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"566:5069\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[48px] text-center tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"566:5070\">\n <p className=\"leading-[56px]\">61 ms</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[16px] relative shrink-0 w-full\" data-node-id=\"566:5071\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] text-center whitespace-nowrap\" data-node-id=\"566:5072\">\n <p className=\"leading-[26px] mb-0 whitespace-pre\">{`Votre progrès se lit dans la durée : `}</p>\n <p className=\"leading-[26px] whitespace-pre\">suivez votre tendance dans Mon évolution.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:5073\" data-name=\"SNA Analysis Bento Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.8)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[24px] items-start p-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5074\" data-name=\"SNA Visualization Card\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5075\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5076\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5077\">\n <p className=\"leading-[16px]\">Analyse du SNA</p>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:5078\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5080\" data-name=\"Axes Comparatifs\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[32px] items-start py-[16px] relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"566:5081\" data-name=\"Avant\">\n <div className=\"content-stretch flex items-start justify-between relative shrink-0 w-full\" data-node-id=\"566:5082\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"566:5083\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5084\">\n <p className=\"leading-[15px]\">SYMPATHIQUE</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"566:5085\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5086\">\n <p className=\"leading-[15px]\">ÉTAT INITIAL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"566:5087\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5088\">\n <p className=\"leading-[15px]\">PARASYMPATHIQUE</p>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-r from-[#f43f5e] h-[8px] opacity-40 relative rounded-[9999px] shrink-0 to-[#4ab8e8] via-1/2 via-[#19202c] w-full\" data-node-id=\"566:5089\" data-name=\"Gradient\" />\n <div className=\"absolute bg-[#dce3f3] border-2 border-[#0c141f] border-solid h-[16px] left-[35%] right-[60%] rounded-[9999px] top-[19px]\" data-node-id=\"566:5090\" data-name=\"Current State Indicator\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[16px] left-[-2px] right-[-2px] rounded-[9999px] shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.1)] top-[-2px]\" data-node-id=\"566:5091\" data-name=\"Current State Indicator:shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full\" data-node-id=\"566:5092\" data-name=\"Après\">\n <div className=\"content-stretch flex items-start justify-between relative shrink-0 w-full\" data-node-id=\"566:5093\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"566:5094\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5095\">\n <p className=\"leading-[15px]\">ACTIVATION</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"566:5096\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5097\">\n <p className=\"leading-[15px]\">ÉTAT ACTUEL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative self-stretch shrink-0\" data-node-id=\"566:5098\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5099\">\n <p className=\"leading-[15px]\">RÉCUPÉRATION</p>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-r from-[#f43f5e] h-[8px] relative rounded-[9999px] shrink-0 to-[#4ab8e8] via-1/2 via-[#19202c] w-full\" data-node-id=\"566:5100\" data-name=\"Gradient\" />\n <div className=\"absolute bg-[#79d3ff] border-2 border-[#0c141f] border-solid h-[20px] left-[69.06%] right-[24.69%] rounded-[9999px] shadow-[0px_0px_15px_0px_rgba(115,209,255,0.15)] top-[17px]\" data-node-id=\"566:5101\" data-name=\"Current State Indicator with Glow\" />\n </div>\n </div>\n </div>\n <div className=\"bg-[rgba(74,184,232,0.05)] border-[#4ab8e8] border-l-4 border-solid relative rounded-br-[8px] rounded-tr-[8px] shrink-0 w-full\" data-node-id=\"566:5102\" data-name=\"Overlay+VerticalBorder\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[15px] items-start pl-[16px] pr-[12px] py-[12px] relative size-full\">\n <div className=\"relative self-stretch shrink-0\" data-node-id=\"566:5103\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"h-[17.025px] relative shrink-0 w-[17.043px]\" data-node-id=\"566:5104\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon1} />\n </div>\n </div>\n </div>\n <div className=\"relative self-stretch shrink-0\" data-node-id=\"566:5105\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal h-[49px] justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] w-[254px]\" data-node-id=\"566:5106\">\n <p className=\"leading-[20px]\">Le système parasympathique est désormais dominant, favorisant la réparation cellulaire et le calme mental.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:5107\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:5108\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:5109\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:5110\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5111\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:5112\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:5113\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5114\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5115\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5116\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5117\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5118\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5120\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5121\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5122\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5123\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5125\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5126\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5127\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5128\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5130\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5131\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5132\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5133\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"566:5134\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"566:5135\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5137\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"566:5138\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"566:5139\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer8} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:5141\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5142\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:5143\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5145\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:5146\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5147\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:5148\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5150\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5151\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5152\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:5153\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5155\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5156\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5157\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:5158\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5160\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5161\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5162\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:5163\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5165\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5166\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5167":"const imgContainer = \"https://www.figma.com/api/mcp/asset/3a8eb05e-7f75-4a67-bded-15fff57f6a4c.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/70036a2b-11ef-4213-be93-8a12fabb323a.svg\";\n\nexport default function CoherenceCardiaqueSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5167\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Cohérence Cardiaque - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5168\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5169\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5170\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5172\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5173\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5174\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5175\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5177\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col items-start py-[24px] relative shrink-0\" data-node-id=\"566:5178\" data-name=\"Phase Indicator:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5179\" data-name=\"Phase Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5180\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] text-shadow-[0px_0px_8px_rgba(121,211,255,0.6)] tracking-[2.4px] whitespace-nowrap\" data-node-id=\"566:5181\">\n <p className=\"leading-[16px]\">INSPIREZ</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[12px] items-start pt-[8px] relative shrink-0 w-[48px]\" data-node-id=\"566:5182\" data-name=\"Margin\">\n <div className=\"bg-[rgba(121,211,255,0.2)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[48px]\" data-node-id=\"566:5183\" data-name=\"Overlay\">\n <div className=\"bg-[#79d3ff] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:5184\" data-name=\"Background\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[377px] relative shrink-0 w-full\" data-node-id=\"566:5185\" data-name=\"Main Content: Immersive Orb\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.05)] blur-[50px] left-1/2 rounded-[9999px] size-[450px] top-[calc(50%+0.5px)]\" data-node-id=\"566:5186\" data-name=\"Subtle Background Glow\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute flex items-center justify-center left-[calc(50%-0.5px)] size-[325px] top-1/2\" data-node-id=\"566:5187\">\n <div className=\"flex-none scale-x-160 scale-y-160\">\n <div className=\"content-stretch flex items-center justify-center relative rounded-[224px] shadow-[0px_0px_100px_0px_rgba(121,211,255,0.4)] size-[203.125px]\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 203.13 203.13' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(14.363 0 0 14.363 101.56 101.56)'><stop stop-color='rgba(115,209,255,0.4)' offset='0'/><stop stop-color='rgba(115,209,255,0.05)' offset='0.7'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background+Shadow\">\n <div className=\"bg-[#79d3ff] blur-[10px] opacity-80 relative rounded-[96px] shrink-0 size-[120px]\" data-node-id=\"566:5188\" data-name=\"Background+Blur\" />\n <div className=\"absolute border border-[rgba(121,211,255,0.2)] border-solid inset-[0_0.13px_0.13px_0] rounded-[224px]\" data-node-id=\"566:5189\" data-name=\"Border\" />\n <div className=\"absolute border border-[rgba(121,211,255,0.1)] border-solid inset-[10%] rounded-[179.2px]\" data-node-id=\"566:5190\" data-name=\"Border\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[384px] pt-[32px] relative shrink-0 w-full\" data-node-id=\"566:5191\" data-name=\"Footer - Bottom Controls\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-center relative shrink-0\" data-node-id=\"566:5192\" data-name=\"Timer Display\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5193\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[rgba(220,227,243,0.6)] tracking-[1.4px] whitespace-nowrap\" data-node-id=\"566:5194\">\n <p className=\"leading-[20px]\">04:51</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] h-[4px] items-start relative shrink-0\" data-node-id=\"566:5195\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-full relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:5196\" data-name=\"Background\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] h-full relative rounded-[9999px] shrink-0 w-[8px]\" data-node-id=\"566:5197\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] h-full relative rounded-[9999px] shrink-0 w-[8px]\" data-node-id=\"566:5198\" data-name=\"Overlay\" />\n <div className=\"bg-[rgba(255,255,255,0.1)] h-full relative rounded-[9999px] shrink-0 w-[8px]\" data-node-id=\"566:5199\" data-name=\"Overlay\" />\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-start justify-center p-[5px] relative rounded-[9999px] shrink-0 w-full\" data-node-id=\"566:5200\" data-name=\"Mode Selector\">\n <div className=\"bg-[#79d3ff] flex-[1_0_0] min-w-px relative rounded-[9999px]\" data-node-id=\"566:5201\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5202\">\n <p className=\"leading-[16px]\">FOCUS</p>\n </div>\n </div>\n </div>\n <div className=\"drop-shadow-[0px_0px_6px_rgba(115,209,255,0.2)] flex-[1_0_0] min-w-px relative rounded-[9999px]\" data-node-id=\"566:5203\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#6bbbe3] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5204\">\n <p className=\"leading-[16px]\">LIBRE</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center py-[16px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5205\" data-name=\"End Session Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"566:5206\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Terminer la séance</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5207":"const imgContainer = \"https://www.figma.com/api/mcp/asset/682ea199-ad6c-419d-a351-d8733bc207d9.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/58e934cf-429e-4668-8784-8b3df3ef5c49.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/afb7776e-5941-412f-9030-830f622173a0.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/4a26da91-393a-4b27-beb9-664a013fa73a.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/ee14c6bc-8eda-412b-8013-89c08f100e96.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/97237dea-b695-4d45-ac72-2857c9d72ac5.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/5d5b8b4c-0294-40e3-8e9f-8613057b53fe.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/1d84c27b-2497-4d7e-b89e-2b1a7b97938d.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/f8786203-cab7-4bc2-86b6-7c7050cbfa44.svg\";\n\nexport default function CoherenceCardiaqueReglages() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5207\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Cohérence Cardiaque - Réglages\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5208\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5209\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5210\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5212\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5213\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5214\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5215\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[795px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0\" data-node-id=\"566:5217\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex gap-[90px] items-center relative shrink-0 w-full\" data-node-id=\"566:5218\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"566:5219\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Cohérence cardiaque</p>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5220\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5221\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] h-[323px] items-center justify-center relative shrink-0 w-[362px]\" data-node-id=\"566:5223\" data-name=\"Ambient Visual Element:margin\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:5224\" data-name=\"Ambient Visual Element\">\n <div className=\"flex flex-[1_0_0] flex-row items-center self-stretch\" data-node-id=\"566:5225\">\n <div className=\"content-stretch flex flex-[1_0_0] h-full items-center justify-center min-w-px relative\" data-name=\"Container\">\n <div className=\"border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex flex-col gap-[12px] items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[240px]\" data-node-id=\"566:5226\" data-name=\"Border\">\n <div className=\"h-[24px] relative shrink-0 w-[30px]\" data-node-id=\"566:5227\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5229\" data-name=\"Heading 2\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] text-center whitespace-nowrap\" data-node-id=\"566:5230\">\n <p className=\"leading-[24px]\">Prêt pour la séance ?</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5231\" data-name=\"Instructions Section:margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5232\" data-name=\"Instructions Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:5233\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] text-center whitespace-nowrap\" data-node-id=\"566:5234\">\n <p className=\"leading-[26px] mb-0\">Inspirez et expirez au rythme des vibrations,</p>\n <p>\n <span className=\"[word-break:break-word] font-['Inter:Medium'] font-medium leading-[26px] not-italic text-[#79d3ff]\">cinq secondes</span>\n <span className=\"leading-[26px]\">{` chacun.`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5235\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:5236\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5237\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5238\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5239\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5240\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5241\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5242\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5243\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5244\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5245\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5246\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5247\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5248\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5249\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5250\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5251\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5252\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:5253\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:5254\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:5255\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5256\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5257\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:5258\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5259\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:5260\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5262\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:5263\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5264\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:5265\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5267\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5268\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5269\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:5270\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5272\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5273\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5274\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:5275\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5277\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5278\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5279\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:5280\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5282\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5283\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5284":"const imgInfo = \"https://www.figma.com/api/mcp/asset/5fa779c7-0991-4af8-b3af-8be589580861.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:5284\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5285\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5286\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:5287\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[180px] relative shrink-0 w-[285px]\" data-node-id=\"566:5289\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[180px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full whitespace-pre-wrap\" data-node-id=\"566:5290\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`À environ six respirations par minute, `}</p>\n <p className=\"leading-[20px] mb-0\">le rythme cardiaque et la respiration</p>\n <p className=\"leading-[20px] mb-0\">{`entrent en résonance : la variabilité s'amplifie et le tonus vagal augmente. C'est le mécanisme respiratoire le mieux documenté. Son effet immédiat est net ; son effet sur votre variabilité de fond `}</p>\n <p className=\"leading-[20px] mb-0\">se construit avec la régularité,</p>\n <p className=\"leading-[20px]\">sur plusieurs jours.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5291":"const imgContainer = \"https://www.figma.com/api/mcp/asset/bb81f1bd-a41c-4ef3-90a9-8e2895e6cf7e.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/e5e82235-f665-43fa-89ce-820e488ba362.svg\";\n\nexport default function Component478Seance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5291\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4-7-8 - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5292\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5293\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5294\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5296\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5297\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5298\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5299\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:5301\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"566:5302\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col gap-[13px] h-[21px] items-start relative shrink-0\" data-node-id=\"566:5303\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"566:5304\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:5305\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Inspirez</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center opacity-80 relative shrink-0 w-full\" data-node-id=\"566:5306\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[15px] text-center tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:5307\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Par le nez, doucement</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:5308\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:5309\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:5310\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:5311\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:5312\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:5313\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:5314\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute flex h-[89.6px] items-center justify-center left-[calc(50%+0.21px)] top-[calc(50%-0.45px)] w-[50.42px]\" data-node-id=\"566:5315\">\n <div className=\"flex-none scale-x-160 scale-y-160\">\n <div className=\"content-stretch flex flex-col items-start opacity-70 relative\" data-name=\"Countdown within orb\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[48px] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"566:5316\">\n <p className=\"leading-[56px]\">4</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"566:5317\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"566:5318\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5319\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5320\">\n <p className=\"leading-[15px]\">{`4-7-8 `}</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:5321\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:5322\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:5323\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:5324\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:5325\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:5326\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5327\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5328\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:5329\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:5330\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:5331\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5332\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:5333\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:5334\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:5335\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5336\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5337":"const imgContainer = \"https://www.figma.com/api/mcp/asset/8d033647-18c5-4d53-9343-db4f8e0a38af.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/9896c964-3864-485b-b1b2-0bc5598794c5.svg\";\n\nexport default function Component4444RespirationCarreSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5337\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·4·4·4 - Respiration carré - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5338\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5339\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5340\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5342\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5343\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5344\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5345\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:5347\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[28px] items-start relative shrink-0\" data-node-id=\"566:5348\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[21px] items-start relative shrink-0\" data-node-id=\"566:5349\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"566:5350\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:5351\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Inspirez</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:5352\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:5353\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:5354\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:5355\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:5356\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:5357\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:5358\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute flex h-[89.6px] items-center justify-center left-[calc(50%+0.21px)] top-[calc(50%-0.45px)] w-[50.42px]\" data-node-id=\"566:5359\">\n <div className=\"flex-none scale-x-160 scale-y-160\">\n <div className=\"content-stretch flex flex-col items-start opacity-70 relative\" data-name=\"Countdown within orb\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[48px] tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"566:5360\">\n <p className=\"leading-[56px]\">4</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"566:5361\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"566:5362\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5363\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5364\">\n <p className=\"leading-[15px]\">Box 4-4-4-4</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:5365\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:5366\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:5367\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:5368\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:5369\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:5370\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:5371\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5372\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5373\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:5374\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:5375\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:5376\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5377\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:5378\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:5379\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:5380\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5381\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5382":"const imgContainer = \"https://www.figma.com/api/mcp/asset/2c499076-a2b5-4b71-a5e3-e2dc3d082b32.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/2975c1df-0150-4f2a-b494-8dbc4bdc9335.svg\";\nconst imgVector = \"https://www.figma.com/api/mcp/asset/f91ecea2-18e0-4f65-be12-e14feea11c9e.svg\";\nconst imgVector1 = \"https://www.figma.com/api/mcp/asset/b5600f45-26c3-4953-bdd1-b2cee5026b70.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/c338a527-ae44-4dd7-9a70-a2ff38a3bad6.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/6e41dff4-8dbd-408c-87b2-d16ea075dd21.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/d8fe8e23-304c-4aa0-877d-c2cfbe2dde7d.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/5ee55c55-0d6b-44e1-b604-f30a761c6080.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/154801b2-a35f-4369-b606-96ffe4d49340.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/1d6d65a6-82c1-45b6-960f-aa62c4b85a12.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/203e376e-8da6-4723-b605-306fd86a9748.svg\";\n\nexport default function CalmeExpressRestitutionSimple() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5382\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Calme express - Restitution (simple)\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5383\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5384\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5385\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5387\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5388\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5389\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5390\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[860px] items-center justify-center overflow-clip pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5392\" data-name=\"Main Canvas\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[448px] relative shrink-0 w-[402px]\" data-node-id=\"566:5393\" data-name=\"Central Content Section\">\n <div className=\"content-stretch flex flex-col h-[208px] items-start pb-[16px] relative shrink-0 w-[192px]\" data-node-id=\"566:5394\" data-name=\"Biometric Visualizer Placeholder (Success State):margin\">\n <div className=\"content-stretch flex flex-col items-start justify-center relative shrink-0 size-[192px]\" data-node-id=\"566:5395\" data-name=\"Biometric Visualizer Placeholder (Success State)\">\n <div className=\"flex h-[192px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:5396\" style={{ containerType: \"size\" }}>\n <div className=\"-rotate-90 flex-none h-[100cqw]\">\n <div className=\"h-full overflow-clip relative w-[192px]\" data-name=\"SVG - Circular Ring\">\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"566:5397\" data-name=\"Vector\">\n <div className=\"absolute inset-[-0.57%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector} />\n </div>\n </div>\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"566:5398\" data-name=\"Vector\">\n <div className=\"absolute inset-[-2.27%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex inset-0 items-center justify-center pb-[58px] pl-[38px] pr-[58px] pt-[38px]\" data-node-id=\"566:5399\" data-name=\"Inner Icon\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.1)] content-stretch flex items-center justify-center left-1/2 rounded-[9999px] size-[96px] top-1/2\" data-node-id=\"566:5400\" data-name=\"Overlay\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(255,255,255,0)] left-1/2 rounded-[9999px] shadow-[0px_0px_15px_2px_rgba(115,209,255,0.2)] size-[96px] top-1/2\" data-node-id=\"566:5401\" data-name=\"Overlay+Shadow\" />\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:5402\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[12px] relative shrink-0\" data-node-id=\"566:5404\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center relative shrink-0\" data-node-id=\"566:5405\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:5406\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"566:5407\">\n <p className=\"leading-[32px] mb-0 whitespace-pre\">{`Séance Calme `}</p>\n <p className=\"leading-[32px] whitespace-pre\">express terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:5408\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:5409\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5411\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5412\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5413\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center px-[26.73px] relative shrink-0\" data-node-id=\"566:5414\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[rgba(190,200,207,0.8)] text-center whitespace-nowrap\" data-node-id=\"566:5415\">\n <p className=\"leading-[26px] mb-0\">Félicitations, votre système nerveux est apaisé,</p>\n <p className=\"leading-[26px]\">favorisant une récupération profonde.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:5416\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:5417\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:5418\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:5419\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5420\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:5421\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:5422\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5423\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5424\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5425\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5426\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5427\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5429\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5430\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5431\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5432\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5434\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5435\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5436\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5437\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[144px] items-center pb-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5439\" data-name=\"Footer - Bottom Actions Section (Premium Fixed Layout)\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5440\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5441\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5442\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5443\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"566:5444\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"566:5445\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5447\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"566:5448\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"566:5449\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5451":"const imgContainer = \"https://www.figma.com/api/mcp/asset/e25e810d-5059-4dd6-8a19-d21a676ccf69.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/9b9ed329-e53d-4fa8-afe1-d9950db8a71d.svg\";\nconst imgVector = \"https://www.figma.com/api/mcp/asset/ced88a4c-5260-4710-a384-4245c3460bde.svg\";\nconst imgVector1 = \"https://www.figma.com/api/mcp/asset/3f5ad1e2-74e6-4222-8ea1-1efe7991f85f.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/396f4968-6623-4470-a839-25ca1d4a52b8.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/fb867a3b-976c-409d-8bd2-8c2f7b3b7113.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/f1e6d2de-744f-447e-ad45-c139b36b85a4.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/dbf91b9c-9afa-47cc-a558-2e4e9f457c84.svg\";\n\nexport default function RespirerRestitutionSimple() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5451\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Respirer - Restitution (simple)\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5452\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5453\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5454\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5456\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5457\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5458\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5459\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[731px] items-center justify-center overflow-clip pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5461\" data-name=\"Main Canvas\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[448px] relative shrink-0\" data-node-id=\"566:5462\" data-name=\"Central Content Section\">\n <div className=\"content-stretch flex flex-col h-[208px] items-start pb-[16px] relative shrink-0 w-[192px]\" data-node-id=\"566:5463\" data-name=\"Biometric Visualizer Placeholder (Success State):margin\">\n <div className=\"content-stretch flex flex-col items-start justify-center relative shrink-0 size-[192px]\" data-node-id=\"566:5464\" data-name=\"Biometric Visualizer Placeholder (Success State)\">\n <div className=\"flex h-[192px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:5465\" style={{ containerType: \"size\" }}>\n <div className=\"-rotate-90 flex-none h-[100cqw]\">\n <div className=\"h-full overflow-clip relative w-[192px]\" data-name=\"SVG - Circular Ring\">\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"566:5466\" data-name=\"Vector\">\n <div className=\"absolute inset-[-0.57%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector} />\n </div>\n </div>\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"566:5467\" data-name=\"Vector\">\n <div className=\"absolute inset-[-2.27%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex inset-0 items-center justify-center pb-[58px] pl-[38px] pr-[58px] pt-[38px]\" data-node-id=\"566:5468\" data-name=\"Inner Icon\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.1)] content-stretch flex items-center justify-center left-1/2 rounded-[9999px] size-[96px] top-1/2\" data-node-id=\"566:5469\" data-name=\"Overlay\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(255,255,255,0)] left-1/2 rounded-[9999px] shadow-[0px_0px_15px_2px_rgba(115,209,255,0.2)] size-[96px] top-1/2\" data-node-id=\"566:5470\" data-name=\"Overlay+Shadow\" />\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:5471\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[12px] relative shrink-0\" data-node-id=\"566:5473\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center relative shrink-0\" data-node-id=\"566:5474\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:5475\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"566:5476\">\n <p className=\"leading-[32px]\">Séance 4-7-8 terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:5477\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:5478\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5480\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5481\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5482\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center px-[24px] relative shrink-0\" data-node-id=\"566:5483\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[rgba(190,200,207,0.8)] text-center whitespace-nowrap\" data-node-id=\"566:5484\">\n <p className=\"leading-[26px] mb-0\">Félicitations, votre système nerveux est apaisé,</p>\n <p className=\"leading-[26px]\">favorisant une récupération profonde.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[144px] items-center pb-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5485\" data-name=\"Footer - Bottom Actions Section (Premium Fixed Layout)\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5486\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5487\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5488\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5489\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"566:5490\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"566:5491\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5493\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"566:5494\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"566:5495\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5497":"const imgContainer = \"https://www.figma.com/api/mcp/asset/674832d6-ba0e-4a36-bf66-0ef062b3ada5.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/9a2175cd-f0c3-4f44-b3e3-ebd339433f55.svg\";\nconst imgVector = \"https://www.figma.com/api/mcp/asset/5f3ec06b-c6c1-48d7-bbb3-5c33b12d61dc.svg\";\nconst imgVector1 = \"https://www.figma.com/api/mcp/asset/b6b4b096-827e-4771-8f26-7ca269ec5191.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/b26ee846-c0d7-4738-b608-2913d9fb5c30.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/15e0fec1-1c45-45a5-ab44-d84c439ecf52.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/a0a7e97d-1aca-4714-afaa-2c907e074fb6.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/29037bdf-a807-4ce7-a3c2-67273f83d588.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/49a73b37-e628-4df1-8c24-bc8447e899b8.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/c91ce309-14fe-4774-8a92-dab7f51b73bc.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/00cd249a-9011-4136-af31-8aeadf60fb8e.svg\";\n\nexport default function Component4444RespirationCarreRestitutionSimple() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5497\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·4·4·4 - Respiration carré - Restitution (simple)\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5498\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5499\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5500\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5502\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5503\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5504\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5505\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[828px] items-center justify-center overflow-clip pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5507\" data-name=\"Main Canvas\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center max-w-[448px] relative shrink-0\" data-node-id=\"566:5508\" data-name=\"Central Content Section\">\n <div className=\"content-stretch flex flex-col h-[208px] items-start pb-[16px] relative shrink-0 w-[192px]\" data-node-id=\"566:5509\" data-name=\"Biometric Visualizer Placeholder (Success State):margin\">\n <div className=\"content-stretch flex flex-col items-start justify-center relative shrink-0 size-[192px]\" data-node-id=\"566:5510\" data-name=\"Biometric Visualizer Placeholder (Success State)\">\n <div className=\"flex h-[192px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:5511\" style={{ containerType: \"size\" }}>\n <div className=\"-rotate-90 flex-none h-[100cqw]\">\n <div className=\"h-full overflow-clip relative w-[192px]\" data-name=\"SVG - Circular Ring\">\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"566:5512\" data-name=\"Vector\">\n <div className=\"absolute inset-[-0.57%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector} />\n </div>\n </div>\n <div className=\"absolute inset-[4.17%]\" data-node-id=\"566:5513\" data-name=\"Vector\">\n <div className=\"absolute inset-[-2.27%]\">\n <img alt=\"\" className=\"block max-w-none size-full\" src={imgVector1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex inset-0 items-center justify-center pb-[58px] pl-[38px] pr-[58px] pt-[38px]\" data-node-id=\"566:5514\" data-name=\"Inner Icon\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(121,211,255,0.1)] content-stretch flex items-center justify-center left-1/2 rounded-[9999px] size-[96px] top-1/2\" data-node-id=\"566:5515\" data-name=\"Overlay\">\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute bg-[rgba(255,255,255,0)] left-1/2 rounded-[9999px] shadow-[0px_0px_15px_2px_rgba(115,209,255,0.2)] size-[96px] top-1/2\" data-node-id=\"566:5516\" data-name=\"Overlay+Shadow\" />\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:5517\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[12px] relative shrink-0\" data-node-id=\"566:5519\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center relative shrink-0\" data-node-id=\"566:5520\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:5521\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[24px] text-center tracking-[-0.24px] whitespace-nowrap\" data-node-id=\"566:5522\">\n <p className=\"leading-[32px]\">Séance 4·4·4·4 terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:5523\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:5524\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5526\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5527\">\n <p className=\"leading-[16px]\">5 minutes · séance enregistrée</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5528\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-center px-[26.73px] relative shrink-0\" data-node-id=\"566:5529\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[rgba(190,200,207,0.8)] text-center whitespace-nowrap\" data-node-id=\"566:5530\">\n <p className=\"leading-[26px] mb-0\">Félicitations, votre système nerveux est apaisé,</p>\n <p className=\"leading-[26px]\">favorisant une récupération profonde.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:5531\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:5532\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:5533\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:5534\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5535\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:5536\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:5537\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5538\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5539\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5540\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5541\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5542\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5544\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5545\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5546\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5547\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:5549\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5550\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:5551\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:5552\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[144px] items-center pb-[20px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5554\" data-name=\"Footer - Bottom Actions Section (Premium Fixed Layout)\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5555\" data-name=\"Action Buttons\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center pb-[20.5px] pt-[19.5px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5556\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5557\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RETOUR À MES OUTILS</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:5558\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-[1_0_0] gap-[7.99px] h-[56px] items-center justify-center min-w-px p-px relative rounded-[12px]\" data-node-id=\"566:5559\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[9.333px]\" data-node-id=\"566:5560\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5562\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">RECOMMENCER</p>\n </div>\n </div>\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[12px] shrink-0 size-[56px]\" data-node-id=\"566:5563\" data-name=\"Button\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"566:5564\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5566":"const imgContainer = \"https://www.figma.com/api/mcp/asset/482237d4-6679-4aa3-894a-3bd08ff067bc.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/7f368ac1-82cc-4ebe-a391-f1382908557a.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/7b1bf28e-4b62-4f9b-9bd4-e2d48cef597f.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/5cc7f305-1c58-49b9-ae5a-63db25820f02.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/9162b55e-5c98-43a1-a73b-5e199a0c95d4.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/c4020d9a-89dd-4e75-a021-b62ccd36aca0.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/81e0de12-f155-4d05-b100-628f646b27bc.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/36e373ec-4452-404b-b1dc-00c27568cbe0.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/7622b036-4373-4ce8-af74-b3f52f257806.svg\";\n\nexport default function Component478SommeilPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5566\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·7·8 - Sommeil - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5567\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:5568\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5569\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:5570\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">4·7·8 - Sommeil</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5571\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5572\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:5574\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:5575\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5576\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:5577\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:5578\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:5579\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:5581\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:5582\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:5583\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Une expiration longue relâche `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">la tension et vous invite au sommeil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5584\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:5585\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5586\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5587\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5588\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5589\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5590\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5591\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5592\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5593\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5594\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5595\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5596\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5597\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5598\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5599\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5600\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5601\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:5602\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:5603\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:5604\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5605\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5606\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5607\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5608\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5609\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5611\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5612\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5613\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5614\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:5616\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5617\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:5618\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5620\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:5621\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5622\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:5623\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5625\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5626\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5627\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:5628\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5630\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5631\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5632\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:5633\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5635\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5636\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5637\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:5638\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5640\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5641\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5642":"const imgInfo = \"https://www.figma.com/api/mcp/asset/4877b600-82f1-4a90-b29b-7043e2a8285b.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:5642\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5643\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5644\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:5645\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[140px] relative shrink-0 w-[285px]\" data-node-id=\"566:5647\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-full whitespace-pre-wrap\" data-node-id=\"566:5648\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Quand l'expiration dure plus longtemps que l'inspiration, la bascule vers le parasympathique s'accentue, d'où un apaisement marqué. `}</p>\n <p className=\"leading-[20px]\">Un protocole à utiliser idéalement le soir, dans votre lit, pour vous aider à vous endormir.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5649":"const imgContainer = \"https://www.figma.com/api/mcp/asset/0983d5ad-bb23-4210-964f-84724ed7e7fe.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/952c3c54-78e9-4af7-b79a-41edd5dc6904.svg\";\n\nexport default function CalmeExpressSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5649\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Calme express - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5650\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5651\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5652\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5654\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5655\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5656\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5657\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:5659\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5660\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[21px] items-start relative shrink-0\" data-node-id=\"566:5661\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"566:5662\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:5663\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Inspirez encore</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:5664\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:5665\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:5666\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:5667\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:5668\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:5669\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:5670\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"566:5671\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"566:5672\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5673\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[10px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5674\">\n <p className=\"leading-[15px]\">Calme express</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:5675\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:5676\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:5677\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:5678\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:5679\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:5680\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5681\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5682\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:5683\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:5684\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:5685\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5686\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:5687\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:5688\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:5689\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5690\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5691":"const imgContainer = \"https://www.figma.com/api/mcp/asset/dc602bc5-b4e1-4a74-948b-0ed600f54c73.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/0a663a6a-7499-48f9-b37b-3925bc3ca1ba.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/a32b70de-5e06-47d0-83f3-23b517edf50b.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/711686cd-dbf1-402d-b60c-9c77478f2c94.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/45d322c5-a8bd-4989-b151-5806d38e5080.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/1cb94e90-e512-4b9b-8676-db36db7a2c48.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/9d6e5524-0831-4a4c-b81b-5adc8ee34d6f.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/0cc43263-ea25-4458-941c-248071f32481.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/b662c92e-f1c2-4ab1-8f9f-8f4c24b21678.svg\";\n\nexport default function CalmeExpressPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5691\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Calme express - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5692\" data-name=\"Main\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:5693\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5694\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:5695\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Calme express</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5696\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5697\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:5699\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5700\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:5701\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:5702\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:5703\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:5705\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:5706\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:5707\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0\">Deux inspirations enchaînées, puis</p>\n <p className=\"leading-[24.75px]\">une longue expiration.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5708\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:5709\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5710\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5711\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5712\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5713\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5714\">\n <p className=\"leading-[16px]\">2 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5715\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5716\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5717\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5718\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5719\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5720\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5721\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5722\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5723\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5724\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5725\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:5726\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:5727\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:5728\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5729\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5730\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5731\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5732\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5733\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5735\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5736\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5737\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5738\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:5740\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5741\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:5742\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5744\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:5745\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5746\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:5747\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5749\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5750\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5751\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:5752\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5754\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5755\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5756\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:5757\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5759\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5760\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5761\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:5762\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5764\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5765\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5766":"const imgInfo = \"https://www.figma.com/api/mcp/asset/449d1c92-67ed-4d4e-94fb-b153ef93a4fe.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:5766\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5767\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5768\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:5769\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[135px] relative shrink-0 w-[285px]\" data-node-id=\"566:5771\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[200px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-full whitespace-pre-wrap\" data-node-id=\"566:5772\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`À environ six respirations par minute, le rythme cardiaque et la respiration entrent en résonance : la variabilité s'amplifie et le tonus vagal augmente. `}</p>\n <p className=\"leading-[20px] mb-0\"></p>\n <p className=\"leading-[20px]\">{`C'est le mécanisme respiratoire le mieux documenté. Son effet immédiat est net ; son effet sur votre variabilité de fond se construit avec la régularité, sur plusieurs jours.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5773":"const imgContainer = \"https://www.figma.com/api/mcp/asset/295f3397-d131-4e7d-8d5f-1725e8f4578d.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/0c5a48e3-b519-41ab-9ddc-0612e405bd88.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/390873ff-8723-4a86-9e46-8b5c7b592968.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/df3a8325-95ac-4862-a677-a8023767c33a.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/6c111aa7-5d72-4bcb-b64f-7bca1422b578.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/0384ffa6-e50b-440e-99c6-d29a053e70e2.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/7e86a549-b3bf-4e7f-8354-a811596107ee.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/452cadf5-f5f4-40a0-8390-558ecf599ac0.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/f1aee458-4c82-4aa8-95c6-f63932982e02.svg\";\n\nexport default function Component4444EquilibrePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5773\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"4·4·4·4 - Équilibre - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5774\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:5775\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5776\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:5777\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">4·4·4·4 - Équilibre</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5778\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5779\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:5781\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:5782\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5783\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:5784\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:5785\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:5786\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:5788\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:5789\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:5790\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Inspirez, retenez, expirez, retenez : `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">quatre temps égaux.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5791\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:5792\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:5793\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5794\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5795\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5796\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5797\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5798\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5799\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5800\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5801\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:5802\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:5803\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:5804\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5805\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5806\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5807\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5808\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:5809\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:5810\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:5811\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:5812\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:5813\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5814\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5815\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5816\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5818\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5819\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5820\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5821\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:5823\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5824\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:5825\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5827\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:5828\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5829\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:5830\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5832\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5833\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5834\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:5835\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5837\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5838\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5839\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:5840\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5842\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5843\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5844\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:5845\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5847\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5848\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5849":"const imgInfo = \"https://www.figma.com/api/mcp/asset/3a124706-39e1-4ae4-8a6f-c9b86df1ade4.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:5849\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5850\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5851\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:5852\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-[285px]\" data-node-id=\"566:5854\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-full whitespace-pre-wrap\" data-node-id=\"566:5855\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Des temps égaux régularisent la respiration et stabilisent le taux `}</p>\n <p className=\"leading-[20px]\">{`de CO2 ; la rétention sert de point d'ancrage à l'attention afin de parvenir à un état d'équilibre de votre système nerveux autonome.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5857":"const imgContainer = \"https://www.figma.com/api/mcp/asset/32d42f1f-65e8-4c4f-b025-29078956d205.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/0759b06f-301c-42f6-8dfe-5e6e82a31c59.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/ee09908e-75a5-480e-b60a-62cd2cfb155a.svg\";\nconst imgPulse = \"https://www.figma.com/api/mcp/asset/3b855788-5ec7-49c6-b2ed-a189fd95f82c.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/d3d1b6a3-e54e-44e1-8b85-31afc9699398.svg\";\nconst imgAnchor = \"https://www.figma.com/api/mcp/asset/3e9e7e8d-20d8-4076-a562-64dd85ae43a2.svg\";\nconst imgCloudMoon = \"https://www.figma.com/api/mcp/asset/63238c32-ff23-4e74-b729-1292f221c0ae.svg\";\nconst imgLightning = \"https://www.figma.com/api/mcp/asset/2f4132de-2dab-4a92-9cb2-15fb462b34e1.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/e015a355-17b3-45fc-bb2b-10c9fcdec206.svg\";\nconst imgMoon = \"https://www.figma.com/api/mcp/asset/0c573331-5257-4ef1-863a-8d9a5bf7ba34.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/c75acadb-2e8b-4e1a-ab17-223a8be76a8e.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/1a002dc9-c17f-4217-9c76-d98aa6885c7e.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/85713639-958c-47e6-b32b-36bb6b87608e.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/82719155-6794-476c-8f15-53a93e889b76.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/3bec1c27-4319-4740-9930-630a44d25d0a.svg\";\n\nexport default function VosOutilsAncrer() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5857\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - Ancrer\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:5858\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5859\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:5860\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5862\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:5863\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:5864\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:5865\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:5867\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[102px] items-start relative shrink-0 w-full\" data-node-id=\"566:5868\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-baseline justify-between relative shrink-0 w-full\" data-node-id=\"566:5869\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"566:5870\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Ancrer</p>\n </div>\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5871\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5872\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"566:5873\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Des vibrations haptiques structurées pour stabiliser votre physiologie. Choisissez un protocole et laissez agir.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-full\" data-node-id=\"566:5874\" data-name=\"Protocol Bento Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#c62828] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col h-[116px] items-start justify-center overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5875\" data-name=\"Featured Card: SOS Stress\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5876\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0 w-full\" data-node-id=\"566:5877\" data-name=\"Container\">\n <div className=\"border border-[rgba(198,40,40,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shrink-0 size-[40px]\" data-node-id=\"566:5878\" data-name=\"Border\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5879\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"overflow-clip relative shrink-0 size-[60px]\" data-node-id=\"566:5880\" data-name=\"Circle Big Circle.svg\">\n <div className=\"absolute left-[20px] size-[20px] top-[20px]\" data-node-id=\"566:5881\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5883\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#c62828] text-[24px] whitespace-nowrap\" data-node-id=\"566:5884\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">SOS Stress</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:5885\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[6px] items-center relative shrink-0\" data-node-id=\"566:5886\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5887\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[16px] whitespace-nowrap\" data-node-id=\"566:5888\">\n <p className=\"leading-[24px]\">Accompagner un pic de tension</p>\n </div>\n </div>\n <div className=\"bg-[#3e484e] relative rounded-[9999px] shrink-0 size-[4px]\" data-node-id=\"566:5889\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5890\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#c62828] text-[16px] whitespace-nowrap\" data-node-id=\"566:5891\">\n <p className=\"leading-[24px]\">90s</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5892\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:5893\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5895\" data-name=\"Micro-Ancrage\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5896\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:5897\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:5898\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5899\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5900\" data-name=\"Anchor\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgAnchor} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5902\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5903\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5904\">\n <p className=\"leading-[24px]\">Micro-Ancrage</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5905\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:5906\">\n <p>\n <span className=\"leading-[20px]\">Stabilisation rapide •</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">{` 60s`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:5907\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5909\" data-name=\"Apaiser\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5910\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:5911\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:5912\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5913\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5914\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5916\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5917\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5918\">\n <p className=\"leading-[24px]\">Apaiser</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5919\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:5920\">\n <p>\n <span className=\"leading-[20px]\">Relâcher les tensions •</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">{` 1-3min`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:5921\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5923\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5924\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:5925\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:5926\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5927\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5928\" data-name=\"Lightning\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgLightning} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5930\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5931\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5932\">\n <p className=\"leading-[24px]\">Booster</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5933\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:5934\">\n <p>\n <span className=\"leading-[20px]\">Remobiliser votre énergie •</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">{` 30-90s`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:5935\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start opacity-60 p-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5937\" data-name=\"Synchroniser (Badge En Validation)\">\n <div aria-hidden className=\"absolute inset-0 pointer-events-none rounded-[12px]\">\n <div className=\"absolute bg-[rgba(15,23,42,0.6)] inset-0 rounded-[12px]\" />\n <div className=\"absolute backdrop-blur-[6px] bg-white inset-0 mix-blend-saturation rounded-[12px]\" />\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5938\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[16px] items-center relative shrink-0 w-[320px]\" data-node-id=\"566:5939\" data-name=\"Container\">\n <div className=\"bg-[#19202c] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[8px] shrink-0 size-[48px]\" data-node-id=\"566:5940\" data-name=\"Background+Border\">\n <div className=\"h-[11px] relative shrink-0 w-[24px]\" data-node-id=\"566:5941\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[205px]\" data-node-id=\"566:5943\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-[213px]\" data-node-id=\"566:5944\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5945\">\n <p className=\"leading-[24px]\">Synchroniser</p>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] gap-[6px] items-center min-w-px relative\" data-node-id=\"566:5946\" data-name=\"Container\">\n <div className=\"bg-[#73d1ff] relative rounded-[9999px] shrink-0 size-[6px]\" data-node-id=\"566:5947\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5948\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#73d1ff] text-[10px] tracking-[0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:5949\">\n <p className=\"leading-[15px]\">EN VALIDATION</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center relative shrink-0 w-[213px]\" data-node-id=\"566:5950\" data-name=\"Heading 4\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[10px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:5951\">\n <p>\n <span className=\"leading-[20px]\">{`Un rythme régulier pour alléger les pensées • `}</span>\n <span className=\"leading-[20px] text-[#4ab8e8]\">5-15 min</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:5952\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:5953\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:5954\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:5955\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5956\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:5957\" data-name=\"Moon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5959\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5960\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:5961\">\n <p className=\"leading-[24px]\">Endormissement</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:5962\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:5963\">\n <p>\n <span className=\"leading-[20px]\">Un rythme lent qui décroît pour vous endormir</span>\n <span className=\"leading-[20px] tracking-[-0.1px]\">{` •`}</span>\n <span className=\"leading-[20px] text-[#4ab8e8] tracking-[-0.1px]\">{` 20-45min`}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:5964\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:5966\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:5967\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:5968\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5970\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:5971\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5972\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:5973\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5975\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5976\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5977\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:5978\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5980\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5981\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5982\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:5983\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5985\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5986\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:5987\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:5988\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5990\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:5991\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5992":"const imgInfo = \"https://www.figma.com/api/mcp/asset/9fb636a0-d3e0-45b2-91ca-8e00210d2b54.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:5992\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:5993\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:5994\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:5995\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[157px] relative shrink-0 w-[285px]\" data-node-id=\"566:5997\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[157px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"566:5998\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Ces vibrations proposent un rythme sur lequel votre état peut se caler, sans passer par la respiration.</p>\n <p className=\"leading-[20px]\">{`Lent et décroissant, il vise l'apaisement ; rapide et montant, la remobilisation. L'effet passe par le rythme et le ressenti ; une piste que la mesure avant/après vérifie, plutôt qu'un acquis.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:5999":"const imgContainer = \"https://www.figma.com/api/mcp/asset/194b10fe-95e2-472a-8300-5f6473b54f14.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/69c53d49-2157-4649-b861-beb8f4954db2.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/8e834623-1e53-4f33-b2c1-17d9356fc304.svg\";\n\nexport default function MicroAncrageSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:5999\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Micro-Ancrage - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6000\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6001\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6002\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6004\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6005\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6006\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6007\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:6009\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"566:6010\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"566:6011\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[21px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"566:6012\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:6013\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Trois impulsions, puis une descente. `}</p>\n <p className=\"leading-[28px] whitespace-pre\">Restez posé</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:6014\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:6015\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:6016\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:6017\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:6018\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:6019\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:6020\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"566:6021\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"566:6022\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex gap-[6px] items-center relative shrink-0\" data-node-id=\"566:6023\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:6024\">\n <p className=\"leading-[15px]\">Micro-Ancrage</p>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[20px]\" data-node-id=\"566:6025\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:6026\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:6028\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:6029\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:6030\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:6031\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:6032\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:6033\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6034\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6035\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:6036\">\n <p className=\"leading-[20px]\">00:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:6037\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:6038\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6039\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:6040\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:6041\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:6042\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:6043\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6044":"const imgContainer = \"https://www.figma.com/api/mcp/asset/ef02d01c-21f1-4328-adab-ef455ef6bf4f.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/c70f1d7c-0482-449c-8f5f-b1d3e6c1319e.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/82299b9c-3b48-4443-8f85-4edc06a60387.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/db2f5cf0-d5df-472d-849f-62250fc692dd.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/51cc4bca-bc6c-4cf9-9624-e8c11fdee3d2.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/84389769-cc6c-4885-a494-abab2b0083bc.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/cf80817f-163f-4614-9b92-281563408a5f.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/801867f3-291f-46e4-a1fb-54de6dccff3d.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/60cb372d-ab17-48b1-8eba-e4e4b258302d.svg\";\n\nexport default function MicroAncragePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:6044\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Micro-Ancrage - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:6045\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:6046\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6047\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:6048\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Micro-Ancrage</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6049\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:6050\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:6052\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:6053\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6054\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:6055\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:6056\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:6057\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:6059\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:6060\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:6061\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Trois impulsions, puis une descente. `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">Restez posé.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[80px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6062\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6063\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:6064\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:6065\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE De la sÉance</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6066\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6067\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6068\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6069\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6070\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6071\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6072\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6073\">\n <p className=\"leading-[16px]\">25 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6074\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6075\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6076\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6077\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6078\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:6079\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:6080\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:6081\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:6082\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:6083\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6084\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:6085\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6086\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6087\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6088\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6090\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6091\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6092\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6093\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:6095\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6096\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:6097\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6099\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:6100\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6101\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:6102\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6104\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6105\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6106\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:6107\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6109\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6110\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6111\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:6112\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6114\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6115\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6116\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:6117\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6119\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6120\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6121":"const imgInfo = \"https://www.figma.com/api/mcp/asset/bf2a5bac-53e2-441e-b9f7-d12009f2f8c4.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:6121\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6122\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6123\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:6124\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[119px] relative shrink-0 w-[285px]\" data-node-id=\"566:6126\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[119px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:6127\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`L'idée : interrompre une petite montée de tension avant qu'elle s'installe. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Trois signaux nets accrochent l'attention et cassent la spirale, puis le rythme redescend pour ramener le calme. `}</p>\n <p className=\"leading-[20px]\">Un format volontairement très court.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6128":"const imgInfo = \"https://www.figma.com/api/mcp/asset/9bd45922-ae1b-44b0-b13f-b8b8126715d5.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:6128\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6129\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6130\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:6131\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[79px] relative shrink-0 w-[285px]\" data-node-id=\"566:6133\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[79px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"566:6134\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Un rythme lent, doux et décroissant envoie au système un signal de ralentissement, propice au relâchement musculaire et mental. `}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6135":"const imgContainer = \"https://www.figma.com/api/mcp/asset/c7b6c57d-df31-4d21-b63c-d96b2a6dbe32.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/559c24dc-dd7c-4c13-afb5-75f79f78b58b.svg\";\n\nexport default function ApaiserSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:6135\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Apaiser - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6136\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6137\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6138\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6140\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6141\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6142\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6143\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:6145\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[56px] items-start relative shrink-0\" data-node-id=\"566:6146\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"566:6147\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[77px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"566:6148\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center tracking-[-0.3px] whitespace-nowrap\" data-node-id=\"566:6149\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Des vibrations de plus en plus lentes `}</p>\n <p className=\"leading-[28px] whitespace-pre\">accompagnent le relâchement du corps.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:6150\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:6151\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:6152\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:6153\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:6154\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:6155\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:6156\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"566:6157\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"566:6158\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex items-center relative shrink-0\" data-node-id=\"566:6159\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:6160\">\n <p className=\"leading-[15px]\">Apaiser</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:6161\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:6162\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:6163\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:6164\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:6165\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:6166\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6167\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6168\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:6169\">\n <p className=\"leading-[20px]\">02:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:6170\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:6171\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6172\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:6173\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:6174\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:6175\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:6176\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6177":"const imgContainer = \"https://www.figma.com/api/mcp/asset/ef9e5202-44f7-4c47-b2c2-98e1c94f3641.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/e11b9bac-b11e-45b1-b756-98bb22053504.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/cc6712c0-e130-4edf-8a35-923b44c08844.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/8638de6a-c740-4d70-8a18-002b6c88c29f.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/e2d87791-3f66-4d75-ae9f-fd4d8b7a7843.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/688c44f7-321d-492d-a49c-ba24cc68b25e.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/75ba9af4-e486-4aeb-b1e1-3444ccd11056.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/6a1500a2-5202-4e97-80f8-6cdd3d134e7f.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/d2588b95-07c5-421f-b803-168418637997.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/b81d47fe-828a-4aa1-8b33-a3d23c86e825.svg\";\n\nexport default function ApaiserPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:6177\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Apaiser - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:6178\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:6179\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6180\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:6181\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Apaiser</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6182\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:6183\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:6185\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:6186\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6187\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:6188\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:6189\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:6190\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:6192\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:6193\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:6194\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Des vibrations de plus en plus lentes `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">accompagnent le relâchement du corps</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[106px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6195\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[106px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:6196\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6197\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:6198\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6200\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:6201\">\n <p className=\"leading-[24px]\">Durée de la séance</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-end min-w-[35.880001068115234px] pl-[70.359px] relative\" data-node-id=\"566:6202\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6203\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:6204\">\n <p className=\"leading-[20px]\">1:10 min</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6205\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:6206\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:6207\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[80px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6208\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6209\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:6210\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:6211\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE De la sÉance</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6212\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6213\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6214\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6215\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6216\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6217\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6218\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6219\">\n <p className=\"leading-[16px]\">25 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6220\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6221\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6222\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6223\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6224\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:6225\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:6226\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:6227\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:6228\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:6229\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6230\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:6231\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6232\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6233\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6234\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6236\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6237\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6238\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6239\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:6241\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6242\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:6243\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6245\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:6246\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6247\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:6248\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6250\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6251\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6252\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:6253\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6255\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6256\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6257\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:6258\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6260\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6261\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6262\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:6263\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6265\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6266\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6267":"const imgInfo = \"https://www.figma.com/api/mcp/asset/dd4cc959-4635-40ef-bc02-a597edfe0001.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:6267\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6268\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6269\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:6270\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[116px] relative shrink-0 w-[285px]\" data-node-id=\"566:6272\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[116px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:6273\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Un rythme rapide et montant vise à relever le niveau d'activation quand l'énergie manque, sur le principe d'un niveau d'éveil optimal. `}</p>\n <p className=\"leading-[20px]\">{`À éviter en état de tension, où l'on recherche l'effet inverse.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6274":"const imgContainer = \"https://www.figma.com/api/mcp/asset/36d4cc89-a9df-42f9-942e-91f8caa362f5.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/b4cb6858-2a47-461b-8734-3284e3ca849c.svg\";\n\nexport default function BoosterSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:6274\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Booster - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6275\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6276\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6277\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6279\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6280\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6281\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6282\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:6284\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[56px] items-start relative shrink-0\" data-node-id=\"566:6285\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"566:6286\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[77px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"566:6287\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:6288\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Des vibrations de plus en plus vives `}</p>\n <p className=\"leading-[28px] whitespace-pre\">accompagnent le réveil du corps</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:6289\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:6290\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:6291\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:6292\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:6293\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:6294\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:6295\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"566:6296\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"566:6297\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex items-center relative shrink-0\" data-node-id=\"566:6298\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:6299\">\n <p className=\"leading-[15px]\">Booster</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:6300\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:6301\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:6302\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:6303\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:6304\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:6305\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6306\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6307\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:6308\">\n <p className=\"leading-[20px]\">01:29</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:6309\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:6310\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6311\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:6312\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:6313\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:6314\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:6315\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6316":"const imgContainer = \"https://www.figma.com/api/mcp/asset/0a634852-e77a-47aa-9509-930a932e2b08.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/3879674d-bfbf-4630-bb8b-d85b31855d37.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/39f82069-19ce-4bdc-92dc-b2d34ba9d924.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/f9337f08-8d5f-4f6e-a99d-df08e0698d2d.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/a67a1871-4039-4820-a991-85ec0008b764.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/0a196e95-2d1a-40e6-b45c-d5b061e2f456.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/7e44fa77-5f30-487c-a1d6-5d0b0d90ce5e.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/f092d511-1833-4251-b924-fbbbf2f1f859.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/b442da38-cd2a-422e-86c4-f90f85552a29.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/1f3e9a52-883c-48ce-85cc-c392ef45f981.svg\";\n\nexport default function BoosterPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:6316\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Booster - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:6317\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:6318\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6319\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:6320\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Booster</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6321\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:6322\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:6324\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:6325\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6326\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:6327\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:6328\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:6329\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:6331\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:6332\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:6333\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Des vibrations de plus en plus vives `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">accompagnent le réveil du corps</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[106px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6334\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[106px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:6335\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6336\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:6337\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6339\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:6340\">\n <p className=\"leading-[24px]\">Durée de la séance</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-end min-w-[35.880001068115234px] pl-[70.359px] relative\" data-node-id=\"566:6341\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6342\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:6343\">\n <p className=\"leading-[20px]\">37 s</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6344\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:6345\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:6346\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6347\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:6348\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:6349\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE De la sÉance</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6350\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6351\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6352\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6353\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6354\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6355\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6356\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6357\">\n <p className=\"leading-[16px]\">25 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6358\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6359\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6360\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6361\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6362\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:6363\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:6364\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:6365\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:6366\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:6367\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6368\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:6369\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6370\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6371\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6372\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6374\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6375\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6376\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6377\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:6379\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6380\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:6381\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6383\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:6384\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6385\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:6386\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6388\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6389\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6390\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:6391\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6393\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6394\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6395\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:6396\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6398\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6399\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6400\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:6401\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6403\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6404\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6467":"const imgContainer = \"https://www.figma.com/api/mcp/asset/85924242-63c5-474b-8f28-35483ae806cd.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/471072f2-8ec5-484a-8384-f31bcb4956f4.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/b10693b8-a470-41a3-86aa-b5a9a53e33ac.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/37de0a91-4c02-440b-b207-02f8b35d132b.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/ad2d8d36-1457-4747-934b-9ceb531dfd7f.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/aa2ef7cf-a287-4a5d-96c3-6014e2fa08d4.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/ff4b7372-fdec-40e7-96b7-7eb13ad5a2a8.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/e68fb5fa-5fcf-4d10-97b3-1cc6775d1362.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/bdc8ca94-a823-4af8-9a44-2fcf17a2a541.svg\";\n\nexport default function EndormissementPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:6467\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Endormissement - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:6468\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:6469\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6470\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:6471\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Endormissement</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6472\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:6473\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:6475\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:6476\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0 w-[358px]\" data-node-id=\"566:6477\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:6478\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:6479\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:6480\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:6482\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:6483\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center tracking-[-0.5px] w-[267px] whitespace-pre-wrap\" data-node-id=\"566:6484\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0\">Un rythme haptique ralentit très</p>\n <p className=\"leading-[24.75px] mb-0\">{`progressivement pour `}</p>\n <p className=\"leading-[24.75px]\">{`accompagner l'endormissement. Posez le poignet, ne faites rien. `}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[80px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6485\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6486\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:6487\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:6488\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6489\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6490\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6491\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6492\">\n <p className=\"leading-[16px]\">20 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6493\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6494\">\n <p className=\"leading-[16px]\">30 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:6495\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:6496\">\n <p className=\"leading-[16px]\">45 MIN</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6497\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:6498\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6499\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:6500\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:6501\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:6502\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:6503\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:6504\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6505\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:6506\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6507\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6508\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6509\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6511\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6512\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6513\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6514\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:6516\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6517\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:6518\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6520\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:6521\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6522\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:6523\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6525\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6526\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6527\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:6528\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6530\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6531\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6532\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:6533\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6535\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6536\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6537\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:6538\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6540\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6541\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6542":"const imgInfo = \"https://www.figma.com/api/mcp/asset/ca3bc240-01bb-434b-b521-c27ae2a1fdf0.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:6542\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:6543\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6544\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:6545\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[140px] relative shrink-0 w-[285px]\" data-node-id=\"566:6547\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] whitespace-nowrap\" data-node-id=\"566:6548\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`Le rythme des vibrations décélère de `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`façon presque imperceptible, pour `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`accompagner le ralentissement naturel `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`du corps vers le sommeil. Il propose un `}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`cadre lent sur lequel l'endormissement`}</p>\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`peut se déposer, sans prétendre `}</p>\n <p className=\"leading-[20px] whitespace-pre\">entraîner le cœur.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:6405":"const imgContainer = \"https://www.figma.com/api/mcp/asset/0b51a1b1-3c0a-430e-92f2-195ae55c02de.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/909cd81b-b8ca-40b3-a6dd-f8a5ca4f7e9f.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/ad25b98a-b752-4bd5-ba76-d7c8ff9160cb.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/6d6214f0-0fe0-4625-be7a-01cfbe3b3680.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/b62918f8-6ed3-4b70-9348-3865dff67cac.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/5fd92746-64b6-481c-a054-3b0a25b635dd.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/0611e364-95fd-4491-ab22-a12295bb0559.svg\";\n\nexport default function AncrerRestitution() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:6405\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Ancrer - Restitution\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:6406\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:6407\" data-name=\"Validation / Visual Focus Area:margin\">\n <div className=\"content-stretch flex flex-col h-[218px] items-center relative shrink-0 w-full\" data-node-id=\"566:6408\" data-name=\"Validation / Visual Focus Area\">\n <div className=\"content-stretch flex flex-col gap-[12px] h-[218px] items-center py-[12px] relative shrink-0 w-full\" data-node-id=\"566:6409\" data-name=\"Container\">\n <div className=\"content-stretch flex items-start relative shrink-0\" data-node-id=\"566:6410\" data-name=\"Container\">\n <div className=\"absolute bg-[rgba(121,211,255,0.2)] blur-[32px] inset-0 rounded-[9999px]\" data-node-id=\"566:6411\" data-name=\"Overlay+Blur\" />\n <div className=\"border-2 border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:6412\" data-name=\"Border\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:6413\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:6415\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:6416\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"566:6417\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Séance terminée</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[25.58px] relative shrink-0 w-full\" data-node-id=\"566:6418\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center w-[362px]\" data-node-id=\"566:6419\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Prenez quelques secondes pour</p>\n <p className=\"leading-[20px]\">observer votre état.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:6420\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:6421\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:6422\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:6423\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:6424\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:6425\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:6426\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:6427\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:6428\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6429\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:6430\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:6431\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:6433\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6434\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:6435\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:6436\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:6438\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6439\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:6440\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:6441\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:6443\" data-name=\"Recommendation Card (Asymmetric / Specialized UI)\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:6444\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[37.897px] relative shrink-0 w-[27.667px]\" data-node-id=\"566:6445\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6447\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:6448\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"566:6449\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">CONSEIL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:6450\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:6451\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0\">Une respiration 4–6 peut prolonger la</p>\n <p className=\"leading-[19.5px] mb-0\">descente. Elle stimule le nerf vague pour</p>\n <p className=\"leading-[19.5px]\">ancrer durablement ce calme.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-t content-stretch flex flex-col from-[#0c141f] gap-[12px] items-start p-[20px] relative shrink-0 to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"566:6452\" data-name=\"Footer - Bottom Actions Layer\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:6453\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[56px] left-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] top-0\" data-node-id=\"566:6454\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#00465e] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:6455\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TERMINER</p>\n </div>\n </div>\n <div className=\"border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[56px] items-center justify-center pb-[18.5px] pt-[17.5px] px-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:6456\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:6457\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">MESURER MON ÉTAT</p>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:6458\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:6459\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:6460\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:6462\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:6463\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:6464\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:6465\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7095":"const imgContainer = \"https://www.figma.com/api/mcp/asset/d8b887f7-abb0-4bca-8a0e-fdd5f32b6e0c.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/3da36048-fa15-49e8-9899-c1ff6411a4eb.svg\";\nconst imgAnchor = \"https://www.figma.com/api/mcp/asset/65a39726-7f0c-4087-9774-440b897046d0.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/0398852c-d016-4ebd-97df-1ab67d7f71bb.svg\";\nconst imgCloudMoon = \"https://www.figma.com/api/mcp/asset/9b3c8345-1b01-4ca6-a294-4645136e665b.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/6fb1a3ba-8535-45ca-b8e7-18efd17489b1.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/595383bf-6694-4d66-ad67-a815732aed2a.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/586ea5af-afe2-4240-8036-af05143102c1.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/d6444641-f1a9-4d13-83d1-bf58a32f1a44.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/66dda6e0-bf61-4950-9c2f-9965f7d59d1a.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/8558ea13-23c7-47c8-b1d6-06679b027fbc.svg\";\n\nexport default function VosOutilsRecentrer() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7095\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - Recentrer\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7096\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7097\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7098\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7100\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7101\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7102\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7103\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[794px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7105\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[76px] items-start relative shrink-0 w-full\" data-node-id=\"566:7106\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-baseline justify-between relative shrink-0 w-full\" data-node-id=\"566:7107\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"566:7108\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Recentrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7109\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"566:7110\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Un repère visuel et une vibration se synchronisent. Votre attention se pose sur ce point.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[20px] h-[384px] items-start relative shrink-0 w-full\" data-node-id=\"566:7111\" data-name=\"Protocol Bento Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7112\" data-name=\"Micro-Ancrage\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7113\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7114\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7115\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7116\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7117\" data-name=\"Anchor\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgAnchor} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7119\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7120\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7121\">\n <p className=\"leading-[24px]\">Focus</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7122\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:7123\">\n <p className=\"leading-[20px]\">{`Suivez une cible du regard `}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7124\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7126\" data-name=\"Apaiser\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7127\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7128\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7129\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7130\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7131\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7133\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7134\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7135\">\n <p className=\"leading-[24px]\">Concentrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7136\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:7137\">\n <p className=\"leading-[20px]\">Suivez un point du doigt</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7138\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7140\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7141\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7142\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7143\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7144\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7145\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7147\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7148\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7149\">\n <p className=\"leading-[24px]\">Miroir Cardiaque</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7150\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:7151\">\n <p className=\"leading-[20px]\">Vos battements en temps réel</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7152\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[154px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7154\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7155\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7156\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:7157\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[120px] relative shrink-0 w-[285px]\" data-node-id=\"566:7159\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[120px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"566:7160\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Fixer l'attention sur un repère sensoriel concret occupe le cortex préfrontal et laisse moins de place à la rumination. L'effet attentionnel est bien documenté ; son prolongement sur l'équilibre nerveux est plus indirect.`}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7161\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7162\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7163\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7165\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7166\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7167\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7168\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7170\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7171\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7172\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7173\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7175\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7176\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7177\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7178\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7180\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7181\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7182\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7183\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7185\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7186\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7187":"const imgContainer = \"https://www.figma.com/api/mcp/asset/d12c1590-69fa-4d6c-9b6d-9393b04656c2.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/d93921b2-bc0b-48c4-86f3-1f135711afae.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/7e2588ba-0a39-4543-b2af-f9e0c18baa8c.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/912e4777-8745-4ce8-bc19-21e7ef059bf3.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/9993037b-7599-4747-866d-917699c15f78.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/fedd7ed7-c3fa-4c5a-aef4-d788869a30ff.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/5b57f699-aad1-4193-86dc-096898a0015d.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/5b84614c-500b-4212-aef3-cd1e15ad99dc.svg\";\n\nexport default function FocusPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7187\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Focus - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7188\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:7189\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7190\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:7191\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Focus</p>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7192\" data-name=\"Button\" />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:7193\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:7194\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7195\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:7196\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:7197\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:7198\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:7200\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[102px] items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:7201\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:7202\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`L'attention soutenue sur une `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`cible lente réduit le vagabondage `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`de l'esprit. Plus le regard reste`}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">engagé, moins les pensées dérivent.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7203\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:7204\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7205\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7206\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7207\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7208\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7209\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7210\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7211\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7212\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7213\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7214\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7215\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7216\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7217\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7218\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7219\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7220\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7221\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7223\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7224\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7225\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7226\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7228\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7229\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7230\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7232\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7233\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7234\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7235\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7237\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7238\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7239\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7240\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7242\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7243\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7244\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7245\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7247\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7248\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7249\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7250\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7252\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7253\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7254":"const imgContainer = \"https://www.figma.com/api/mcp/asset/1ad21a73-9a05-4489-beef-c238005c939a.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/afd1abfb-87d1-4d9a-9b20-43467e0bae3b.svg\";\n\nexport default function FocusSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7254\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Focus - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7255\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7256\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7257\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7259\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7260\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7261\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7262\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:7264\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[28px] items-start relative shrink-0\" data-node-id=\"566:7265\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[21px] items-start relative shrink-0\" data-node-id=\"566:7266\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[21px] items-center relative shrink-0 w-full\" data-node-id=\"566:7267\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:7268\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Suivez la cible du regard, sans effort.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:7269\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:7270\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:7271\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:7272\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:7273\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:7274\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:7275\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"566:7276\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"566:7277\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7278\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:7279\">\n <p className=\"leading-[15px]\">Focus</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:7280\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:7281\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:7282\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:7283\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:7284\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:7285\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7286\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7287\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:7288\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:7289\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:7290\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7291\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:7292\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:7293\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:7294\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7295\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7296":"const imgContainer = \"https://www.figma.com/api/mcp/asset/82a620cb-2685-47c6-ade6-4772516341eb.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/87b30da4-2bfe-4173-a166-a63e7d239414.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/6acf8ae3-e84c-4e10-b155-0f32270975b2.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/057835a0-a75f-4a51-b69b-000aa4704690.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/c2f18353-f8ff-45a1-9164-edb9be8a8f04.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/e047cab9-c317-4368-8f6f-00f927320b67.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/77584853-2576-4b23-a389-9b6489c5e5b9.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/fdbfd07c-adb9-46cd-ad8d-ae0299bce536.svg\";\n\nexport default function ConcentrerPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7296\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Concentrer - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7297\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:7298\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7299\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:7300\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Concentrer</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:7301\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:7302\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7303\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:7304\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:7305\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:7306\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:7308\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:7309\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:7310\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Engager la main en plus du regard `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`renforce l'ancrage : `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`la boucle sensori-motrice mobilise `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`davantage l'attention que le seul `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`suivi visuel. Utile quand l'esprit `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">{`est trop agité pour se poser. `}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7311\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:7312\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7313\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7314\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7315\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7316\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7317\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7318\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7319\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7320\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7321\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7322\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7323\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7324\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7325\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7326\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7327\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7328\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7329\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7331\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7332\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7333\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7334\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7336\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7337\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7338\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7340\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7341\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7342\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7343\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7345\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7346\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7347\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7348\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7350\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7351\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7352\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7353\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7355\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7356\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7357\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7358\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7360\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7361\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7362":"const imgContainer = \"https://www.figma.com/api/mcp/asset/62c8ebf5-e57c-40c1-9624-733fc8ad3606.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/0ce66153-addd-43a4-b436-be4c20f372cb.svg\";\n\nexport default function ConcentrerSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7362\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Concentrer - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7363\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7364\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7365\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7367\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7368\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7369\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7370\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:7372\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[53px] items-start relative shrink-0\" data-node-id=\"566:7373\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[53px] items-start relative shrink-0\" data-node-id=\"566:7374\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[53px] items-center relative shrink-0 w-full\" data-node-id=\"566:7375\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[53px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center w-[355px] whitespace-pre-wrap\" data-node-id=\"566:7376\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0\">{`Gardez le doigt sur le point lumineux `}</p>\n <p className=\"leading-[28px]\">et suivez-le.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:7377\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:7378\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:7379\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:7380\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:7381\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:7382\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:7383\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"566:7384\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"566:7385\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7386\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:7387\">\n <p className=\"leading-[15px]\">Concentrer</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:7388\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:7389\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:7390\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:7391\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:7392\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:7393\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7394\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7395\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:7396\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:7397\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:7398\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7399\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:7400\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:7401\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:7402\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7403\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7404":"const imgContainer = \"https://www.figma.com/api/mcp/asset/e41e0474-fd90-40fc-a263-f9efac527fab.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/019dd122-a31a-4dd5-b0df-09255b858e9c.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/028a1571-d7ac-4cb0-b049-50c2dff1d392.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/d5ab4a57-f3ed-49f9-b60f-32917648bdf9.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/d5ec2eb2-94a5-4c7e-9dce-8fe0880a73f1.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/42c860a2-822c-4a61-a042-882bb8b0d16a.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/00051b09-6b46-4f5b-b535-e88222c300da.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/76f5c076-6224-42a5-811c-3b2bd264b945.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/316f9dc4-2ee0-4541-bcc8-8d2fe149e585.svg\";\n\nexport default function MiroirCardiaquePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7404\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Miroir Cardiaque - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7405\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:7406\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7407\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:7408\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Miroir Cardiaque</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[349.88px] items-center relative shrink-0 w-[362px]\" data-node-id=\"566:7409\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex h-[349.88px] items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:7410\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7411\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:7412\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:7413\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:7414\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:7416\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:7417\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:7418\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{` Posez le doigt sur la caméra. `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Chaque battement de votre cœur `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`revient par une vibration `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">et un cercle qui pulse.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7419\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:7420\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7421\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7422\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7423\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7424\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7425\">\n <p className=\"leading-[16px]\">3 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7426\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7427\">\n <p className=\"leading-[16px]\">5 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7428\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7429\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7430\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7431\">\n <p className=\"leading-[16px]\">AUTRE</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7432\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7433\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7434\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[173px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7435\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7436\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7437\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:7438\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[139px] relative shrink-0 w-[285px]\" data-node-id=\"566:7440\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[139px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"566:7441\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Percevoir ses propres battements développe l'interoception, la conscience des signaux internes du corps, associée à une meilleure régulation émotionnelle. La caméra estime votre rythme cardiaque ; la restitution en suit la cadence, sans viser le battement exact.`}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7442\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7443\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7444\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7446\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7447\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7448\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7449\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7451\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7452\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7453\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7455\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7456\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7457\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7458\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7460\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7461\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7462\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7463\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7465\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7466\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7467\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7468\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7470\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7471\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7472\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7473\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7475\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7476\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7477":"const imgContainer = \"https://www.figma.com/api/mcp/asset/43cae717-6879-455f-b752-23b780ee3e9a.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/2a506491-20f5-409d-81a8-81d1138e551c.svg\";\n\nexport default function MiroirCardiaqueSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7477\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Miroir Cardiaque - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7478\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7479\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7480\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7482\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7483\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7484\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7485\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[874px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:7487\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[27px] items-start relative shrink-0\" data-node-id=\"566:7488\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[53px] items-start relative shrink-0\" data-node-id=\"566:7489\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex flex-col h-[27px] items-center relative shrink-0 w-full\" data-node-id=\"566:7490\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] h-[27px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center tracking-[-0.1px] w-[355px]\" data-node-id=\"566:7491\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">{`Portez votre attention vers l'intérieur.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:7492\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:7493\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:7494\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:7495\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:7496\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:7497\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:7498\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[80px] relative shrink-0\" data-node-id=\"566:7499\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[8px] items-center relative shrink-0\" data-node-id=\"566:7500\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7501\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:7502\">\n <p className=\"leading-[15px]\">Miroir Cardiaque</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:7503\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:7504\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:7505\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:7506\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:7507\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:7508\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7509\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7510\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:7511\">\n <p className=\"leading-[20px]\">04:59</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:7512\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:7513\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7514\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:7515\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:7516\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:7517\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7518\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7519":"const imgContainer = \"https://www.figma.com/api/mcp/asset/a4e0c1b7-e67e-4b92-adb9-6af9777fa5c8.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/3b5a0809-2756-4853-96b7-f69328adfb44.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/50620617-1adf-4c71-a60e-9781028bc45c.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/5271bc00-bb77-4a5c-8896-3b19c1026310.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/76b7f370-bcb9-4601-96cf-c35305470cfe.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/ed696ca4-0e9d-4cfe-a323-7ff5daba2d84.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/eb30891e-6e4e-4bd6-83bb-558f49e3be6f.svg\";\n\nexport default function RecentrerRestitution() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7519\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Recentrer - Restitution\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7520\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7521\" data-name=\"Validation / Visual Focus Area:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:7522\" data-name=\"Validation / Visual Focus Area\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center py-[12px] relative shrink-0\" data-node-id=\"566:7523\" data-name=\"Container\">\n <div className=\"content-stretch flex items-start relative shrink-0\" data-node-id=\"566:7524\" data-name=\"Container\">\n <div className=\"absolute bg-[rgba(121,211,255,0.2)] blur-[32px] inset-0 rounded-[9999px]\" data-node-id=\"566:7525\" data-name=\"Overlay+Blur\" />\n <div className=\"border-2 border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:7526\" data-name=\"Border\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:7527\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7529\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7530\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"566:7531\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Séance terminée</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[280px] px-[25.58px] relative shrink-0\" data-node-id=\"566:7532\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:7533\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Prenez quelques secondes pour</p>\n <p className=\"leading-[20px]\">observer votre état.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:7534\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:7535\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:7536\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:7537\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:7538\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:7539\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:7540\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7541\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:7542\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7543\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:7544\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:7545\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:7547\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7548\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:7549\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:7550\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:7552\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7553\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:7554\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:7555\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:7557\" data-name=\"Recommendation Card (Asymmetric / Specialized UI)\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:7558\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[37.897px] relative shrink-0 w-[27.667px]\" data-node-id=\"566:7559\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7561\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7562\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"566:7563\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">CONSEIL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7564\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7565\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0\">Une respiration 4–6 peut prolonger la</p>\n <p className=\"leading-[19.5px] mb-0\">descente. Elle stimule le nerf vague pour</p>\n <p className=\"leading-[19.5px]\">ancrer durablement ce calme.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-t content-stretch flex flex-col from-[#0c141f] gap-[12px] items-start p-[20px] relative shrink-0 to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"566:7566\" data-name=\"Footer - Bottom Actions Layer\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:7567\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[56px] left-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] top-0\" data-node-id=\"566:7568\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#00465e] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7569\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TERMINER</p>\n </div>\n </div>\n <div className=\"border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[56px] items-center justify-center pb-[18.5px] pt-[17.5px] px-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:7570\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7571\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">MESURER MON ÉTAT</p>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7572\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7573\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7574\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7576\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7577\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7578\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7579\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7582":"const imgContainer = \"https://www.figma.com/api/mcp/asset/ddefbb0c-cd50-4365-a98e-0c17c3568f39.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/d18095d0-0fe8-4c0d-bc38-b7f3df207e09.svg\";\nconst imgAnchor = \"https://www.figma.com/api/mcp/asset/b8304c66-47b5-413a-ae11-832e9fe48cf8.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/f6cc4331-b544-4a31-a6c5-eb5ae50187d6.svg\";\nconst imgCloudMoon = \"https://www.figma.com/api/mcp/asset/b4f8ff79-c303-487b-b02b-1c6e220b23a0.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/6c8b121a-8af8-4c86-9fe2-9764b0defabd.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/ef5f5e19-2efd-476f-a84e-98c3b70ca6ec.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/28e1313f-854e-4f64-9c57-dfe4a47ea650.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/e27a3aed-c58e-4058-aee5-4be1d99daa0f.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/e6185134-11c6-4814-b77e-1befd450177c.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/73797e63-ca55-4d32-b4e2-c47a348f114e.svg\";\n\nexport default function VosOutilsMeditationHaptique() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7582\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - Méditation haptique\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7583\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7584\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7585\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7587\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7588\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7589\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7590\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[960px] items-center justify-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7592\" data-name=\"Main Content Canvas\">\n <div className=\"content-stretch flex flex-col gap-[8px] h-[96px] items-start relative shrink-0 w-full\" data-node-id=\"566:7593\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-baseline justify-between relative shrink-0 w-full\" data-node-id=\"566:7594\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"566:7595\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Méditation haptique</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7596\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"566:7597\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Aucune voix, aucune musique, aucun écran. La montre délivre des vibrations éparses ;</p>\n <p className=\"leading-[20px]\">{`le silence entre elles est l'espace de la pratique.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[20px] h-[510px] items-start relative shrink-0 w-full\" data-node-id=\"566:7598\" data-name=\"Protocol Bento Grid\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7599\" data-name=\"Micro-Ancrage\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7600\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7601\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7602\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7603\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7604\" data-name=\"Anchor\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgAnchor} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7606\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7607\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7608\">\n <p className=\"leading-[24px]\">Découverte</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7609\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:7610\">\n <p>\n <span className=\"leading-[20px]\">{`Premier contact `}</span>\n <span className=\"leading-[20px] text-[#79d3ff]\">• 5min</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7611\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7613\" data-name=\"Apaiser\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7614\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7615\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7616\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7617\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7618\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7620\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7621\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7622\">\n <p className=\"leading-[24px]\">Présence</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7623\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:7624\">\n <p>\n <span className=\"leading-[20px]\">{`Protocole signature, adaptatif `}</span>\n <span className=\"leading-[20px] text-[#79d3ff]\">{`• 10–45 min `}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7625\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7627\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7628\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7629\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7630\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7631\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7632\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7634\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7635\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7636\">\n <p className=\"leading-[24px]\">Sensation</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7637\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:7638\">\n <p>\n <span className=\"leading-[20px]\">{`Vibration comme objet d'attention `}</span>\n <span className=\"leading-[20px] text-[#79d3ff]\">{`• 8–16 min `}</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7639\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7641\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7642\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7643\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7644\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7645\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7646\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7648\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7649\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7650\">\n <p className=\"leading-[24px]\">Atterrissage</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7651\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:7652\">\n <p className=\"leading-[20px]\">Redescente pilotée par votre cœur</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7653\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border-[#4ab8e8] border-b border-l-4 border-r border-solid border-t content-stretch flex flex-col items-start overflow-clip pl-[24px] pr-[21px] py-[21px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7655\" data-name=\"Booster\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7656\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"566:7657\" data-name=\"Container\">\n <div className=\"border border-[rgba(74,184,232,0.3)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[99px] shrink-0 size-[40px]\" data-node-id=\"566:7658\" data-name=\"Background+Border+Shadow\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7659\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7660\" data-name=\"CloudMoon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgCloudMoon} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7662\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7663\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7664\">\n <p className=\"leading-[24px]\">Libre</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7665\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:7666\">\n <p>\n <span className=\"leading-[20px]\">{`Minuteur silencieux `}</span>\n <span className=\"leading-[20px] text-[#79d3ff]\">• 10–60 min</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:7667\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[174px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7669\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7670\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7671\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:7672\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[120px] relative shrink-0 w-[285px]\" data-node-id=\"566:7674\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[140px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:7675\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`La méditation haptique repose sur l'observation ouverte : rien à modifier, ni le souffle ni une attention dirigée. `}</p>\n <p className=\"leading-[20px]\">{`Des vibrations rares ponctuent un long silence, comme des repères de présence.C'est le silence qui fait la pratique ; l'haptique le structure. `}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7676\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7677\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7678\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7680\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7681\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7682\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7683\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7685\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7686\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7687\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7688\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7690\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7691\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7692\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7693\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7695\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7696\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7697\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7698\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7700\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7701\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7702":"const imgContainer = \"https://www.figma.com/api/mcp/asset/1041df20-36af-40f8-8199-9888042968c0.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/855c1c30-1db0-485a-aff3-337af5f4f9a6.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/2faf811b-0050-40c9-acaf-754dba6a19b0.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/79537fe6-350d-455d-a850-6795fb683d9c.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/5d6e7812-0878-428e-bd5d-7dac6b9d1928.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/fa6c0f95-224f-40ba-ba94-97350545607d.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/c0e9fc5b-afc7-47aa-a0bb-fbef0bb1cd0b.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/be474a67-e5f1-446c-b2f5-8ec182725162.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/627e7037-355a-4358-9a3d-7f94e22cd57a.svg\";\n\nexport default function DecouvertePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7702\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Découverte - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[939px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7703\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:7704\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7705\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:7706\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Découverte</p>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7707\" data-name=\"Button\" />\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7708\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7709\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:7711\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:7712\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"h-[237px] relative shrink-0 w-[358px]\" data-node-id=\"566:7713\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center justify-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:7714\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:7715\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:7716\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:7718\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[99px] items-center px-[2.81px] relative shrink-0 w-[322px] z-[1]\" data-node-id=\"566:7719\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center tracking-[-0.2px] w-[316px] whitespace-pre-wrap\" data-node-id=\"566:7720\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0\">{`Cinq minutes de vibrations espacées. Observez, sans rien modifier. `}</p>\n <p className=\"leading-[24.75px]\">{`La séance se déroule sur votre montre, écran éteint. `}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7721\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[127px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:7722\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7723\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7724\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7725\">\n <p className=\"leading-[24px]\">Densité du Protocole</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7726\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[15px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:7727\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:7728\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:7729\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[77px] items-center relative shrink-0 w-full\" data-node-id=\"566:7730\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7731\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7732\">\n <p className=\"leading-[16px]\">Discret</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7733\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7734\">\n <p className=\"leading-[16px]\">standard</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7735\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7736\">\n <p className=\"leading-[16px]\">élevé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7737\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7738\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7739\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7740\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7741\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:7742\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:7743\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7744\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7745\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7746\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7747\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7748\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7749\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7751\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7752\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7753\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7754\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7756\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7757\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7758\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7760\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7761\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7762\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7763\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7765\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7766\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7767\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7768\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7770\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7771\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7772\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7773\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7775\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7776\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7777\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7778\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7780\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7781\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7782":"const imgInfo = \"https://www.figma.com/api/mcp/asset/9b93f809-171b-40bb-9205-620e7ef89e01.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:7782\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7783\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7784\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:7785\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[98px] relative shrink-0 w-[285px]\" data-node-id=\"566:7787\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[98px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"566:7788\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Une entrée en matière courte, pour éprouver ce que veut dire méditer par l'haptique. Peu de vibrations, beaucoup de silence : il n'y a rien à réussir, seulement à observer ce qui se présente.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7789":"const imgContainer = \"https://www.figma.com/api/mcp/asset/90ae41ac-f6cd-4c4e-b555-95a1b470b4c8.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/3f6ba49b-222a-4b8c-b3fb-e2cd73227ded.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/72dc73e9-62f5-4e06-9471-565459e0203e.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/5332e4f7-dccb-48bc-9707-adfd0cb807be.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/43bfb836-2553-4a23-a8ae-01b05e9604a5.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/8f7525d1-eff8-41e9-8aac-84888821b031.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/5af986e3-1aad-4749-b66f-b7d600048a71.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/875060a5-3a27-47f5-8505-256072bd410c.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/c627e967-fe84-438a-a097-3c590a1d08de.svg\";\n\nexport default function PresencePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7789\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Présence - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1036px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7790\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:7791\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7792\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:7793\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Présence</p>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7794\" data-name=\"Button\" />\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7795\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7796\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:7798\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:7799\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"h-[222px] relative shrink-0\" data-node-id=\"566:7800\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:7801\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:7802\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:7803\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:7805\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:7806\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center whitespace-nowrap\" data-node-id=\"566:7807\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{` La montre espace ses vibrations `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`à mesure que vous vous posez, `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`et vous rappelle doucement `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">{`si votre attention s'éloigne.`}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7808\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7809\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:7810\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7811\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7812\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7813\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7814\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7815\">\n <p className=\"leading-[16px]\">10 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7816\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7817\">\n <p className=\"leading-[16px]\">15 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7818\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7819\">\n <p className=\"leading-[16px]\">20 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7820\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7821\">\n <p className=\"leading-[16px]\">30 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7822\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7823\">\n <p className=\"leading-[16px]\">45 MIN</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7824\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[127px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:7825\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7826\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7827\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7828\">\n <p className=\"leading-[24px]\">Densité du Protocole</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7829\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[15px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:7830\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:7831\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:7832\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[77px] items-center relative shrink-0 w-full\" data-node-id=\"566:7833\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7834\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7835\">\n <p className=\"leading-[16px]\">Discret</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7836\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7837\">\n <p className=\"leading-[16px]\">standard</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7838\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7839\">\n <p className=\"leading-[16px]\">élevé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7840\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7841\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7842\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7843\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7844\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:7845\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:7846\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7847\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7848\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7849\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7850\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7851\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7852\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7854\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7855\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7856\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7857\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7859\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7860\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7861\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7863\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7864\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7865\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7866\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7868\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7869\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7870\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7871\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7873\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7874\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7875\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7876\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7878\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7879\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7880\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7881\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7883\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7884\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7885":"const imgInfo = \"https://www.figma.com/api/mcp/asset/80713e26-b675-4aba-8e88-21a32b41c304.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:7885\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7886\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7887\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:7888\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[195px] relative shrink-0 w-[285px]\" data-node-id=\"566:7890\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[200px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:7891\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Présence s'adapte à vous en continu. Tant que vous bougez ou que votre cœur reste haut, les rappels sont fréquents ; à mesure que vous vous stabilisez, ils s'espacent, jusqu'au silence presque complet. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Si l'attention repart, une vibration douce vous ré-ancre. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Une pratique d'attention ouverte : `}</p>\n <p className=\"leading-[20px]\">{`rien à faire, seulement rester présent. `}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7892":"const imgContainer = \"https://www.figma.com/api/mcp/asset/2492480c-e1d0-433a-add0-1299561e48cc.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/9a11f084-cba3-4f27-aefa-3baf0116c572.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/0a8fce9c-7386-4622-afb1-38e8953eb469.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/92580b36-a557-4910-9828-c17617e55258.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/a987bb8f-2d28-4909-939d-f1b33a0414d2.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/968d59aa-213b-4cec-85ac-cb3f466af300.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/aa9e8f0e-b9a4-4e4e-9b09-b3d62b032c79.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/3562a0fc-331c-43ea-88c1-29709e34e3ff.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/d7f0e8dd-138a-4094-a4a2-1de4a8ed13ee.svg\";\n\nexport default function SensationPreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7892\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Sensation - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1004px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7893\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:7894\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7895\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:7896\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Sensation</p>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7897\" data-name=\"Button\" />\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7898\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7899\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:7901\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:7902\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"h-[190px] relative shrink-0\" data-node-id=\"566:7903\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:7904\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:7905\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:7906\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:7908\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:7909\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:7910\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`La vibration elle-même devient `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`l'objet de votre attention. `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">Une sensation naît, dure, puis disparaît.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7911\">\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7912\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:7913\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:7914\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">DURÉE DU PROTOCOLE</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col items-start p-[9px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7915\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7916\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between relative size-full\">\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7917\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7918\">\n <p className=\"leading-[16px]\">8 MIN</p>\n </div>\n </div>\n <div className=\"bg-[#4ab8e8] content-stretch drop-shadow-[0px_0px_5px_rgba(115,209,255,0.3)] flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7919\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#00465e] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7920\">\n <p className=\"leading-[16px]\">12 MIN</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-center justify-center min-w-px py-[12px] relative rounded-[8px]\" data-node-id=\"566:7921\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] whitespace-nowrap\" data-node-id=\"566:7922\">\n <p className=\"leading-[16px]\">16 MIN</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7923\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[127px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:7924\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7925\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7926\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7927\">\n <p className=\"leading-[24px]\">Densité du Protocole</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:7928\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[15px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:7929\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:7930\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:7931\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[77px] items-center relative shrink-0 w-full\" data-node-id=\"566:7932\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7933\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7934\">\n <p className=\"leading-[16px]\">Discret</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7935\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7936\">\n <p className=\"leading-[16px]\">standard</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7937\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:7938\">\n <p className=\"leading-[16px]\">élevé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:7939\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:7940\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7941\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:7942\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:7943\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:7944\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:7945\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:7946\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:7947\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:7948\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:7949\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7950\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:7951\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7953\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:7954\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:7955\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:7956\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:7958\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:7959\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:7960\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7962\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:7963\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7964\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:7965\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7967\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7968\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7969\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:7970\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7972\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7973\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7974\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:7975\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7977\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7978\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:7979\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:7980\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7982\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:7983\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7984":"const imgInfo = \"https://www.figma.com/api/mcp/asset/f8739a31-2191-4cca-ac1c-2c05bd4d8574.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:7984\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7985\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7986\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:7987\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[159px] relative shrink-0 w-[285px]\" data-node-id=\"566:7989\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[159px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:7990\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Ici, l'attention se pose sur la vibration comme sur un objet à observer. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Elle apparaît, s'installe, s'efface ; `}</p>\n <p className=\"leading-[20px]\">{`et vous suivez cette trace jusque dans le silence qui suit. Observer une sensation naître et disparaître, sans la retenir, entraîne l'attention à ce qui se passe dans le corps.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:7991":"const imgContainer = \"https://www.figma.com/api/mcp/asset/cbad0a0b-892f-4539-9a72-099af4730177.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/c9ffd4e3-6eb1-4a30-bad4-05b5a6931dc7.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/02f98384-c29e-48bd-b394-6cb1c0659415.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/5c7a76f3-bf30-4f77-a043-09f0c0612c28.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/b5dec7ca-f1c8-4268-a053-ad104443e9f7.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/b07bf510-e78e-4bfa-8009-e78d1f4abf84.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/21940fde-93b6-4162-beac-f9fbdd114039.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/ff13dc96-473a-4e7e-957e-8d02ec3b9c40.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/d0b6e563-ae1c-4f1f-82ef-0ddde4188f7e.svg\";\n\nexport default function AtterrissagePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:7991\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Atterrissage - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[945px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:7992\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:7993\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:7994\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:7995\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Atterrissage</p>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7996\" data-name=\"Button\" />\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:7997\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:7998\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:8000\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:8001\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"h-[243px] relative shrink-0\" data-node-id=\"566:8002\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:8003\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:8004\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:8005\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:8007\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:8008\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:8009\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Une redescente sans durée fixe : `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`la séance se termine quand `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`votre cœur s'apaise. `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Après une journée tendue, `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">après le sport, avant une échéance.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8023\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[127px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:8024\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:8025\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8026\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:8027\">\n <p className=\"leading-[24px]\">Densité du Protocole</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:8028\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[15px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:8029\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:8030\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:8031\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[77px] items-center relative shrink-0 w-full\" data-node-id=\"566:8032\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8033\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:8034\">\n <p className=\"leading-[16px]\">Discret</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8035\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:8036\">\n <p className=\"leading-[16px]\">standard</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8037\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:8038\">\n <p className=\"leading-[16px]\">élevé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8039\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:8040\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8041\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8042\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:8043\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:8044\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:8045\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:8046\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:8047\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:8048\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:8049\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8050\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:8051\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8053\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:8054\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:8055\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:8056\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:8058\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8059\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:8060\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8062\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:8063\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8064\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:8065\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8067\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8068\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8069\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:8070\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8072\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8073\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8074\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:8075\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8077\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8078\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8079\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:8080\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8082\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8083\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:8084":"const imgInfo = \"https://www.figma.com/api/mcp/asset/08570813-65b3-4495-a249-2196cb1b4480.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:8084\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:8085\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8086\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:8087\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[179px] relative shrink-0 w-[285px]\" data-node-id=\"566:8089\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[179px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:8090\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Contrairement aux autres protocoles, Atterrissage n'a pas de minuteur : `}</p>\n <p className=\"leading-[20px] mb-0\">{`il se clôt lorsque votre fréquence cardiaque redescend et se stabilise sous un seuil calculé à partir de votre état de départ. Les vibrations s'espacent au fur et à mesure. `}</p>\n <p className=\"leading-[20px]\">{`La fin est décidée par votre physiologie, quand votre cœur s'est apaisé.`}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:8091":"const imgContainer = \"https://www.figma.com/api/mcp/asset/159b53be-bdee-4212-955f-9cd73edf2b8b.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/c8e0e093-a3bf-4d1f-916e-99793c22ce68.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/d4b3850e-215f-4e84-9661-67a495aebe7c.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/044f2c84-cf88-49b8-8e25-dfebd3b8bfd3.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/a2ced162-a872-4e05-9396-12ffb56a39ff.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/871ad856-4895-4c9c-bf17-ffd33b482752.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/f5a7e2e3-8051-4141-bed0-b326e7e5a7d4.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/993a5085-2e2b-41b3-b7bf-5df57c72bfe6.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/6e944c35-4640-4de8-a373-13f3a21d7664.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/20cdbbf0-e6e7-40e8-ac18-07042fc56363.svg\";\n\nexport default function LibrePreparation() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:8091\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Libre - Préparation\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1093px] items-start max-w-[448px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:8092\" data-name=\"Main - Background Shader\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:8093\" data-name=\"Header Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8094\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[-0.75px] whitespace-nowrap\" data-node-id=\"566:8095\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[36px]\">Libre</p>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:8096\" data-name=\"Button\" />\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:8097\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:8098\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-[362px]\" data-node-id=\"566:8100\" data-name=\"Header Section\">\n <div className=\"bg-[#151c27] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex items-center justify-center overflow-clip px-px py-[90.25px] relative rounded-[24px] shrink-0 w-full\" data-node-id=\"566:8101\" data-name=\"Visual Instruction / Animation Canvas\">\n <div className=\"h-[253px] relative shrink-0\" data-node-id=\"566:8102\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col isolate items-center px-[32px] relative size-full\">\n <div className=\"content-stretch flex flex-col h-[120px] items-start mb-[-0.625px] pb-[24px] relative shrink-0 w-[96px] z-[2]\" data-node-id=\"566:8103\" data-name=\"Margin\">\n <div className=\"border-4 border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-[4px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:8104\" data-name=\"Border\">\n <div className=\"h-[25.5px] relative shrink-0 w-[30px]\" data-node-id=\"566:8105\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"absolute border-4 border-[rgba(0,0,0,0)] border-solid inset-0 rounded-[9999px]\" data-node-id=\"566:8107\" data-name=\"Border\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[2.81px] relative shrink-0 z-[1]\" data-node-id=\"566:8108\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[18px] text-center tracking-[-0.1px] whitespace-nowrap\" data-node-id=\"566:8109\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Un minuteur silencieux. `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`Un signal d'ouverture, le silence `}</p>\n <p className=\"leading-[24.75px] mb-0 whitespace-pre\">{`sur la durée choisie, `}</p>\n <p className=\"leading-[24.75px] whitespace-pre\">une clôture en douceur.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8110\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[106px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:8111\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:8112\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:8113\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8115\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:8116\">\n <p className=\"leading-[24px]\">Durée de la séance</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-[1_0_0] flex-col items-end min-w-[35.880001068115234px] pl-[70.359px] relative\" data-node-id=\"566:8117\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8118\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:8119\">\n <p className=\"leading-[20px]\">17 MIN</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:8120\" data-name=\"Input\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:8121\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:8122\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8123\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col gap-[26px] h-[127px] items-start p-[21px] relative rounded-[18px] shrink-0 w-full\" data-node-id=\"566:8124\" data-name=\"Session Duration\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:8125\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8126\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:8127\">\n <p className=\"leading-[24px]\">Densité du Protocole</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:8128\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[15px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:8129\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:8130\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:8131\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n <div className=\"content-stretch flex gap-[77px] items-center relative shrink-0 w-full\" data-node-id=\"566:8132\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8133\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:8134\">\n <p className=\"leading-[16px]\">Discret</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8135\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:8136\">\n <p className=\"leading-[16px]\">standard</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8137\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[0.6px] uppercase whitespace-nowrap\" data-node-id=\"566:8138\">\n <p className=\"leading-[16px]\">élevé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8139\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:8140\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8141\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8142\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:8143\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:8144\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:8145\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:8146\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:8147\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:8148\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">COMMENCER</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:8149\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8150\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:8151\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8153\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:8154\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:8155\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:8156\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:8158\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8159\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:8160\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8162\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:8163\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8164\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:8165\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8167\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8168\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8169\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:8170\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8172\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8173\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8174\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:8175\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8177\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8178\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8179\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:8180\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8182\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8183\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:8184":"const imgInfo = \"https://www.figma.com/api/mcp/asset/a3c98a3c-b2b6-4123-b56a-3f4905f43fc4.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:8184\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:8185\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8186\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:8187\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[160px] relative shrink-0 w-[285px]\" data-node-id=\"566:8189\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[160px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.3px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:8190\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Pour qui a déjà sa méthode et veut simplement un cadre. `}</p>\n <p className=\"leading-[20px] mb-0\">Le silence est intégral, sans rappel</p>\n <p className=\"leading-[20px] mb-0\">{`intermédiaire. Sa valeur face à un minuteur classique : une clôture par une vibration plutôt que par une sonnerie, une mesure avant/après de votre état, `}</p>\n <p className=\"leading-[20px]\">et un arrêt discret si vous vous endormez.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:8191":"const imgContainer = \"https://www.figma.com/api/mcp/asset/bd53ef8b-735a-4181-95ed-554f993b3ae9.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/46b7a1ce-b18c-42ef-9232-be2a97924dee.svg\";\nconst imgIcon = \"https://www.figma.com/api/mcp/asset/c6f42c04-0c6f-43f8-bb4d-71cd6482bb90.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/b76a551d-d402-4f6b-a561-907a8b5e5176.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/69756194-4095-450f-b204-0e796539aea3.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/61ee71b7-5888-4183-a0c0-c0e6811288c5.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/fd06c61f-2c4e-470c-95bf-b5370d785fec.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/4d318b07-a2e2-49af-8b68-c6767d4c7b9b.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/c4165a20-2853-49da-ade3-07acaab6741f.svg\";\n\nexport default function MeditationHaptiqueRestitution() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:8191\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Méditation haptique - Restitution\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:8192\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col isolate items-center relative shrink-0 w-full\" data-node-id=\"566:8193\" data-name=\"Hero Section\">\n <div className=\"content-stretch flex flex-col h-[173px] items-start relative shrink-0 w-[192px] z-[2]\" data-node-id=\"566:8194\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col h-[173px] items-start justify-center relative shrink-0 w-[192px]\" data-node-id=\"566:8195\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-[1_0_0] items-center justify-center min-h-px relative w-full\" data-node-id=\"566:8196\" data-name=\"Central Icon\">\n <div className=\"bg-[rgba(74,184,232,0.1)] border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex items-center justify-center p-px relative rounded-[9999px] shadow-[0px_0px_15px_0px_rgba(115,209,255,0.15)] shrink-0 size-[128px]\" data-node-id=\"566:8197\" data-name=\"Overlay+Border+Shadow\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:8198\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-center justify-center relative shrink-0 z-[1]\" data-node-id=\"566:8200\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col h-[16px] items-center relative shrink-0 w-full\" data-node-id=\"566:8201\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:8202\">\n <p className=\"leading-[16px]\">Séance terminée</p>\n </div>\n </div>\n <div className=\"bg-[#232a36] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex gap-[7.99px] items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:8203\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:8204\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8206\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] text-center tracking-[0.6px] w-[184px]\" data-node-id=\"566:8207\">\n <p className=\"leading-[16px]\">Temps en état stable : 3 min</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-baseline justify-center relative shrink-0 w-full\" data-node-id=\"566:8208\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic opacity-50 relative shrink-0 text-[#bec8cf] text-[16px] text-center whitespace-nowrap\" data-node-id=\"566:8209\">\n <p className=\"[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-from-font decoration-solid leading-[24px] line-through\">54 ms</p>\n </div>\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"566:8210\" data-name=\"Icon\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgIcon} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[48px] text-center tracking-[-0.96px] whitespace-nowrap\" data-node-id=\"566:8211\">\n <p className=\"leading-[56px]\">61 ms</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center px-[16px] relative shrink-0 w-full\" data-node-id=\"566:8212\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:8213\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Prenez quelques secondes pour</p>\n <p className=\"leading-[20px]\">observer votre état.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:8214\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:8215\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:8216\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:8217\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:8218\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:8219\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:8220\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:8221\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:8222\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8223\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:8224\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:8225\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:8227\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8228\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:8229\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:8230\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:8232\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8233\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:8234\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:8235\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:8237\" data-name=\"Recommendation Card (Asymmetric / Specialized UI)\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:8238\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[37.897px] relative shrink-0 w-[27.667px]\" data-node-id=\"566:8239\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8241\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8242\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"566:8243\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">CONSEIL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8244\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8245\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0\">Une respiration 4–6 peut prolonger la</p>\n <p className=\"leading-[19.5px] mb-0\">descente. Elle stimule le nerf vague pour</p>\n <p className=\"leading-[19.5px]\">ancrer durablement ce calme.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-t content-stretch flex flex-col from-[#0c141f] gap-[12px] items-start p-[20px] relative shrink-0 to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"566:8246\" data-name=\"Footer - Bottom Actions Layer\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:8247\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[56px] left-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] top-0\" data-node-id=\"566:8248\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#00465e] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:8249\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TERMINER</p>\n </div>\n </div>\n <div className=\"border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[56px] items-center justify-center pb-[18.5px] pt-[17.5px] px-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:8250\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:8251\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">MESURER MON ÉTAT</p>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:8252\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8253\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:8254\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8256\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:8257\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:8258\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:8259\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:8320":"const imgContainer = \"https://www.figma.com/api/mcp/asset/96f26012-a051-41b8-84c2-85f9dfacc65c.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/41fde962-8865-4100-aa46-3840a2674093.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/dfd35d97-f38f-4c9e-92bf-86e729bf1547.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/5d81ca23-9edd-4781-8eb0-8f5e7d55ffc7.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/a7d17c75-fe13-4eaf-8d05-323c0129142b.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/0c40cb62-3c39-49ff-8153-978dfcff6d76.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/c6b8b89d-ae0b-4192-aa26-aa51fe9a2d17.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/ef5a3fff-8d45-41a4-9e96-6b9da40e18c5.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/fef8a1ba-73ce-4ad9-aa15-8195e92d78ea.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/ebf9ace5-7c2b-46bb-acb3-b0175f049bb2.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/b85880e4-a55b-4552-bdbe-2fd95a4af0f9.svg\";\n\nexport default function VosOutilsReveilIntelligent() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:8320\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Vos outils - Réveil intelligent\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:8321\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8322\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:8323\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8325\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:8326\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:8327\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:8328\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:8330\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[6.75px] items-start relative shrink-0 w-full\" data-node-id=\"566:8331\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:8332\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8333\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"566:8334\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Réveil intelligent</p>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:8335\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"566:8336\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8338\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"566:8339\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Un réveil qui commence par une montée douce de vibrations, plutôt qu'une sonnerie.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0\" data-node-id=\"566:8340\">\n <div className=\"backdrop-blur-[6px] bg-[#0b1323] border border-[rgba(255,255,255,0.05)] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center overflow-clip p-[33px] relative rounded-[16px] shadow-[0px_4px_24px_-4px_rgba(0,0,0,0.5)] shrink-0 w-full\" data-node-id=\"566:8341\" data-name=\"Time Picker Section\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8342\" data-name=\"Heading 3\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:8343\">\n <p className=\"leading-[16px]\">HEURE DU RÉVEIL</p>\n </div>\n </div>\n </div>\n <div className=\"absolute bg-gradient-to-b from-[rgba(74,184,232,0.05)] inset-0 to-[rgba(74,184,232,0)]\" data-node-id=\"566:8344\" data-name=\"Gradient\" />\n <div className=\"bg-[rgba(255,255,255,0)] border border-[rgba(74,184,232,0.2)] border-solid relative rounded-[9999px] shadow-[0px_0px_30px_0px_rgba(74,184,232,0.1)] shrink-0 size-[192px]\" data-node-id=\"566:8345\" data-name=\"Overlay+Border+Shadow\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center p-px relative size-full\">\n <div className=\"absolute bg-[rgba(74,184,232,0.05)] inset-0 rounded-[9999px]\" data-node-id=\"566:8346\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:8347\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:8348\" data-name=\"Container\">\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"566:8349\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start py-[4px] relative shrink-0\" data-node-id=\"566:8351\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[48px] tracking-[-2.4px] whitespace-nowrap\" data-node-id=\"566:8352\">\n <p className=\"leading-[56px]\">07</p>\n </div>\n </div>\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"566:8353\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pb-[24px] relative shrink-0\" data-node-id=\"566:8355\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[48px] tracking-[-2.4px] whitespace-nowrap\" data-node-id=\"566:8356\">\n <p className=\"leading-[56px]\">:</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:8357\" data-name=\"Container\">\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"566:8358\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start py-[4px] relative shrink-0\" data-node-id=\"566:8360\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Bold'] font-bold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[48px] tracking-[-2.4px] whitespace-nowrap\" data-node-id=\"566:8361\">\n <p className=\"leading-[56px]\">00</p>\n </div>\n </div>\n <div className=\"h-[4.317px] relative shrink-0 w-[7px]\" data-node-id=\"566:8362\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8364\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[14px] whitespace-nowrap\" data-node-id=\"566:8365\">\n <p className=\"leading-[20px]\">Demain, dans 8h 30min</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8366\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:8367\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:8368\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Vibration</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col h-[147px] items-start px-[21px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:8369\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"h-[110px] relative shrink-0 w-full\" data-node-id=\"566:8370\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[16px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[16px] h-[47px] items-start relative shrink-0 w-full\" data-node-id=\"566:8371\" data-name=\"Intensity Slider\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:8372\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8373\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:8374\">\n <p className=\"leading-[20px]\">Intensité</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8375\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:8376\">\n <p className=\"leading-[20px]\">80%</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:8377\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:8378\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[249px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:8379\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:8380\" data-name=\"Softness/Duration Slider\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"566:8381\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8382\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] whitespace-nowrap\" data-node-id=\"566:8383\">\n <p className=\"leading-[20px]\">{`Durée `}</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8384\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:8385\">\n <p className=\"leading-[20px]\">5 min</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:8386\" data-name=\"Input\">\n <div className=\"bg-[#2e3541] flex-[1_0_0] h-[4px] min-w-px relative rounded-[2px]\" data-node-id=\"566:8387\" data-name=\"Background\">\n <div className=\"absolute bg-[#4ab8e8] left-[33.17px] rounded-[9px] shadow-[0px_0px_10px_0px_rgba(74,184,232,0.6)] size-[18px] top-[-7px]\" data-node-id=\"566:8388\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8389\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:8390\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:8391\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Réveil en sommeil léger</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex flex-col h-[147px] items-start px-[21px] py-[17px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:8392\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0 w-[321px]\" data-node-id=\"566:8393\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[8px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center relative shrink-0 w-full\" data-node-id=\"566:8394\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[34.19px] relative shrink-0 w-[239px]\" data-node-id=\"566:8395\" data-name=\"Heading 4\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] w-[205px]\" data-node-id=\"566:8396\">\n <p className=\"leading-[24px]\">Réveil en sommeil léger</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8397\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] w-full\" data-node-id=\"566:8398\">\n <p className=\"leading-[20px]\">La montre cherchera la phase de sommeil la plus légère dans cette fenêtre :</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8399\" data-name=\"Margin\">\n <div className=\"bg-[#232a36] border border-[#2e3541] border-solid content-stretch flex gap-[8px] items-center px-[13px] py-[7px] relative rounded-[8px] shrink-0\" data-node-id=\"566:8400\" data-name=\"Background+Border\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:8401\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8403\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:8404\">\n <p className=\"leading-[20px]\">06:30 - 07:00</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[6px] items-start relative shrink-0 w-[362px]\" data-node-id=\"566:8405\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"566:8406\" data-name=\"Label\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:8407\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Option</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[90px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:8408\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8409\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8410\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:8411\">\n <p className=\"leading-[24px]\">Escalade sonore</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:8412\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8413\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Escalade sonore si pas de réponse</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:8414\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:8415\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] content-stretch drop-shadow-[0px_0px_7.5px_rgba(115,209,255,0.2)] flex items-center justify-center py-[20px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:8416\" data-name=\"Action Button\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:8417\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#003548] text-[11px] text-center uppercase whitespace-nowrap\" data-node-id=\"566:8418\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[24px]\">Activer le réveil</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:8419\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:8420\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:8421\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8423\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:8424\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8425\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:8426\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8428\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8429\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8430\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:8431\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8433\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8434\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8435\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:8436\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8438\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8439\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:8440\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:8441\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8443\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:8444\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:8445":"const imgInfo = \"https://www.figma.com/api/mcp/asset/68ee40fc-c0cc-49e7-82af-030a0027863a.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"566:8445\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:8446\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:8447\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:8448\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[224px] relative shrink-0 w-[285px]\" data-node-id=\"566:8450\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[224px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-[285px] whitespace-pre-wrap\" data-node-id=\"566:8451\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Un réveil qui commence par une montée douce de vibrations, plutôt que par une</p>\n <p className=\"leading-[20px] mb-0\">sonnerie brutale, atténue la lourdeur cognitive du réveil.</p>\n <p className=\"leading-[20px] mb-0\">{`En offre iPhone, il se déclenche à l'heure fixée, avec un motif de vibration que vous réglez. `}</p>\n <p className=\"leading-[20px] mb-0\">En Premium, la montre peut en plus viser une phase de sommeil léger dans</p>\n <p className=\"leading-[20px]\">{`votre fenêtre, pour un réveil encore moins lourd. `}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:9809":"const imgContainer = \"https://www.figma.com/api/mcp/asset/c990ecf3-4654-4019-9c85-3f9ed604b250.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/50f30c5b-98a5-46cc-b95a-b4921cf1921f.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/d6b47c41-f4ed-4b36-a628-0f7bece7c8c5.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/ae3c01c2-ffea-494c-8279-b77ac927ad08.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/405facd4-c875-4053-b7f8-86809ba887c9.svg\";\nconst imgSvg = \"https://www.figma.com/api/mcp/asset/294d9bde-1d4b-4aff-ad12-129d021f7045.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/e1c55d29-1892-491e-8964-d92b82a0ceee.svg\";\nconst imgSvg1 = \"https://www.figma.com/api/mcp/asset/e8299e5a-c21c-4e0d-9136-b2991385a079.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/e9bbb620-4754-4041-b20a-4ae8b3c36682.svg\";\nconst imgSvg2 = \"https://www.figma.com/api/mcp/asset/2be5f24f-791b-4ba9-8261-9434452aba16.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/4d4f642c-65a5-4645-8178-a36dce56df02.svg\";\nconst imgSvg3 = \"https://www.figma.com/api/mcp/asset/b45729b4-4152-4d61-bf0d-01433d459f43.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/b1133344-08fb-4dc3-a338-5679956e24dd.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/a0564c1c-c15b-4dad-b80d-be90a39b215b.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/dca0d065-e4e4-416e-aaf2-a0de668d605c.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/5e943ba8-957c-4f20-a41c-32b9b01c4497.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/f3defcfe-35cb-4fb2-a058-25eea36a2e79.svg\";\n\nexport default function EvolutionV1() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:9809\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Évolution - V1\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:9810\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:9811\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:9812\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:9814\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:9815\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:9816\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:9817\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1293px] items-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:9819\" data-name=\"Main Content\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"566:9820\" data-name=\"Section - Page Header\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full\" data-node-id=\"579:100\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[170px] h-[28px] items-start relative shrink-0 w-full\" data-node-id=\"579:101\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"579:102\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Mon évolution</p>\n </div>\n <div className=\"content-stretch flex h-[28px] items-center justify-center relative rounded-[9999px] shrink-0 w-[30px]\" data-node-id=\"579:103\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"579:104\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start opacity-70 relative shrink-0 w-full\" data-node-id=\"579:106\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] w-full\" data-node-id=\"579:107\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Observez votre équilibre nerveux dans le temps.</p>\n </div>\n </div>\n </div>\n <div className=\"bg-[rgba(26,48,69,0.3)] border border-[#1a3045] border-solid content-stretch flex items-center justify-between overflow-auto p-[5px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:9826\" data-name=\"Segmented Control\">\n <div className=\"opacity-60 relative rounded-[8px] shrink-0\" data-node-id=\"566:9827\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"566:9828\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">7 jours</p>\n </div>\n </div>\n </div>\n <div className=\"bg-[#1a3045] drop-shadow-[0px_2px_2px_rgba(0,0,0,0.2)] relative rounded-[8px] shrink-0\" data-node-id=\"566:9829\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center whitespace-nowrap\" data-node-id=\"566:9830\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">30 jours</p>\n </div>\n </div>\n </div>\n <div className=\"opacity-60 relative rounded-[8px] shrink-0\" data-node-id=\"566:9831\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"566:9832\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">3 mois</p>\n </div>\n </div>\n </div>\n <div className=\"opacity-60 relative rounded-[8px] shrink-0\" data-node-id=\"566:9833\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center px-[16px] py-[8px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[10px] text-center whitespace-nowrap\" data-node-id=\"566:9834\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Personnalisé</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"566:9835\" data-name=\"Metric Cards Stack\">\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:9836\" data-name=\"Article - CARD 1: RÉCUPÉRATION\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:9837\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start max-w-[221.1999969482422px] relative shrink-0 w-[221px]\" data-node-id=\"566:9838\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"566:9839\" data-name=\"Container\">\n <div className=\"bg-[#2dd4bf] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"566:9840\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9841\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#2dd4bf] text-[17px] tracking-[0.85px] uppercase whitespace-nowrap\" data-node-id=\"566:9842\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">RÉCUPÉRATION</p>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] content-stretch flex flex-col gap-[3px] items-start leading-[0] relative shrink-0 w-full\" data-node-id=\"566:9843\" data-name=\"Container\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#2dd4bf] text-[12px] w-full\" data-node-id=\"566:9844\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">Votre sommeil conditionne votre</p>\n <p className=\"leading-[16px]\">récupération</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal justify-center relative shrink-0 text-[10px] text-[rgba(190,200,207,0.8)] w-full whitespace-pre-wrap\" data-node-id=\"615:3\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">{`Capacité de votre corps à récupérer `}</p>\n <p className=\"leading-[16px]\">et recharger ses réserves.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0\" data-node-id=\"566:9845\" data-name=\"Container\">\n <div className=\"[word-break:break-word] font-['SF_Pro:Thin'] font-[110.72500610351562] h-[64px] leading-[0] relative shrink-0 text-[#dce3f3] text-right tracking-[-1.28px] w-full whitespace-nowrap\" data-node-id=\"566:9846\" data-name=\"Paragraph\">\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center right-[23.67px] text-[64px] top-[31.5px]\" data-node-id=\"566:9847\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[64px]\">83</p>\n </div>\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center opacity-50 right-[-0.22px] text-[24px] top-[46.5px]\" data-node-id=\"566:9848\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"566:9849\" data-name=\"Container\">\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"566:9850\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#2dd4bf] text-[10px] text-right whitespace-nowrap\" data-node-id=\"566:9852\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">En hausse</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[96px] relative shrink-0 w-full\" data-node-id=\"566:9853\" data-name=\"Mask Group\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute content-stretch flex flex-col h-[96px] items-start justify-center left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-size-[100%_96px] right-0 top-0\" data-node-id=\"566:9855\" style={{ maskImage: `url(\"${imgContainer3}\")` }} data-name=\"Container\">\n <div className=\"flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:9856\" data-name=\"SVG\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSvg} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:9859\" data-name=\"Article - CARD 2: SOUPLESSE\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:9860\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start max-w-[221.1999969482422px] relative shrink-0\" data-node-id=\"566:9861\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"566:9862\" data-name=\"Container\">\n <div className=\"bg-[#ea8308] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"566:9863\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9864\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#ea8308] text-[17px] tracking-[0.85px] uppercase whitespace-nowrap\" data-node-id=\"566:9865\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">SOUPLESSE</p>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] content-stretch flex flex-col gap-[3px] items-start leading-[0] relative shrink-0 w-full whitespace-nowrap\" data-node-id=\"566:9866\" data-name=\"Container\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#ea8308] text-[12px]\" data-node-id=\"566:9867\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Votre VFC, suivie dans le temps</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal justify-center relative shrink-0 text-[10px] text-[rgba(190,200,207,0.8)]\" data-node-id=\"615:5\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">Capacité de votre système nerveux à</p>\n <p className=\"leading-[16px]\">{`s'adapter aux variations du quotidien.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0\" data-node-id=\"566:9868\" data-name=\"Container\">\n <div className=\"[word-break:break-word] font-['SF_Pro:Thin'] font-[110.72500610351562] h-[64px] leading-[0] relative shrink-0 text-[#dce3f3] text-right tracking-[-1.28px] w-full whitespace-nowrap\" data-node-id=\"566:9869\" data-name=\"Paragraph\">\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center right-[24.32px] text-[64px] top-[31.5px]\" data-node-id=\"566:9870\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[64px]\">66</p>\n </div>\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center opacity-50 right-[0.62px] text-[24px] top-[46.5px]\" data-node-id=\"566:9871\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[3.99px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"566:9872\" data-name=\"Container\">\n <div className=\"h-[1.167px] relative shrink-0 w-[9.333px]\" data-node-id=\"566:9873\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[10px] text-[rgba(190,200,207,0.6)] text-right whitespace-nowrap\" data-node-id=\"566:9875\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">Stable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[96px] relative shrink-0 w-full\" data-node-id=\"566:9876\" data-name=\"Mask Group\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute content-stretch flex flex-col h-[96px] items-start justify-center left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-size-[100%_96px] right-0 top-0\" data-node-id=\"566:9878\" style={{ maskImage: `url(\"${imgContainer3}\")` }} data-name=\"Container\">\n <div className=\"flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:9879\" data-name=\"SVG\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSvg1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:9882\" data-name=\"Article - CARD 3: TENSION\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:9883\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start max-w-[221.1999969482422px] relative shrink-0\" data-node-id=\"566:9884\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"566:9885\" data-name=\"Container\">\n <div className=\"bg-[#ef4444] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"566:9886\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9887\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#ef4444] text-[17px] tracking-[0.85px] uppercase whitespace-nowrap\" data-node-id=\"566:9888\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TENSION</p>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] content-stretch flex flex-col gap-[3px] items-start leading-[0] relative shrink-0 w-full whitespace-nowrap\" data-node-id=\"566:9889\" data-name=\"Container\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#ef4444] text-[12px]\" data-node-id=\"566:9890\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Votre niveau de stress, sur la durée</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal justify-center relative shrink-0 text-[10px] text-[rgba(190,200,207,0.8)]\" data-node-id=\"615:7\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">Niveau de sollicitation et de charge</p>\n <p className=\"leading-[16px]\">cumulée de votre système nerveux.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0\" data-node-id=\"566:9891\" data-name=\"Container\">\n <div className=\"[word-break:break-word] font-['SF_Pro:Thin'] font-[110.72500610351562] h-[64px] leading-[0] relative shrink-0 text-[#dce3f3] text-right tracking-[-1.28px] w-full whitespace-nowrap\" data-node-id=\"566:9892\" data-name=\"Paragraph\">\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center right-[22.67px] text-[64px] top-[31.5px]\" data-node-id=\"566:9893\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[64px]\">28</p>\n </div>\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center opacity-50 right-[-0.72px] text-[24px] top-[46.5px]\" data-node-id=\"566:9894\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"566:9895\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[11.667px]\" data-node-id=\"566:9896\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#2dd4bf] text-[10px] text-right w-[111px]\" data-node-id=\"566:9898\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">En baisse — Favorable</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[96px] relative shrink-0 w-full\" data-node-id=\"566:9899\" data-name=\"Mask Group\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute content-stretch flex flex-col h-[96px] items-start justify-center left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-size-[100%_96px] right-0 top-0\" data-node-id=\"566:9901\" style={{ maskImage: `url(\"${imgContainer3}\")` }} data-name=\"Container\">\n <div className=\"flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:9902\" data-name=\"SVG\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSvg2} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#0c1b27] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:9905\" data-name=\"Article - CARD 4: ÉQUILIBRE PHYSIOLOGIQUE\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:9906\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-between relative size-full\">\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-[237px]\" data-node-id=\"566:9907\" data-name=\"Container\">\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0 w-full\" data-node-id=\"566:9908\" data-name=\"Container\">\n <div className=\"bg-[#84cc16] relative rounded-[9999px] shrink-0 size-[8px]\" data-node-id=\"566:9909\" data-name=\"Background\" />\n <div className=\"content-stretch flex flex-col items-start pr-[55.39px] relative shrink-0\" data-node-id=\"566:9910\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#84cc16] text-[17px] tracking-[0.85px] uppercase whitespace-nowrap\" data-node-id=\"566:9911\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">ÉQUILIBRE</p>\n </div>\n </div>\n </div>\n <div className=\"[word-break:break-word] content-stretch flex flex-col gap-[3px] items-start leading-[0] relative shrink-0 w-full\" data-node-id=\"566:9912\" data-name=\"Container\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#84cc16] text-[12px] w-full\" data-node-id=\"566:9913\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Synthèse de vos 3 tendances</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Regular'] font-normal justify-center relative shrink-0 text-[10px] text-[rgba(190,200,207,0.8)] w-full\" data-node-id=\"615:9\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Votre état nerveux global.</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[4px] items-start relative shrink-0\" data-node-id=\"566:9914\" data-name=\"Container\">\n <div className=\"[word-break:break-word] font-['SF_Pro:Thin'] font-[110.72500610351562] h-[64px] leading-[0] relative shrink-0 text-[#dce3f3] text-right tracking-[-1.28px] w-full whitespace-nowrap\" data-node-id=\"566:9915\" data-name=\"Paragraph\">\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center right-[22.67px] text-[64px] top-[31.5px]\" data-node-id=\"566:9916\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[64px]\">75</p>\n </div>\n <div className=\"-translate-y-1/2 absolute flex flex-col justify-center opacity-50 right-[-0.47px] text-[24px] top-[46.5px]\" data-node-id=\"566:9917\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[32px]\">%</p>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-center justify-end relative shrink-0 w-full\" data-node-id=\"566:9918\" data-name=\"Container\">\n <div className=\"h-[7px] relative shrink-0 w-[11.667px]\" data-node-id=\"566:9919\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#84cc16] text-[10px] text-right whitespace-nowrap\" data-node-id=\"566:9921\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">En hausse</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[96px] relative shrink-0 w-full\" data-node-id=\"566:9922\" data-name=\"Mask Group\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute content-stretch flex flex-col h-[96px] items-start justify-center left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-size-[100%_96px] right-0 top-0\" data-node-id=\"566:9924\" style={{ maskImage: `url(\"${imgContainer3}\")` }} data-name=\"Container\">\n <div className=\"flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:9925\" data-name=\"SVG\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgSvg3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[54px] items-start relative shrink-0 w-full\" data-node-id=\"566:9928\" data-name=\"Footer Info\">\n <div className=\"h-[54px] relative shrink-0 w-full\" data-node-id=\"566:9929\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center px-[16px] relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[54px] justify-center leading-[0] relative shrink-0 text-[12px] text-[rgba(190,200,207,0.5)] text-center w-[313px]\" data-node-id=\"566:9930\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0\">Ces indicateurs sont calculés à partir de vos données</p>\n <p className=\"leading-[19.5px] mb-0\">physiologiques : HRV, fréquence cardiaque, respiration,</p>\n <p className=\"leading-[19.5px]\">sommeil et activité.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:9931\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:9932\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:9933\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9935\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:9936\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:9937\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:9938\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9940\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:9941\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:9942\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:9943\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9945\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:9946\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:9947\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:9948\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9950\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:9951\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:9952\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:9953\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9955\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:9956\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:9958":"const imgPulse = \"https://www.figma.com/api/mcp/asset/b9ce842c-a7be-4d99-8ab3-8d74d7a2cbde.svg\";\nconst imgInfo = \"https://www.figma.com/api/mcp/asset/33b9ad60-2568-49b9-bb80-04b88b35b8c0.svg\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/9afcc2d5-0ba3-4927-bfb6-61c4abdccbe3.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/d2fe8d7e-c85e-43b7-a5a1-b031cf353722.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/403d4050-b45f-47d8-b4c8-81d99577feab.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/a6f1e6b2-2694-46ef-9ccd-13671ad7e2dd.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/3f357427-1bec-4d2f-b68b-5c28d0b2592c.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/2285f07e-7240-45e6-8cf2-ad9e0079281b.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/caf1e4c7-f464-46fd-b129-c8d27b7b0a33.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/e88b6e33-af7a-474f-80ab-62f235d8f3fc.svg\";\n\nexport default function SosStressEntree() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:9958\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"SOS Stress - Entrée\">\n <div className=\"content-stretch flex flex-col gap-[32px] h-[920px] items-center max-w-[512px] pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:9959\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[20px] items-center justify-center px-[13px] relative shrink-0 w-full\" data-node-id=\"566:9960\" data-name=\"Hero Section\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 size-[96px]\" data-node-id=\"566:9961\" data-name=\"Margin\">\n <div className=\"content-stretch flex items-center justify-center relative shrink-0 size-[96px]\" data-node-id=\"566:9962\" data-name=\"Container\">\n <div className=\"absolute bg-[#c62828] inset-0 rounded-[9999px]\" data-node-id=\"566:9963\" data-name=\"Overlay\" />\n <div className=\"overflow-clip relative shrink-0 size-[60px]\" data-node-id=\"566:9964\" data-name=\"Circle Big Circle.svg\">\n <div className=\"absolute left-[5px] size-[50px] top-[5px]\" data-node-id=\"566:9965\" data-name=\"Pulse\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgPulse} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:9967\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:9968\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">Retrouver son calme</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9969\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:9970\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] h-[20px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center w-[233px]\" data-node-id=\"566:9971\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">SOS Stress</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center pl-[7.22px] pr-[7.23px] relative shrink-0 w-full\" data-node-id=\"566:9972\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center w-[336px]\" data-node-id=\"566:9973\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Lors d'un pic aigu de stress, les vibrations captent votre attention puis leur rythme ralentit pour vous accompagner jusqu'à l'apaisement.`}</p>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] h-[216px] items-start p-[17px] relative rounded-[12px] shrink-0 w-[362px]\" data-node-id=\"566:9974\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"566:9975\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:9976\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"566:9977\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[80px] relative shrink-0 w-[285px]\" data-node-id=\"566:9979\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[180px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] tracking-[-0.2px] w-[285px]\" data-node-id=\"566:9980\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Le pic de stress mobilise le système sympathique avant la pensée consciente. Le corps s’active en premier, la volonté n’a pas de prise sur lui ; d’où la difficulté à se calmer soi-même dans ces moments-là. Les vibrations, elles, se ressentent tout de suite dans la main : un repère physique qui agit rapidement, indépendamment de la volonté</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border-[rgba(121,211,255,0.5)] border-b border-l-4 border-r border-solid border-t content-stretch flex items-center justify-between pl-[28px] pr-[25px] py-[25px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:9981\" data-name=\"Section - Info Card\">\n <div className=\"relative shrink-0 w-[141px]\" data-node-id=\"566:9982\" data-name=\"Paragraph\">\n <div className=\"[word-break:break-word] bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start leading-[0] pr-[30.28px] relative size-full\">\n <div className=\"flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center relative shrink-0 text-[#c1e8ff] text-[11px] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:9983\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">DURÉE</p>\n </div>\n <div className=\"flex flex-col font-['SF_Pro:Medium'] font-[510] justify-center relative shrink-0 text-[#dce3f3] text-[22px] w-[141px]\" data-node-id=\"566:9984\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">90 secondes</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:9985\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-end pl-[60.34px] relative shrink-0\" data-node-id=\"566:9986\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] text-right whitespace-nowrap\" data-node-id=\"566:9987\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px] mb-0\">{`Vous n'avez rien à`}</p>\n <p className=\"leading-[16px]\">configurer.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:9988\" data-name=\"Duration Selector (Segmented Control):margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(15,23,42,0.6)] border border-[rgba(255,255,255,0.08)] border-solid content-stretch flex gap-[160px] items-center px-[17px] py-[13px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"566:9989\" data-name=\"Duration Selector (Segmented Control)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:9990\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:9991\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[16px] whitespace-nowrap\" data-node-id=\"566:9992\">\n <p className=\"leading-[24px]\">Mode écran noir</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-[#79d3ff] h-[24px] relative rounded-[9999px] shrink-0 w-[43px]\" data-node-id=\"566:9993\" data-name=\"Background\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start pl-[24px] py-[4px] relative size-full\">\n <div className=\"bg-[#003548] relative rounded-[9999px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] shrink-0 size-[16px]\" data-node-id=\"566:9994\" data-name=\"Background+Shadow\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:9995\" data-name=\"Actions\">\n <div className=\"bg-[#c62828] content-stretch flex gap-[8px] h-[64px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:9996\" data-name=\"Button\">\n <div className=\"h-[12px] relative shrink-0 w-[8px]\" data-node-id=\"566:9997\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[12px] text-center text-white uppercase whitespace-nowrap\" data-node-id=\"566:9999\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Démarrer</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:10000\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:10001\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:10002\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10004\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:10005\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:10006\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:10007\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"566:10009\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"566:10010\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"566:10011\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10013\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"566:10014\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10015\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"566:10016\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10018\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:10019\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10020\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"566:10021\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10023\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:10024\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10025\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"566:10026\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10028\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:10029\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10030\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"566:10031\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10033\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:10034\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:10035":"const imgContainer = \"https://www.figma.com/api/mcp/asset/03e7a1eb-a039-4628-89c0-4956e5f777c6.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/f9be9460-aaf8-4714-98e4-f0a067924bcd.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/f86b995c-e07b-471f-b8ef-f009d299374d.svg\";\n\nexport default function SosStressSeance() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:10035\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"SOS Stress - Séance\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:10036\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:10037\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:10038\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10040\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:10041\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:10042\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:10043\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[884px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-[402px]\" data-node-id=\"566:10045\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col h-[56px] items-start relative shrink-0\" data-node-id=\"566:10046\" data-name=\"Top: Phase Header:margin\">\n <div className=\"content-stretch flex flex-col h-[49px] items-start relative shrink-0\" data-node-id=\"566:10047\" data-name=\"Top: Phase Header\">\n <div className=\"content-stretch flex h-[56px] items-start justify-center relative shrink-0 w-full\" data-node-id=\"566:10048\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[20px] text-center whitespace-nowrap\" data-node-id=\"566:10049\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px] mb-0 whitespace-pre\">{`Tenez votre iPhone en main `}</p>\n <p className=\"leading-[28px] whitespace-pre\">et laissez les vibrations vous apaiser.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[439px] items-center justify-center relative shrink-0 w-full\" data-node-id=\"566:10050\" data-name=\"Main - Center: Immersive Breathing Orb\">\n <div className=\"relative shrink-0 size-[280px]\" data-node-id=\"566:10051\" data-name=\"Container\">\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:10052\" data-name=\"Border\" />\n <div className=\"absolute border-2 border-[rgba(121,211,255,0.3)] border-solid inset-0 rounded-[140px]\" data-node-id=\"566:10053\" data-name=\"Border\" />\n <div className=\"-translate-x-1/2 -translate-y-1/2 absolute content-stretch flex items-center justify-center left-1/2 rounded-[140px] size-[280px] top-[calc(50%-0.25px)]\" data-node-id=\"566:10054\" style={{ backgroundImage: \"url(\\\"data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.799 0 0 19.799 140 140)'><stop stop-color='rgba(121,211,255,0.4)' offset='0'/><stop stop-color='rgba(74,184,232,0.1)' offset='0.7'/><stop stop-color='rgba(74,184,232,0)' offset='1'/></radialGradient></defs></svg>\\\")\" }} data-name=\"Background\">\n <div className=\"bg-[#79d3ff] content-stretch flex flex-col items-center justify-center relative rounded-[70px] shrink-0 size-[140px]\" data-node-id=\"566:10055\" data-name=\"Background\">\n <div className=\"pointer-events-none relative rounded-[70px] shadow-[0px_0px_40px_10px_rgba(121,211,255,0.6)] shrink-0 size-[140px]\" data-node-id=\"566:10056\" data-name=\"Overlay+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 rounded-[70px]\" />\n <div className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(255,255,255,0.5)]\" />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start pt-[60px] relative shrink-0\" data-node-id=\"566:10057\" data-name=\"Signal Quality Indicator:margin\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center relative shrink-0\" data-node-id=\"566:10058\" data-name=\"Signal Quality Indicator\">\n <div className=\"content-stretch flex gap-[6px] items-center relative shrink-0\" data-node-id=\"566:10059\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#889299] text-[16px] tracking-[-0.5px] uppercase whitespace-nowrap\" data-node-id=\"566:10060\">\n <p className=\"leading-[15px]\">SOS Stress</p>\n </div>\n <div className=\"content-stretch flex items-center justify-center relative rounded-[9999px] shrink-0 size-[20px]\" data-node-id=\"566:10061\" data-name=\"Button\">\n <div className=\"relative shrink-0 size-[20px]\" data-node-id=\"566:10062\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[4px] items-start relative shrink-0\" data-node-id=\"566:10064\" data-name=\"Container\">\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:10065\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[#79d3ff] h-[4px] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(121,211,255,0.6)] shrink-0 w-[32px]\" data-node-id=\"566:10066\" data-name=\"Background+Shadow\" />\n <div className=\"bg-[rgba(62,72,78,0.3)] content-stretch flex flex-col h-[4px] items-start justify-center overflow-clip relative rounded-[9999px] shrink-0 w-[32px]\" data-node-id=\"566:10067\" data-name=\"Overlay\">\n <div className=\"bg-[rgba(121,211,255,0.4)] flex-[1_0_0] min-h-px relative w-full\" data-node-id=\"566:10068\" data-name=\"Overlay\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[384px] relative shrink-0 w-full\" data-node-id=\"566:10069\" data-name=\"Footer - Bottom: Controls & Timer\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:10070\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10071\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Medium'] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[14px] tracking-[-0.14px] whitespace-nowrap\" data-node-id=\"566:10072\">\n <p className=\"leading-[20px]\">01:29</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col h-[9px] items-start pt-[8px] relative shrink-0 w-[64px]\" data-node-id=\"566:10073\" data-name=\"Margin\">\n <div className=\"bg-[rgba(62,72,78,0.3)] h-px relative shrink-0 w-[64px]\" data-node-id=\"566:10074\" data-name=\"Horizontal Divider\" />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10075\" data-name=\"Button:margin\">\n <div className=\"backdrop-blur-[6px] bg-[rgba(25,32,44,0.4)] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex flex-col items-center justify-center overflow-clip pb-[20px] pt-[22.5px] px-[41px] relative rounded-[9999px] shrink-0\" data-node-id=\"566:10076\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(121,211,255,0.05)] inset-[0_0_-0.5px_0] opacity-0\" data-node-id=\"566:10077\" data-name=\"Overlay\" />\n <div className=\"relative shrink-0\" data-node-id=\"566:10078\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-start justify-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#dce3f3] text-[12px] text-center tracking-[1.2px] uppercase whitespace-nowrap\" data-node-id=\"566:10079\">\n <p className=\"leading-[16px]\">TERMINER</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","566:10080":"const imgContainer = \"https://www.figma.com/api/mcp/asset/8d917987-077c-470b-9b1a-12adc181b228.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/c6e3989c-5282-4301-8c44-fa5fbd61540c.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/62779f42-9aad-4f4a-bce2-75eb5955bf74.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/915d835a-5bfe-405b-9194-fc954482e10d.svg\";\nconst imgOverlay = \"https://www.figma.com/api/mcp/asset/b7f3cdc9-a05f-4f6e-a010-d45627f85e83.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/0525cb91-351b-49db-90cb-c9e8780145db.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/65014d78-28e7-4124-b3cd-e5da25524ba8.svg\";\n\nexport default function SosStressFin() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"566:10080\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"SOS Stress - Fin\">\n <div className=\"content-stretch flex flex-col gap-[32px] items-start pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"566:10081\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[362px]\" data-node-id=\"566:10082\" data-name=\"Validation / Visual Focus Area:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:10083\" data-name=\"Validation / Visual Focus Area\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-center py-[12px] relative shrink-0\" data-node-id=\"566:10084\" data-name=\"Container\">\n <div className=\"content-stretch flex items-start relative shrink-0\" data-node-id=\"566:10085\" data-name=\"Container\">\n <div className=\"absolute bg-[rgba(121,211,255,0.2)] blur-[32px] inset-0 rounded-[9999px]\" data-node-id=\"566:10086\" data-name=\"Overlay+Blur\" />\n <div className=\"border-2 border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center justify-center p-[2px] relative rounded-[9999px] shrink-0 size-[96px]\" data-node-id=\"566:10087\" data-name=\"Border\">\n <div className=\"relative shrink-0 size-[40px]\" data-node-id=\"566:10088\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"566:10090\" data-name=\"Heading 1:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"566:10091\" data-name=\"Heading 1\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] text-center whitespace-nowrap\" data-node-id=\"566:10092\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">Séance terminée</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center max-w-[280px] px-[25.58px] relative shrink-0\" data-node-id=\"566:10093\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:10094\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Prenez quelques secondes pour</p>\n <p className=\"leading-[20px]\">observer votre état.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:10095\" data-name=\"Assessment Section:margin\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start max-w-[448px] relative shrink-0 w-full\" data-node-id=\"566:10096\" data-name=\"Assessment Section\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0 w-full\" data-node-id=\"566:10097\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[11px] text-center tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"566:10098\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">AUTO-ÉVALUATION</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.6)] border border-[#1a3045] border-solid content-stretch flex flex-col gap-[24px] items-center justify-center p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:10099\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[16px] relative shrink-0 w-[289px]\" data-node-id=\"566:10100\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center w-[292px]\" data-node-id=\"566:10101\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">Comment vous sentez-vous maintenant ?</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 w-full\" data-node-id=\"566:10102\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[12px] items-start relative size-full\">\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:10103\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:10104\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:10105\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apaisé</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:10106\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:10108\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:10109\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:10110\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Stable</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:10111\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n </div>\n <div className=\"bg-[#0c1927] border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex items-center justify-between px-[25px] py-[13px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:10113\" data-name=\"Button\">\n <div className=\"relative shrink-0\" data-node-id=\"566:10114\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"566:10115\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">En alerte</p>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"566:10116\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start max-w-[448px] relative shrink-0 w-[362px]\" data-node-id=\"566:10118\" data-name=\"Recommendation Card (Asymmetric / Specialized UI)\">\n <div className=\"backdrop-blur-[10px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[16px] items-start p-[17px] relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:10119\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"h-[37.897px] relative shrink-0 w-[27.667px]\" data-node-id=\"566:10120\" data-name=\"Overlay\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgOverlay} />\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10122\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[4px] items-start relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:10123\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] uppercase whitespace-nowrap\" data-node-id=\"566:10124\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">CONSEIL</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"566:10125\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"566:10126\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[19.5px] mb-0 whitespace-pre\">{`Une respiration 4·4·4·4 - Équilibre régularisent la `}</p>\n <p className=\"leading-[19.5px] mb-0 whitespace-pre\">{`respiration et stabilisent le taux de CO2. `}</p>\n <p className=\"leading-[19.5px] mb-0 whitespace-pre\">{`Ce qui permet de parvenir à un état d'équilibre `}</p>\n <p className=\"leading-[19.5px] whitespace-pre\">de votre système nerveux autonome.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"bg-gradient-to-t content-stretch flex flex-col from-[#0c141f] gap-[12px] items-start p-[20px] relative shrink-0 to-[rgba(12,20,31,0)] via-1/2 via-[rgba(12,20,31,0.9)] w-[402px]\" data-node-id=\"566:10127\" data-name=\"Footer - Bottom Actions Layer\">\n <div className=\"bg-[#79d3ff] content-stretch flex h-[56px] items-center justify-center relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:10128\" data-name=\"Button\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] h-[56px] left-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] top-0\" data-node-id=\"566:10129\" data-name=\"Button:shadow\" />\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#00465e] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:10130\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[22px]\">TERMINER</p>\n </div>\n </div>\n <div className=\"border border-[rgba(62,72,78,0.3)] border-solid content-stretch flex h-[56px] items-center justify-center pb-[18.5px] pt-[17.5px] px-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"566:10131\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[11px] text-center whitespace-nowrap\" data-node-id=\"566:10132\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">MESURER MON ÉTAT</p>\n </div>\n </div>\n </div>\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"566:10133\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"566:10134\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"566:10135\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"566:10137\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"566:10138\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"566:10139\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"566:10140\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","579:2":"const imgInfo = \"https://www.figma.com/api/mcp/asset/2c75b3a8-f307-40e9-a174-afc09f16969a.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"579:2\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"579:3\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"579:4\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"579:5\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[319px] relative shrink-0 w-[285px]\" data-node-id=\"579:7\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[318px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[13px] w-full whitespace-pre-wrap\" data-node-id=\"579:8\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">\n {`Pendant la nuit, votre système nerveux récupère. `}\n <br aria-hidden />\n Après avoir détecté votre réveil, la montre attendra quelques minutes avant de lancer la mesure , le temps que votre corps se stabilise. Le diagnostic matinal est ensuite calculé à partir de votre sommeil, de votre variabilité cardiaque et de votre fréquence cardiaque nocturnes.\n <br aria-hidden />\n <br aria-hidden />\n {`Il reste affiché jusqu'à ce que vous déclenchiez votre première mesure, `}\n </p>\n <p className=\"leading-[20px] mb-0\">puis laisse place à Mon état actuel :</p>\n <p className=\"leading-[20px]\">votre état du moment, que vous pouvez renouveler autant de fois que vous le souhaitez au cours de la journée.</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","579:92":"const imgInfo = \"https://www.figma.com/api/mcp/asset/1b049508-50fb-451e-bc50-b7eadf87be35.svg\";\n\nexport default function OverlayBorderOverlayBlur() {\n return (\n <div className=\"backdrop-blur-[12px] bg-[#0c1927] border border-[#1a3045] border-solid content-stretch flex gap-[12px] items-start p-[17px] relative rounded-[12px] size-full\" data-node-id=\"579:92\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"bg-[rgba(121,211,255,0.1)] relative rounded-[9999px] shrink-0 size-[32px]\" data-node-id=\"579:93\" data-name=\"Overlay\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-center relative size-full\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"579:94\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[14.25px]\" data-node-id=\"579:95\" data-name=\"Info\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgInfo} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[124px] relative shrink-0 w-[285px]\" data-node-id=\"579:97\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal h-[124px] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] w-[285px] whitespace-pre-wrap\" data-node-id=\"579:98\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">{`Un état isolé dépend de mille facteurs passagers ; c'est la tendance, sur des jours ou des semaines, qui révèle une évolution réelle de votre équilibre. `}</p>\n <p className=\"leading-[20px] mb-0\">{`Cette page sert à lire ce mouvement `}</p>\n <p className=\"leading-[20px]\">{`de fond. `}</p>\n </div>\n </div>\n </div>\n </div>\n );\n}","580:119":"const imgAb6AXuDjX90EYJAd3K2WxIbuvTiezyTv2HqrcYLhDbnwaIlV4Cb4WE6Uo719Drl7MzuaUyuYwNzZlLkXlHlBh3K56Hz7UJnRxjcmPzd22EOzh2Rqktig7AuTkbXbUaZ1UUfuWbq6Wigeos77IZt40KmNscAoEcoaIlKem0A9KSmpXcCaV3Cb7Sc2OrMiNgdhzOptJyRh6XPvmLx9MiGSnFuUuObrsSkMitvmAk72RvPkokHzOr6NCQ = \"https://www.figma.com/api/mcp/asset/bcd96f55-9c01-4424-8d6b-85e3917651b6.png\";\nconst imgContainer = \"https://www.figma.com/api/mcp/asset/f88b8625-d8c8-4b35-914a-3ecbe37df327.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/8c004d99-713a-43a5-b043-b3d14f3d11bd.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/0f2e98d5-788e-4445-992b-51d34af628da.svg\";\nconst imgContainer2 = \"https://www.figma.com/api/mcp/asset/2154374b-2dd8-404a-bcf6-03b1c9886411.svg\";\nconst imgContainer3 = \"https://www.figma.com/api/mcp/asset/3cc81af2-3e1e-4c5c-86d7-0d110bcac8a9.svg\";\nconst imgContainer4 = \"https://www.figma.com/api/mcp/asset/becd098d-64f2-46e6-aaf2-fdea8408379c.svg\";\nconst imgContainer5 = \"https://www.figma.com/api/mcp/asset/62c9b1d8-cd77-43af-86ba-69c550653cd6.svg\";\nconst imgContainer6 = \"https://www.figma.com/api/mcp/asset/8dc5d144-4b5b-47b0-8ca2-45372a9c6dd4.svg\";\nconst imgBellRinging = \"https://www.figma.com/api/mcp/asset/98278409-638f-45b0-852e-4f7130041cf6.svg\";\nconst imgContainer7 = \"https://www.figma.com/api/mcp/asset/f60fbb90-fa08-4ce3-996a-0246ab496f04.svg\";\nconst imgContainer8 = \"https://www.figma.com/api/mcp/asset/7f4c6d0b-c98f-4cbb-88df-492c83c981b5.svg\";\nconst imgContainer9 = \"https://www.figma.com/api/mcp/asset/f0e68a2c-740a-4bf6-a2b7-16d9936af3c6.svg\";\nconst imgContainer10 = \"https://www.figma.com/api/mcp/asset/bfc454cc-c1c0-430b-b4e9-1ba128494f4c.svg\";\nconst imgContainer11 = \"https://www.figma.com/api/mcp/asset/d22544ef-a6e5-4370-ba16-92906b558b72.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/cbe3cce8-0a41-4caa-aa3c-3dd07a5b4920.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/e7212c2d-4281-4464-92bc-4e12b93d9d02.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/b4546766-b20d-406e-8b6a-cbcbbcfe698b.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/73f2265c-eca8-4034-a875-b1468c84b921.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/ece8c907-cc28-4e48-8848-d335e3b4e7d9.svg\";\n\nexport default function Profil() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"580:119\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Profil\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"580:120\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"580:121\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"580:122\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:124\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"580:125\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"580:126\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"580:127\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] h-[1184px] items-start max-w-[672px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"580:129\" data-name=\"Main\">\n <div className=\"h-[246px] relative shrink-0 w-full\" data-node-id=\"580:130\" data-name=\"User Profile Top Section\">\n <div className=\"absolute content-stretch flex flex-col items-start left-[121.91px] pb-[4px] top-[136px]\" data-node-id=\"580:131\" data-name=\"Heading 2:margin\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:132\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Medium'] font-[510] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[22px] text-center whitespace-nowrap\" data-node-id=\"580:133\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Alexandre</p>\n </div>\n </div>\n </div>\n <div className=\"absolute content-stretch flex flex-col items-start left-[96.89px] pb-[16px] top-[168px]\" data-node-id=\"580:134\" data-name=\"Margin\">\n <div className=\"bg-[rgba(74,184,232,0.2)] border border-[rgba(121,211,255,0.3)] border-solid content-stretch flex items-center px-[13px] py-[5px] relative rounded-[9999px] shrink-0\" data-node-id=\"580:135\" data-name=\"Overlay+Border\">\n <div className=\"relative shrink-0\" data-node-id=\"580:136\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Bold'] font-bold justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[10px] text-center tracking-[0.5px] uppercase whitespace-nowrap\" data-node-id=\"580:137\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[12px]\">EXPLORATEUR HAPTIKA</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"-translate-x-1/2 absolute content-stretch flex flex-col items-center left-1/2 top-[206px]\" data-node-id=\"580:138\" data-name=\"Margin\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:139\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px] mb-0\">Système nerveux en équilibre favorable</p>\n <p className=\"leading-[20px]\">depuis 12 jours.</p>\n </div>\n </div>\n <div className=\"absolute content-stretch flex flex-col items-start left-[119px] pb-[24px] top-0\" data-node-id=\"580:140\" data-name=\"Margin\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:141\" data-name=\"Container\">\n <div className=\"border border-[rgba(121,211,255,0.2)] border-solid content-stretch flex flex-col items-start justify-center p-[5px] relative rounded-[9999px] shadow-[0px_0px_40px_0px_rgba(121,211,255,0.15)] shrink-0 size-[112px]\" data-node-id=\"580:142\" data-name=\"Overlay+Border+Shadow\">\n <div aria-hidden className=\"absolute bg-[rgba(255,255,255,0)] inset-0 pointer-events-none rounded-[9999px]\" />\n <div className=\"flex-[1_0_0] min-h-px relative rounded-[9999px] w-full\" data-node-id=\"580:143\" data-name=\"AB6AXuDjX90_eY-JAd3k2wxIBUVTiezyTv2hqrcYLhDbnwa_IlV4cb4wE6uo719Drl7mzuaUyuYwNZZlLkXlHlBH3k-56HZ7uJNRxjcmPzd22eOzh2rqktig7AuTKBXbUa_Z1uUfuWbq6wigeos77iZt40KmNSCAoEcoaIlKem0A9kSmpXcCaV3cb7Sc2orMiNgdhzOPTJyRh6xPvmLX9MiGSnFuUuObrsSKMitvmAK72RVPkokHzOR6nC_Q\">\n <div className=\"absolute bg-clip-padding border-0 border-[transparent] border-solid inset-0 overflow-hidden pointer-events-none rounded-[9999px]\">\n <img alt=\"\" className=\"absolute h-[179.02%] left-0 max-w-none top-[-39.51%] w-full\" src={imgAb6AXuDjX90EYJAd3K2WxIbuvTiezyTv2HqrcYLhDbnwaIlV4Cb4WE6Uo719Drl7MzuaUyuYwNzZlLkXlHlBh3K56Hz7UJnRxjcmPzd22EOzh2Rqktig7AuTkbXbUaZ1UUfuWbq6Wigeos77IZt40KmNscAoEcoaIlKem0A9KSmpXcCaV3Cb7Sc2OrMiNgdhzOptJyRh6XPvmLx9MiGSnFuUuObrsSkMitvmAk72RvPkokHzOr6NCQ} />\n </div>\n </div>\n <div className=\"absolute inset-0 pointer-events-none rounded-[inherit] shadow-[inset_0px_0px_20px_0px_rgba(121,211,255,0.1)]\" />\n </div>\n <div className=\"absolute bg-[#79d3ff] bottom-[-4px] content-stretch flex items-center justify-center right-[-4px] rounded-[9999px] size-[24px]\" data-node-id=\"580:144\" data-name=\"Background\">\n <div className=\"absolute bg-[rgba(255,255,255,0)] bottom-0 right-0 rounded-[9999px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] size-[24px]\" data-node-id=\"580:145\" data-name=\"Overlay+Shadow\" />\n <div className=\"h-[12.25px] relative shrink-0 w-[12.833px]\" data-node-id=\"580:146\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-full\" data-node-id=\"580:148\" data-name=\"Profile Sections\">\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"580:149\" data-name=\"Section - Compte et Abonnement\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"580:150\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"580:151\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">COMPTE ET ABONNEMENT</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"580:152\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"580:153\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"580:154\" data-name=\"Container\">\n <div className=\"h-[15px] relative shrink-0 w-[19px]\" data-node-id=\"580:155\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer2} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:157\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:158\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Gérer l'abonnement`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"580:159\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:160\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#79d3ff] text-[12px] text-center whitespace-nowrap\" data-node-id=\"580:161\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Haptika pro</p>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:162\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"580:164\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"580:165\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[14.615px] relative shrink-0 w-[15px]\" data-node-id=\"580:166\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer4} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:168\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:169\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Informations personnelles</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:170\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"580:172\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"580:173\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[18.942px] relative shrink-0 w-[15px]\" data-node-id=\"580:174\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer5} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:176\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:177\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Données de santé & Confidentialité`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:178\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"580:180\" data-name=\"Section - Dispositifs\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"580:181\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"580:182\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">DISPOSITIFS</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"580:183\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"580:184\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"580:185\" data-name=\"Container\">\n <div className=\"h-[16px] relative shrink-0 w-[20px]\" data-node-id=\"580:186\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer6} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:188\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"580:189\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Équipement</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex gap-[8px] items-center relative shrink-0\" data-node-id=\"580:190\" data-name=\"Container\">\n <div className=\"bg-[#3fdfc9] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(63,223,201,0.5)] shrink-0 size-[6px]\" data-node-id=\"580:191\" data-name=\"Background+Shadow\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:192\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#3fdfc9] text-[12px] whitespace-nowrap\" data-node-id=\"580:193\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Iphone + Apple Watch</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"580:194\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"580:195\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:196\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[24px]\" data-node-id=\"580:197\" data-name=\"BellRinging\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgBellRinging} />\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:199\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:200\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Rappels</p>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:201\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"580:203\" data-name=\"HorizontalBorder\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"580:204\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[18.35px] relative shrink-0 w-[20px]\" data-node-id=\"580:205\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer7} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:207\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] whitespace-nowrap\" data-node-id=\"580:208\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Apple Santé</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:209\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[8px] items-center relative size-full\">\n <div className=\"bg-[#3fdfc9] relative rounded-[9999px] shadow-[0px_0px_8px_0px_rgba(63,223,201,0.5)] shrink-0 size-[6px]\" data-node-id=\"580:210\" data-name=\"Background+Shadow\" />\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:211\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#3fdfc9] text-[12px] whitespace-nowrap\" data-node-id=\"580:212\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[16px]\">Connecté</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"580:213\" data-name=\"Section - Méthodologie\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"580:214\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"580:215\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">{`MÉTHODOLOGIE & APPRENTISSAGE`}</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"580:216\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"580:217\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"580:218\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[16.269px] relative shrink-0 w-[19.923px]\" data-node-id=\"580:219\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer8} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:221\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:222\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Guide des exercices</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:223\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"580:225\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"580:226\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"h-[18.519px] relative shrink-0 w-[13.115px]\" data-node-id=\"580:227\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer9} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:229\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:230\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">Références scientifiques</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:231\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full\" data-node-id=\"580:233\" data-name=\"Section - Support\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-[346px]\" data-node-id=\"580:234\" data-name=\"Heading 3\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Semibold'] font-[590] justify-center leading-[0] relative shrink-0 text-[11px] text-[rgba(190,200,207,0.6)] tracking-[0.88px] uppercase whitespace-nowrap\" data-node-id=\"580:235\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[14px]\">SUPPORT</p>\n </div>\n </div>\n <div className=\"backdrop-blur-[10px] bg-[rgba(12,25,39,0.7)] border border-[#1a3045] border-solid content-stretch flex flex-col items-start overflow-clip p-px relative rounded-[14px] shrink-0 w-full\" data-node-id=\"580:236\" data-name=\"Overlay+Border+OverlayBlur\">\n <div className=\"relative shrink-0 w-full\" data-node-id=\"580:237\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between p-[16px] relative size-full\">\n <div className=\"content-stretch flex gap-[12px] items-center relative shrink-0\" data-node-id=\"580:238\" data-name=\"Container\">\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"580:239\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer10} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:241\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:242\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Aide & Support`}</p>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:243\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n <div className=\"border-[rgba(62,72,78,0.3)] border-solid border-t relative shrink-0 w-full\" data-node-id=\"580:245\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-[16px] pt-[17px] px-[16px] relative size-full\">\n <div className=\"relative shrink-0\" data-node-id=\"580:246\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex gap-[12px] items-center relative size-full\">\n <div className=\"relative shrink-0 size-[19px]\" data-node-id=\"580:247\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer11} />\n </div>\n <div className=\"content-stretch flex flex-col items-center relative shrink-0\" data-node-id=\"580:249\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:250\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">À propos</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[11.308px] relative shrink-0 w-[6.708px]\" data-node-id=\"580:251\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer3} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[16px] items-center relative shrink-0 w-full\" data-node-id=\"580:253\" data-name=\"Actions Section\">\n <div className=\"content-stretch flex flex-col items-center justify-center relative shrink-0\" data-node-id=\"580:254\" data-name=\"Button\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#ffb4ab] text-[15px] text-center whitespace-nowrap\" data-node-id=\"580:255\">\n <p className=\"leading-[20px]\">Se déconnecter</p>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:256\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[12px] text-[rgba(190,200,207,0.3)] whitespace-nowrap\" data-node-id=\"580:257\">\n <p className=\"leading-[16px]\">Haptika v1.4.2</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"580:258\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"580:259\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"580:260\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:262\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"580:263\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:264\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"580:265\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:267\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:268\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:269\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"580:270\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:272\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:273\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:274\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"580:275\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:277\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:278\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:279\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"580:280\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:282\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:283\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}","580:286":"const imgContainer = \"https://www.figma.com/api/mcp/asset/2b6a7dfa-1ab0-4363-856e-6f32d9d63121.svg\";\nconst imgGearSix = \"https://www.figma.com/api/mcp/asset/f640af28-f6c1-40f5-b0e6-1c09f1e37dfc.svg\";\nconst imgContainer1 = \"https://www.figma.com/api/mcp/asset/773926c9-b8f0-47c1-9338-73f6e719f8db.svg\";\nconst imgMargin = \"https://www.figma.com/api/mcp/asset/c2a0e418-ad7e-4f4f-986c-db89e81c472f.svg\";\nconst imgMargin1 = \"https://www.figma.com/api/mcp/asset/dc27f559-1499-4d5c-979c-ea07b714c074.svg\";\nconst imgMargin2 = \"https://www.figma.com/api/mcp/asset/0e175e01-1750-4ea0-8b5f-c53cbbe5224c.svg\";\nconst imgMargin3 = \"https://www.figma.com/api/mcp/asset/73317494-c99b-44a6-8e89-5b6fc0f31b1a.svg\";\nconst imgMargin4 = \"https://www.figma.com/api/mcp/asset/fa28fb4a-87cd-4c6c-8d43-3e48a31455e2.svg\";\n\nexport default function ReferencesScientifiques() {\n return (\n <div className=\"content-stretch flex flex-col items-start relative size-full\" data-node-id=\"580:286\" style={{ backgroundImage: \"linear-gradient(90deg, rgb(6, 13, 24) 0%, rgb(6, 13, 24) 100%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)\" }} data-name=\"Références scientifiques\">\n <div className=\"absolute backdrop-blur-[32px] bg-[rgba(12,20,31,0.4)] border-[rgba(62,72,78,0.3)] border-b border-solid content-stretch flex h-[64px] items-center justify-between left-0 pb-px px-[20px] top-0 w-[402px]\" data-node-id=\"580:287\" data-name=\"Header - TopAppBar\">\n <div className=\"relative shrink-0\" data-node-id=\"580:288\" data-name=\"Button\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[12px] relative shrink-0 w-[18px]\" data-node-id=\"580:289\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer} />\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:291\" data-name=\"Heading 1\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] tracking-[2.8px] uppercase whitespace-nowrap\" data-node-id=\"580:292\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[34px]\">HAPTIKA</p>\n </div>\n </div>\n </div>\n <div className=\"relative rounded-[9999px] shrink-0 size-[18px]\" data-node-id=\"580:293\" data-name=\"Background+Border\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid relative size-full\">\n <div className=\"absolute left-0 size-[18px] top-[-0.5px]\" data-node-id=\"580:294\" data-name=\"GearSix\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgGearSix} />\n </div>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col gap-[32px] items-center justify-center pb-[20px] pt-[96px] px-[20px] relative shrink-0 w-full\" data-node-id=\"580:296\" data-name=\"Main\">\n <div className=\"content-stretch flex flex-col gap-[6.75px] items-start relative shrink-0 w-full\" data-node-id=\"580:297\" data-name=\"Header Section\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"580:298\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:299\" data-name=\"Heading 2\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Light'] font-[274.31500244140625] justify-center leading-[0] relative shrink-0 text-[#dce3f3] text-[28px] whitespace-nowrap\" data-node-id=\"580:300\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[28px]\">Références scientifiques</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:301\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['SF_Pro:Regular'] font-normal justify-center leading-[0] relative shrink-0 text-[#bec8cf] text-[15px] tracking-[-0.1px] w-full\" data-node-id=\"580:302\" style={{ fontVariationSettings: '\"wdth\" 100' }}>\n <p className=\"leading-[20px]\">{`Haptika, de la mesure passive à l'intervention tactile, réunit les principes de la psychophysiologie et des neurosciences du toucher par le biais des vibrations tactiles afin d’agir sur votre équilibre nerveux et réguler votre stress au quotidien.`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:303\" data-name=\"Guided Protocols Section\">\n <div className=\"content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full\" data-node-id=\"580:304\" data-name=\"Container\">\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"580:305\" data-name=\"Protocol 2\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"580:306\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[6px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"580:307\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"580:308\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"580:309\">\n <p className=\"leading-[20px]\">Le système nerveux autonome</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:310\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"580:311\">\n <p className=\"leading-[16px]\">Porges, S. W. (2011) — The Polyvagal Theory: Neurophysiological Foundations of Emotions.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"580:312\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"580:314\" data-name=\"Protocol 2\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"580:315\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[6px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"580:316\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"580:317\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"580:318\">\n <p className=\"leading-[20px] mb-0 whitespace-pre\">{`La mesure : Variabilité de la Fréquence `}</p>\n <p className=\"leading-[20px] whitespace-pre\">Cardiaque (VFC)</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:319\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"580:320\">\n <p className=\"leading-[16px]\">{`Shaffer, F., & Ginsberg, J. P. (2017) — An Overview of Heart Rate Variability Metrics and Norms.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"580:321\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"580:323\" data-name=\"Protocol 3\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"580:324\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[6px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"580:325\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"580:326\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"580:327\">\n <p className=\"leading-[20px]\">Respirer : la voie respiratoire</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:328\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"580:329\">\n <p className=\"leading-[16px] mb-0\">{`Lehrer, P. M., & Gevirtz, R. (2014) — Heart Rate Variability Biofeedback.`}</p>\n <p className=\"leading-[16px]\">Zaccaro, A., et al. (2018) — How Breath-Control Can Change Your Life.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"580:330\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"580:332\" data-name=\"Protocol 4\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"580:333\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"580:334\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"580:335\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"580:336\">\n <p className=\"leading-[24px]\">Ancrer : la voie haptique directe</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:337\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"580:338\">\n <p className=\"leading-[16px]\">McGlone, F., et al. (2014) — Discriminative and Affective Touch: Sensing and Feeling.</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"580:339\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"580:341\" data-name=\"Protocol 5\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"580:342\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"580:343\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[219px]\" data-node-id=\"580:344\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] whitespace-nowrap\" data-node-id=\"580:345\">\n <p className=\"leading-[24px]\">Recentrer : la voie visuo-haptique</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:346\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"580:347\">\n <p className=\"leading-[16px] mb-0\">Lutz, A., et al. (2008) — Attention Regulation and Monitoring in Meditation.</p>\n <p className=\"leading-[16px]\">{`Smallwood, J., & Schooler, J. W. (2015) — The Science of Mind-Wandering.`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"580:348\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n <div className=\"backdrop-blur-[6px] bg-[#0f172a] border-[#4ab8e8] border-b-[0.3px] border-l-4 border-r-[0.3px] border-solid border-t-[0.3px] content-stretch flex gap-[16px] items-center pl-[20px] pr-[16.3px] py-[16.3px] relative rounded-[12px] shrink-0 w-full\" data-node-id=\"580:350\" data-name=\"Protocol 6\">\n <div className=\"flex-[1_0_0] min-w-px relative\" data-node-id=\"580:351\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col gap-[6px] items-start relative size-full\">\n <div className=\"content-stretch flex items-center justify-between relative shrink-0 w-full\" data-node-id=\"580:352\" data-name=\"Container\">\n <div className=\"content-stretch flex flex-col items-start pr-[46.06px] relative shrink-0 w-[302px]\" data-node-id=\"580:353\" data-name=\"Heading 5\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Semi_Bold'] font-semibold justify-center leading-[0] not-italic relative shrink-0 text-[#4ab8e8] text-[16px] w-[302px] whitespace-pre-wrap\" data-node-id=\"580:354\">\n <p className=\"leading-[20px] mb-0\">{`Médiation haptique : la voie `}</p>\n <p className=\"leading-[20px]\">{`de l'interoception (Premium)`}</p>\n </div>\n </div>\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0 w-full\" data-node-id=\"580:355\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] w-full\" data-node-id=\"580:356\">\n <p className=\"leading-[16px]\">{`Garfinkel, S. N., & Critchley, H. D. (2015) — Interoception and Emotion`}</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"h-[12px] relative shrink-0 w-[7.4px]\" data-node-id=\"580:357\" data-name=\"Container\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgContainer1} />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div className=\"backdrop-blur-[20px] bg-[rgba(25,32,44,0.9)] border-[rgba(62,72,78,0.2)] border-solid border-t content-stretch flex gap-[36px] h-[80px] items-center justify-center pb-[16px] pl-[32.16px] pr-[32.17px] pt-[17px] relative shrink-0 w-[402px]\" data-node-id=\"580:359\" data-name=\"Bottom Navigation (Shared Component)\">\n <div className=\"relative shrink-0\" data-node-id=\"580:360\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[21.577px] relative shrink-0 w-[20.173px]\" data-node-id=\"580:361\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:363\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#79d3ff] text-[12px] whitespace-nowrap\" data-node-id=\"580:364\">\n <p className=\"leading-[16px]\">Mon état</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:365\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[23.942px] relative shrink-0 w-[18.921px]\" data-node-id=\"580:366\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin1} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:368\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:369\">\n <p className=\"leading-[16px]\">Outils</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:370\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[22px] relative shrink-0 w-[17.3px]\" data-node-id=\"580:371\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin2} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:373\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:374\">\n <p className=\"leading-[16px]\">SOS stress</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:375\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[20.144px] relative shrink-0 w-[21.5px]\" data-node-id=\"580:376\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin3} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:378\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:379\">\n <p className=\"leading-[16px]\">Évolution</p>\n </div>\n </div>\n </div>\n </div>\n <div className=\"relative shrink-0\" data-node-id=\"580:380\" data-name=\"Container\">\n <div className=\"bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex flex-col items-center justify-center relative size-full\">\n <div className=\"h-[18.615px] relative shrink-0 w-[15px]\" data-node-id=\"580:381\" data-name=\"Margin\">\n <img alt=\"\" className=\"absolute block inset-0 max-w-none size-full\" src={imgMargin4} />\n </div>\n <div className=\"content-stretch flex flex-col items-start relative shrink-0\" data-node-id=\"580:383\" data-name=\"Container\">\n <div className=\"[word-break:break-word] flex flex-col font-['Inter:Regular'] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#bec8cf] text-[12px] whitespace-nowrap\" data-node-id=\"580:384\">\n <p className=\"leading-[16px]\">Profil</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}"}
|