Ajoute le bouton Pro connect sur l'interface usager

app/assets/stylesheets/agentconnect.scss

@@ -25,3 +25,15 @@
     font-weight: bold;
   }
 }
+
+[data-connect="pro"] .fr-connect {
+  padding-left: 4.375em !important;
+}
+
+
+[data-connect="pro"] .fr-connect:before {
+  width: 3.375em !important;
+  background-size: 3.375em 3em !important;
+  left: 0.625em !important;
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2254%22%20height%3D%2248%22%20viewBox%3D%220%200%2054%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M34.992%2015.0979L19.998%206.42087L5.004%2015.1819C4.91144%2015.2346%204.83441%2015.3108%204.78069%2015.4028C4.72697%2015.4948%204.69845%2015.5993%204.698%2015.7059V32.6539C4.70386%2032.7592%204.73465%2032.8616%204.78786%2032.9527C4.84106%2033.0439%204.91514%2033.121%205.004%2033.1779L19.996%2041.7779L34.99%2033.0719C35.0789%2033.0151%2035.153%2032.9379%2035.2063%2032.8468C35.2595%2032.7557%2035.2902%2032.6532%2035.296%2032.5479V15.6259C35.2966%2015.5188%2035.2687%2015.4136%2035.2153%2015.3208C35.1619%2015.2281%2035.0848%2015.1511%2034.992%2015.0979Z%22%20fill%3D%22%23000091%22%2F%3E%0A%3Cpath%20d%3D%22M14.641%2015.5979L9.612%2024.2259L5.055%2015.0509L10.445%2011.9379L14.934%2015.0979L14.641%2015.5979ZM35.297%2032.5779V15.6199C35.297%2015.5134%2035.2686%2015.4088%2035.2149%2015.3169C35.1611%2015.225%2035.0838%2015.1491%2034.991%2015.0969L19.998%206.42087%22%20fill%3D%22%23FCC63A%22%2F%3E%0A%3Cpath%20d%3D%22M4.7%2032.5779L20%206.42087V41.7829L5.004%2033.1779C4.91514%2033.121%204.84106%2033.0439%204.78786%2032.9527C4.73465%2032.8616%204.70386%2032.7592%204.698%2032.6539V15.7059L4.7%2032.5779ZM29.369%2011.8429L34.827%2014.9979L30.338%2024.1479L24.951%2014.9119L29.369%2011.8429Z%22%20fill%3D%22%230063CB%22%2F%3E%0A%3Cpath%20d%3D%22M39.606%2012.3029L20.416%201.28287C20.2868%201.2185%2020.1444%201.185%2020%201.185C19.8556%201.185%2019.7132%201.2185%2019.584%201.28287L0.394%2012.3029C0.278488%2012.3798%200.182654%2012.4827%200.114219%2012.6034C0.0457831%2012.7242%200.00665952%2012.8593%200%2012.9979V34.9979C0.00588693%2035.1373%200.0446444%2035.2734%200.113114%2035.3951C0.181583%2035.5167%200.277826%2035.6205%200.394%2035.6979L19.583%2046.7179C19.7122%2046.7822%2019.8546%2046.8157%2019.999%2046.8157C20.1434%2046.8157%2020.2858%2046.7822%2020.415%2046.7179L39.606%2035.6979C39.7222%2035.6205%2039.8184%2035.5167%2039.8869%2035.3951C39.9554%2035.2734%2039.9941%2035.1373%2040%2034.9979V12.9979C39.9933%2012.8593%2039.9542%2012.7242%2039.8858%2012.6034C39.8173%2012.4827%2039.7215%2012.3798%2039.606%2012.3029ZM10.789%2030.0589H10.868C10.826%2030.0589%2010.789%2030.0659%2010.789%2030.1089C10.789%2030.2089%2010.94%2030.1089%2010.989%2030.2089C10.7514%2030.2154%2010.5257%2030.3144%2010.36%2030.4849C10.36%2030.5359%2010.46%2030.5359%2010.511%2030.5359C10.436%2030.6359%2010.285%2030.5859%2010.234%2030.6869C10.2611%2030.7139%2010.2961%2030.7314%2010.334%2030.7369C10.284%2030.7369%2010.234%2030.7369%2010.234%2030.7879V30.9389C10.108%2030.9389%2010.058%2031.0389%209.957%2031.0899C10.157%2031.2409%2010.284%2031.0899%2010.485%2031.0899C9.957%2031.2899%209.529%2031.5679%209.001%2031.7189C8.901%2031.7189%209.001%2031.8699%208.901%2031.8699C9.052%2031.9699%209.128%2031.8199%209.278%2031.8199C8.624%2032.1969%207.945%2032.5199%207.241%2032.9519C7.18676%2033.0059%207.15164%2033.0761%207.141%2033.1519H6.941C6.841%2033.2019%206.891%2033.3279%206.79%2033.4289C7.016%2033.5799%207.29%2033.2289%207.444%2033.4289C7.494%2033.4289%207.344%2033.4789%207.244%2033.4789C7.194%2033.4789%207.194%2033.5789%207.144%2033.5789H6.99C6.89%2033.6539%206.79%2033.7049%206.79%2033.8549C6.74664%2033.8469%206.70187%2033.8521%206.66155%2033.8699C6.62122%2033.8878%206.58723%2033.9174%206.564%2033.9549C7.63803%2033.9506%208.70269%2033.7549%209.708%2033.3769C10.4877%2032.9799%2011.1938%2032.4526%2011.796%2031.8179C11.8231%2031.8449%2011.8406%2031.88%2011.846%2031.9179C11.6989%2032.3544%2011.4166%2032.7326%2011.04%2032.9979C10.763%2033.1489%2010.562%2033.3749%2010.34%2033.4759C10.1917%2033.5588%2010.0487%2033.651%209.912%2033.7519C9.27972%2033.9486%208.63063%2034.0865%207.973%2034.1639L7.668%2034.2079C7.443%2034.2409%207.219%2034.2769%206.997%2034.3159L5.004%2033.1779C4.93108%2033.132%204.86805%2033.072%204.8186%2033.0014C4.76914%2032.9308%204.73427%2032.8511%204.716%2032.7669C4.74933%2032.749%204.78082%2032.7279%204.81%2032.7039C4.77901%2032.671%204.74011%2032.6465%204.697%2032.6329V31.9829C5.74493%2031.7965%206.76549%2031.4801%207.735%2031.0409C6.81772%2030.4034%205.78681%2029.9475%204.698%2029.6979V28.1829C5.25307%2028.2738%205.80084%2028.4049%206.337%2028.5749C6.74977%2028.7265%207.14585%2028.9202%207.519%2029.1529C7.66563%2029.2939%207.82573%2029.4201%207.997%2029.5299C8.11768%2029.5987%208.25253%2029.639%208.3912%2029.6477C8.52987%2029.6564%208.66869%2029.6332%208.797%2029.5799H9.127C9.84341%2029.4615%2010.5135%2029.1484%2011.064%2028.6749C11.064%2028.7249%2011.114%2028.7249%2011.164%2028.7249C11.0857%2029.1235%2010.941%2029.5061%2010.736%2029.8569C10.739%2029.9079%2010.688%2030.0089%2010.789%2030.0589ZM13.606%2033.6299C13.857%2033.5299%2014.006%2033.3529%2014.235%2033.2529C14.185%2033.3029%2014.185%2033.4039%2014.135%2033.4529C13.9474%2033.5701%2013.7707%2033.704%2013.607%2033.8529C13.0413%2034.3514%2012.5116%2034.8894%2012.022%2035.4629C11.77%2035.7629%2011.494%2036.0409%2011.222%2036.3179C11.1256%2036.408%2011.0219%2036.4899%2010.912%2036.5629L8.385%2035.1129C8.74443%2035.1432%209.1063%2035.1254%209.461%2035.0599C9.75543%2034.9773%2010.0416%2034.8679%2010.316%2034.7329V34.8329C11.016%2034.5559%2011.548%2033.9269%2012.253%2033.7009C12.278%2033.7009%2012.379%2033.8009%2012.479%2033.7509C12.6601%2033.5264%2012.8904%2033.3466%2013.152%2033.2252C13.4136%2033.1038%2013.6997%2033.0442%2013.988%2033.0509C13.988%2033.1009%2013.988%2033.1509%2014.038%2033.1509H14.063C13.912%2033.2769%2013.736%2033.4019%2013.563%2033.5279C13.506%2033.5799%2013.556%2033.6299%2013.606%2033.6299ZM4.698%2027.4659V27.2799C5.21615%2027.1444%205.75053%2027.0811%206.286%2027.0919C6.44434%2027.0667%206.60566%2027.0667%206.764%2027.0919C6.05844%2027.0912%205.35854%2027.2179%204.698%2027.4659ZM35.298%2032.5539C35.2922%2032.6592%2035.2615%2032.7617%2035.2083%2032.8528C35.155%2032.9439%2035.0809%2033.0211%2034.992%2033.0779L24.913%2038.9289C23.7558%2038.5977%2022.618%2038.2021%2021.505%2037.7439C21.3437%2037.3929%2021.256%2037.0127%2021.2474%2036.6266C21.2388%2036.2404%2021.3095%2035.8566%2021.455%2035.4989C21.5349%2035.1909%2021.6531%2034.8943%2021.807%2034.6159C21.832%2034.5909%2021.857%2034.5659%2021.857%2034.5399C21.8636%2034.5399%2021.87%2034.5372%2021.8747%2034.5326C21.8794%2034.5279%2021.882%2034.5215%2021.882%2034.5149C21.9931%2034.3204%2022.1191%2034.1348%2022.259%2033.9599L22.274%2033.9449L22.294%2033.9239L22.309%2033.9089C22.309%2033.8839%2022.334%2033.8589%2022.359%2033.8329C22.384%2033.7819%2022.434%2033.7569%2022.459%2033.7069C22.6346%2033.521%2022.8285%2033.3535%2023.038%2033.2069C23.2507%2033.1298%2023.4695%2033.0706%2023.692%2033.0299C24.503%2033.0896%2025.3095%2033.1991%2026.107%2033.3579C26.205%2033.3726%2026.2992%2033.4066%2026.384%2033.4579C26.6851%2033.5165%2026.9962%2033.4994%2027.289%2033.4079C27.4799%2033.373%2027.6587%2033.2897%2027.8084%2033.1662C27.9581%2033.0426%2028.0736%2032.8827%2028.144%2032.7019C28.232%2032.5407%2028.2823%2032.3616%2028.2909%2032.1781C28.2996%2031.9947%2028.2664%2031.8116%2028.194%2031.6429C28.016%2031.3669%2028.181%2031.2059%2028.375%2031.0529L28.443%2030.9979C28.5294%2030.9367%2028.6071%2030.864%2028.674%2030.7819C28.8%2030.5299%2028.574%2030.3819%2028.523%2030.1519C28.473%2030.0519%2028.297%2030.1019%2028.196%2029.9519C28.548%2029.8009%2029.051%2029.5229%2028.825%2029.0949C28.674%2028.8679%2028.448%2028.4649%2028.725%2028.2379C29.077%2028.0379%2029.58%2028.0869%2029.731%2027.7589C29.7804%2027.5682%2029.7794%2027.368%2029.7282%2027.1778C29.6771%2026.9876%2029.5774%2026.814%2029.439%2026.6739L29.364%2026.5659C29.289%2026.4589%2029.215%2026.3519%2029.153%2026.2459C28.9941%2025.9821%2028.8177%2025.7292%2028.625%2025.4889C28.405%2025.1774%2028.2275%2024.8381%2028.097%2024.4799C27.946%2024.1019%2028.147%2023.7739%2028.147%2023.3959C28.1618%2022.6677%2028.0512%2021.9425%2027.82%2021.2519C27.694%2020.8989%2027.644%2020.5209%2027.493%2020.1929C27.474%2019.9821%2027.3956%2019.781%2027.267%2019.6129C27.2422%2019.5618%2027.2292%2019.5057%2027.2292%2019.4489C27.2292%2019.3921%2027.2422%2019.336%2027.267%2019.2849C27.472%2019.1403%2027.6656%2018.9802%2027.846%2018.8059C27.9017%2018.6836%2027.9122%2018.5455%2027.8756%2018.4162C27.839%2018.2869%2027.7576%2018.1748%2027.646%2018.0999C27.319%2017.9489%2027.346%2018.4279%2027.118%2018.5289H26.967C26.917%2018.4029%2027.017%2018.3519%2027.118%2018.2519C27.118%2018.2019%2027.118%2018.1009%2027.068%2018.1009C26.868%2018.1009%2026.691%2018.0499%2026.64%2017.9499C26.158%2017.3492%2025.5113%2016.9023%2024.779%2016.6639C24.967%2016.7216%2025.1615%2016.7552%2025.358%2016.7639C25.6956%2016.8353%2026.0471%2016.8003%2026.364%2016.6639C26.591%2016.5879%2026.641%2016.1849%2026.741%2015.9579C26.7613%2015.848%2026.7583%2015.7351%2026.7323%2015.6264C26.7063%2015.5177%2026.6578%2015.4157%2026.59%2015.3269C26.3629%2014.9967%2026.0495%2014.7352%2025.684%2014.5709C25.508%2014.4949%2025.231%2014.3439%2025.005%2014.2179C24.928%2014.1637%2024.8434%2014.1212%2024.754%2014.0919C21.789%2012.6069%2015.685%2013.8919%2015.22%2014.0919H15.211C14.7825%2014.2161%2014.3648%2014.375%2013.962%2014.5669C13.4074%2014.7728%2012.9066%2015.1015%2012.497%2015.5284C12.0875%2015.9552%2011.7798%2016.4692%2011.597%2017.0319C11.026%2017.407%2010.5658%2017.928%2010.264%2018.5409C9.836%2019.3409%209.208%2020.0499%209.308%2020.9549C9.408%2021.7349%209.585%2022.4389%209.736%2023.2439C9.77894%2023.5159%209.84586%2023.7836%209.936%2024.0439C10.036%2024.3199%209.936%2024.6729%2010.087%2024.8989C10.162%2025.0499%2010.112%2025.2259%2010.314%2025.3269V25.5269C10.364%2025.5769%2010.364%2025.6269%2010.465%2025.6269V25.8269C10.8997%2026.2504%2011.2723%2026.7331%2011.572%2027.2609C11.672%2027.5369%2011.094%2027.4119%2010.872%2027.3109C10.4565%2027.0404%2010.0762%2026.7192%209.74%2026.3549C9.71248%2026.3817%209.69456%2026.4168%209.689%2026.4549C9.889%2026.8069%2010.595%2027.2349%2010.217%2027.4609C10.017%2027.5609%209.789%2027.3099%209.588%2027.5119C9.538%2027.5869%209.588%2027.6879%209.588%2027.7879C9.311%2027.5879%209.01%2027.6879%208.733%2027.5879C8.533%2027.5379%208.481%2027.1609%208.255%2027.1609C7.65851%2027.0153%207.05373%2026.9061%206.444%2026.8339C5.86788%2026.7475%205.28724%2026.6944%204.705%2026.6749V15.7059C4.70545%2015.5993%204.73397%2015.4948%204.78769%2015.4028C4.84141%2015.3108%204.91844%2015.2346%205.011%2015.1819L19.998%206.42087L34.992%2015.0979C35.0846%2015.1505%2035.1617%2015.2267%2035.2154%2015.3187C35.2692%2015.4107%2035.2977%2015.5153%2035.298%2015.6219V32.5539ZM27.344%2024.2929C27.3138%2024.3399%2027.2719%2024.3782%2027.2225%2024.4043C27.1731%2024.4304%2027.1178%2024.4434%2027.062%2024.4419C26.9618%2024.5263%2026.8676%2024.6175%2026.78%2024.7149C26.88%2024.7149%2026.78%2024.8639%2026.88%2024.8639C26.675%2025.0869%2026.957%2025.5579%2026.675%2025.6569C26.3059%2025.7558%2025.9171%2025.7558%2025.548%2025.6569C25.6029%2025.6451%2025.6589%2025.6397%2025.715%2025.6409H25.8C25.8627%2025.6484%2025.9263%2025.6404%2025.9851%2025.6173C26.0439%2025.5943%2026.0961%2025.557%2026.137%2025.5089V25.3089C26.137%2025.2589%2026.086%2025.2589%2026.037%2025.2589C26.0107%2025.287%2025.9752%2025.3047%2025.937%2025.3089C25.9345%2025.2639%2025.9185%2025.2207%2025.891%2025.185C25.8635%2025.1493%2025.8259%2025.1227%2025.783%2025.1089C25.6501%2025.1266%2025.5148%2025.1109%2025.3894%2025.0633C25.2641%2025.0156%2025.1526%2024.9375%2025.065%2024.8359C25.2006%2024.7707%2025.3542%2024.7531%2025.501%2024.7859C25.629%2024.7859%2025.578%2024.5629%2025.732%2024.4639H25.886C26.193%2024.0919%2026.757%2023.9929%2026.86%2023.6209C26.86%2023.5209%2026.578%2023.5209%2026.373%2023.4719C26.0989%2023.4383%2025.821%2023.4552%2025.553%2023.5219C25.1932%2023.5715%2024.8405%2023.6631%2024.502%2023.7949C24.7823%2023.5891%2025.094%2023.4301%2025.425%2023.3239C25.6574%2023.2344%2025.8978%2023.1674%2026.143%2023.1239L26.275%2023.0979L26.408%2023.0709C26.5894%2023.0167%2026.7826%2023.0167%2026.964%2023.0709C27.195%2023.1709%2027.579%2023.1709%2027.63%2023.3189C27.73%2023.5919%2027.476%2023.8639%2027.195%2024.0629C27.138%2024.1439%2027.344%2024.1979%2027.344%2024.2929Z%22%20fill%3D%22white%22%2F%3E%0A%3Crect%20x%3D%2224%22%20y%3D%221%22%20width%3D%2229.56%22%20height%3D%2213.302%22%20rx%3D%222%22%20fill%3D%22%23FCC63A%22%2F%3E%0A%3Cpath%20d%3D%22M26.562%2012.1676V3.31589H29.4831C30.4526%203.31589%2031.2155%203.55194%2031.7719%204.02403C32.3367%204.49612%2032.6191%205.14104%2032.6191%205.95877C32.6191%206.76807%2032.3367%207.40876%2031.7719%207.88085C31.2155%208.35295%2030.4526%208.58899%2029.4831%208.58899H28.3576V12.1676H26.562ZM29.559%204.84598H28.3576V7.05891H29.559C29.9383%207.05891%2030.2334%206.96196%2030.4441%206.76807C30.6633%206.57417%2030.7729%206.29597%2030.7729%205.93348C30.7729%205.59627%2030.6633%205.33072%2030.4441%205.13682C30.2334%204.94293%2029.9383%204.84598%2029.559%204.84598Z%22%20fill%3D%22%23161616%22%2F%3E%0A%3Cpath%20d%3D%22M34.2307%2012.1676V3.31589H36.9368C37.9063%203.31589%2038.6734%203.55194%2039.2383%204.02403C39.8031%204.49612%2040.0855%205.14104%2040.0855%205.95877C40.0855%206.48987%2039.959%206.95353%2039.7061%207.34975C39.4617%207.73754%2039.116%208.03681%2038.6692%208.24757L41.4512%2012.1676H39.3015L36.9494%208.58899H36.0263V12.1676H34.2307ZM37.038%204.84598H36.0263V7.05891H37.038C37.4173%207.05891%2037.7124%206.96196%2037.9231%206.76807C38.1339%206.57417%2038.2393%206.29597%2038.2393%205.93348C38.2393%205.59627%2038.1339%205.33072%2037.9231%205.13682C37.7124%204.94293%2037.4173%204.84598%2037.038%204.84598Z%22%20fill%3D%22%23161616%22%2F%3E%0A%3Cpath%20d%3D%22M46.5486%203.06299C47.2399%203.06299%2047.8722%203.18944%2048.4454%203.44235C49.0271%203.69525%2049.5245%204.03246%2049.9376%204.45397C50.3507%204.87548%2050.671%205.37287%2050.8986%205.94612C51.1262%206.51095%2051.24%207.10949%2051.24%207.74176C51.24%208.37402%2051.1262%208.97678%2050.8986%209.55004C50.671%2010.1149%2050.3507%2010.608%2049.9376%2011.0295C49.5245%2011.451%2049.0271%2011.7883%2048.4454%2012.0412C47.8722%2012.2941%2047.2399%2012.4205%2046.5486%2012.4205C45.8574%2012.4205%2045.2209%2012.2941%2044.6392%2012.0412C44.0575%2011.7883%2043.5601%2011.451%2043.147%2011.0295C42.734%2010.608%2042.4136%2010.1149%2042.186%209.55004C41.9584%208.97678%2041.8446%208.37402%2041.8446%207.74176C41.8446%207.10949%2041.9584%206.51095%2042.186%205.94612C42.4136%205.37287%2042.734%204.87548%2043.147%204.45397C43.5601%204.03246%2044.0575%203.69525%2044.6392%203.44235C45.2209%203.18944%2045.8574%203.06299%2046.5486%203.06299ZM46.5486%2010.7387C46.9617%2010.7387%2047.3411%2010.6628%2047.6867%2010.5111C48.0408%2010.3509%2048.34%2010.1402%2048.5845%209.87882C48.8374%209.60905%2049.0355%209.29292%2049.1789%208.93042C49.3222%208.55949%2049.3938%208.16327%2049.3938%207.74176C49.3938%207.32025%2049.3222%206.92824%2049.1789%206.56574C49.0355%206.19481%2048.8374%205.87868%2048.5845%205.61734C48.34%205.34758%2048.0408%205.13682%2047.6867%204.98508C47.3411%204.8249%2046.9617%204.74482%2046.5486%204.74482C46.1355%204.74482%2045.752%204.8249%2045.3979%204.98508C45.0438%205.13682%2044.7403%205.34758%2044.4874%205.61734C44.243%205.87868%2044.0491%206.19481%2043.9058%206.56574C43.7624%206.92824%2043.6908%207.32025%2043.6908%207.74176C43.6908%208.16327%2043.7624%208.55949%2043.9058%208.93042C44.0491%209.29292%2044.243%209.60905%2044.4874%209.87882C44.7403%2010.1402%2045.0438%2010.3509%2045.3979%2010.5111C45.752%2010.6628%2046.1355%2010.7387%2046.5486%2010.7387Z%22%20fill%3D%22%23161616%22%2F%3E%0A%3C%2Fsvg%3E") !important;
+}

app/controllers/users/commencer_controller.rb

@@ -83,6 +83,14 @@ def france_connect
       redirect_to france_connect_particulier_path
     end
 
+    def pro_connect
+      @procedure = retrieve_procedure
+      return procedure_not_found if @procedure.blank?
+
+      store_user_location!(@procedure)
+      redirect_to agent_connect_login_path
+    end
+
     def procedure_for_help
       retrieve_procedure
     end

app/views/commencer/show.html.haml

@@ -4,14 +4,20 @@
   - if !user_signed_in?
     = render Dsfr::CalloutComponent.new(title: t(".start_procedure"), heading_level: 'h2') do |c|
       - c.with_html_body do
-        = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), heading_level: :h3 }
-        %ul.fr-btns-group.fr-btns-group--inline
-          %li
-            = link_to commencer_sign_up_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn' do
-              = t('views.shared.account.create')
-              %span.optional-on-small-screens.fr-ml-1v
-                #{Current.application_name}
-          %li= link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--secondary'
+        .fr-grid-row.fr-grid-row--gutters
+          .fr-col-12.fr-col-md-5
+            = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), heading_level: :h3 }
+            = render partial: 'shared/pro_connect_login', locals: { url: commencer_pro_connect_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), heading_level: :h3 }
+          .fr-col-12.fr-col-md-1.flex.justify-center
+            %p.fr-hr-or= t('views.shared.france_connect_login.separator')
+          .fr-col-12.fr-col-md-6.flex.justify-center.column
+            %h3.fr-h6 Se connecter avec son compte démarches-simplifiees.fr
+            %ul.fr-btns-group
+              %li.text-center
+                = link_to commencer_sign_up_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn' do
+                  = t('views.shared.account.create', application_name: Current.application_name)
+
+              %li= link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--secondary'
 
     = render ProcedureDraftWarningComponent.new(revision: @revision, current_administrateur:, extra_class_names: "fr-mb-2w")
 

app/views/shared/_france_connect_login.html.haml

@@ -1,9 +1,7 @@
 - if FranceConnectService.enabled?
   .france-connect-login
-    = tag.public_send(local_assigns.fetch(:heading_level, :h2), class: "fr-h6") do
+    = tag.public_send(local_assigns.fetch(:heading_level, :h2), class: "fr-h6 mt-3") do
       = t('views.shared.france_connect_login.title')
-    %p
-      = t('views.shared.france_connect_login.description')
 
     .fr-connect-group.fr-my-2w
       = link_to(url, class: "fr-btn fr-connect") do
@@ -13,6 +11,5 @@
       %p
         = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", title: new_tab_suffix(t('views.shared.france_connect_login.help_link')), **external_link_attributes
 
-    %p.fr-hr-or= t('views.shared.france_connect_login.separator')
 - else
   <!-- FranceConnect is not configured -->

app/views/shared/_pro_connect_login.html.haml

@@ -0,0 +1,15 @@
+- if AgentConnectService.enabled?
+  .france-connect-login{ data: { connect: 'pro' } }
+    = tag.public_send(local_assigns.fetch(:heading_level, :h2), class: "fr-h6 mt-3") do
+      = t('views.shared.pro_connect_login.title')
+
+    .fr-connect-group.fr-my-2w
+      = link_to(url, class: "fr-btn fr-connect") do
+        %span.fr-connect__login
+          = t('views.shared.pro_connect_login.login_button')
+        %span.fr-connect__brand ProConnect
+      %p
+        = link_to t('views.shared.pro_connect_login.help_link'), "https://www.proconnect.gouv.fr/", title: new_tab_suffix(t('views.shared.pro_connect_login.help_link')), **external_link_attributes
+
+- else
+  <!-- ProConnect is not configured -->