.scene{counter-reset:etape}.metier-choix>.etiquette:before,.champ-nom>.etiquette:before,.couleurs__tete>span:first-child:before{counter-increment:etape;content:counter(etape);display:inline-grid;place-items:center;width:28px;height:28px;margin-right:11px;border-radius:50%;font:600 1.04rem/1 var(--texte);vertical-align:1px;background:var(--encre);color:var(--perle)}@font-face{font-family:Z-electricien-lumiere;src:url(demos/electricien-lumiere/fonts/archivo-400-800-normal-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}@font-face{font-family:Z-plombier-buee;src:url(demos/plombier-buee/fonts/young-serif-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Z-jardinier-cordeau;src:url(demos/jardinier-cordeau/fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Z-nettoyage-jet;src:url(demos/nettoyage-jet/fonts/anton-latin.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}.scene{--air:clamp(14px,2.2vh,30px);position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(340px,31rem) minmax(0,1fr);column-gap:clamp(40px,5vw,84px);align-items:start;min-height:100vh;padding:calc(var(--barre) + var(--air)) var(--marge) var(--air);scroll-margin-top:0}@supports (height:1svh){.scene{min-height:100svh}}.scene>.nacre{-webkit-mask-image:linear-gradient(to bottom,#000 18%,transparent 74%);mask-image:linear-gradient(to bottom,#000 18%,transparent 74%)}.scene__cote,.scene__premier{display:grid;gap:clamp(16px,3vh,30px);align-content:start;min-width:0}.scene__tete .mo-sur{margin:0 0 clamp(8px,1.4vh,14px)}.scene__tete h1{margin:0;font-family:var(--titre);font-size:clamp(2.35rem,3.5vw,3.5rem);line-height:.98}.scene__tete h1 .l1{display:block;font-weight:300;letter-spacing:-.035em}.scene__tete h1 .l2{display:block;font-weight:560;letter-spacing:-.045em;white-space:nowrap}.scene__chapo{margin:clamp(12px,2vh,20px) 0 0;color:var(--encre-2);font-size:clamp(1.06rem,1.2vw,1.16rem);text-wrap:pretty}@media(min-width:1180px)and (max-height:690px){.scene__chapo{display:none}}.etiquette{margin:0 0 10px;font:500 1.04rem/1.3 var(--texte);color:var(--encre-2)}.pastilles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pastille{position:relative;display:flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;font-size:1.04rem;font-weight:500;cursor:pointer;background:#fffefab3;border:1px solid rgba(41,42,45,.16);transition:border-color .2s,background-color .2s}.pastille:hover{border-color:var(--encre);background:var(--perle)}.pastille input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.pastille:has(input:checked){padding:0 17px;border:2px solid transparent;font-weight:600;background:linear-gradient(var(--perle),var(--perle)) padding-box,linear-gradient(90deg,#dca3b5,#ddb48a 34%,#a6cdb6,#aab0e4) border-box}.pastille:has(input:focus-visible){outline:2px solid var(--encre);outline-offset:3px}@media(forced-colors:active){.pastille:has(input:checked){border-color:Highlight}}.champ-nom{display:block}.champ-nom input{display:block;width:100%;min-height:52px;margin:0;padding:4px 0 6px;border:0;border-bottom:1.5px solid rgba(41,42,45,.78);border-radius:0;background:none;box-shadow:none;font:500 clamp(1.3rem,1.7vw,1.6rem)/1.2 var(--titre);letter-spacing:-.01em;color:var(--encre)}.champ-nom input::placeholder{color:var(--encre-2);font-weight:400;opacity:1}.champ-nom input:focus{outline:none;border-bottom-color:var(--encre);box-shadow:0 1.5px 0 var(--encre)}.idees{padding:clamp(44px,5.4vw,80px) var(--marge) 0}.idees__titre{margin:0 0 clamp(14px,1.8vw,24px);font:560 var(--h2-section)/1.05 var(--titre);letter-spacing:-.03em;color:var(--encre);text-wrap:balance}.idees__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 clamp(18px,2.4vw,36px)}.idees__liste li{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);margin-top:-1px}.idees__liste a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:12px 2px;text-decoration:none;color:var(--encre);font-weight:500;font-size:1.1rem;line-height:1.3}.idees__liste svg{width:16px;height:16px;flex:none;color:var(--encre-2);transition:transform .35s var(--sortie),color .2s}.idees__liste a:hover svg{transform:translate(3px);color:var(--encre)}.scene__actions{display:flex;align-items:center;gap:14px 22px;flex:none;margin-left:auto}.legende__note{flex:1 1 100%;margin:-4px 0 0;font-size:1.04rem;line-height:1.45;color:var(--encre-2);text-align:right;text-wrap:balance}.legende__note>span{display:block}.scene__vue{min-width:0}.scene__cadre{--dx:2.2cqw;--l:100cqw;container-type:inline-size;margin-left:auto;max-width:max(440px,calc((100vh - var(--barre) - 126px - 2 * var(--air)) * 1.2857))}@supports (height:1svh){.scene__cadre{max-width:max(440px,calc((100svh - var(--barre) - 126px - 2 * var(--air)) * 1.2857))}}@container (max-width:650px){.scene__actions .lien{display:none}}@media(min-width:1180px)and (max-height:820px){.scene__actions .lien{display:none}}@media(min-width:1180px){@container (max-width:560px){.legende .fleches{display:none}}}.paquet{padding-top:calc(var(--l) * 220 / 1440)}.pile{position:relative;aspect-ratio:16/10;isolation:isolate}.planche{position:absolute;inset:0;container-type:inline-size;border-radius:10px;background:var(--fond,var(--perle));transform:translate(calc(var(--x,0) * var(--dx)),calc(var(--l) * var(--h,0) / -1440));box-shadow:0 0 0 1px #292a2d2b,7px -7px 18px -9px #292a2d80;transition:transform .55s var(--sortie),translate .22s var(--sortie),box-shadow .3s}.r1{z-index:4;box-shadow:0 0 0 1px #292a2d2b,7px -7px 18px -9px #292a2d80,0 1px 3px #292a2d14,0 26px 46px -32px #292a2d8c}.r2{z-index:3}.r3{z-index:2}.r4{z-index:1}@media(hover:hover){.planche:not(.r1):hover{translate:calc(.18 * var(--dx)) calc(var(--l) * -.0085)}}.planche>picture,.planche>picture>img{display:block;width:100%;height:100%;border-radius:inherit}.planche>picture>img{object-fit:cover;object-position:50% 0}.planche__cache,.planche__nom{position:absolute;z-index:1;display:none}.planche__nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.a-un-nom .v-ordi{display:block}.planche__site{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;background:var(--fond);opacity:0;transition:opacity .4s ease;pointer-events:none;transform-origin:0 0}.planche__site.pret{opacity:1}.planche.vif{background:none}.planche.vif>picture,.planche.vif>.planche__cache,.planche.vif>.planche__nom{visibility:hidden}.planche__site iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;transform:scale(var(--k,.5))}.planche__bouton{position:absolute;inset:0;z-index:4;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.r1 .planche__bouton{cursor:zoom-in}.planche__bouton:focus-visible{outline:2px solid var(--encre);outline-offset:4px}.legende{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:12px 0 0}.legende__nom{flex:1 1 auto;min-width:0}@media(min-width:1180px){.legende__nom{flex:1 1 9em}}.legende__nom{margin:0;font:560 clamp(1.25rem,1.7vw,1.55rem)/1.15 var(--titre);letter-spacing:-.02em;color:var(--encre)}.legende__metier{display:block;margin-top:3px;font:400 1.04rem/1.3 var(--texte);letter-spacing:0;color:var(--encre-2)}.legende__nom>span{white-space:nowrap}.couleurs__tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:2px}.couleurs__nom{color:var(--encre);font-weight:500;text-align:right}.couleurs__groupe{display:flex;flex-wrap:wrap;min-height:44px;margin-left:-9px}.couleur{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.couleur:before{content:"";position:absolute;inset:9px;border-radius:50%;background:linear-gradient(135deg,var(--f) 12%,var(--a) 72%);background:linear-gradient(135deg in oklab,var(--f) 12%,var(--a) 72%);box-shadow:0 0 0 1px #292a2d3d;transition:transform .2s var(--sortie),box-shadow .2s}.couleur[aria-checked=true]:after{content:"";position:absolute;inset:3px;border-radius:50%;padding:2.5px;background:linear-gradient(90deg,#dca3b5,#ddb48a 34%,#a6cdb6,#aab0e4);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}.couleur:hover:before{transform:scale(1.1);box-shadow:0 0 0 1px #292a2d80}@media(prefers-reduced-motion:reduce){.couleur:before{transition:none}.couleur:hover:before{transform:none}}.couleur:focus-visible{outline:2px solid var(--encre);outline-offset:1px}@media(forced-colors:active){.couleur[aria-checked=true]{outline:2px solid Highlight}}.couleur--libre:before{background:radial-gradient(circle,#fff 0,#fff0 60%),conic-gradient(from -30deg,#e9577e,#f29a45,#f1d24a,#59bd86,#4a97e6,#8c6cde,#e9577e)}.teintes{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:8px;scroll-margin-bottom:16px}.teintes[hidden]{display:none}.teinte{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 8px;border-radius:999px;font-size:1.04rem;font-weight:500;color:var(--encre);cursor:pointer;background:#fffefab3;border:1px solid rgba(41,42,45,.16);transition:border-color .2s,background-color .2s}.teinte:hover{border-color:var(--encre);background:var(--perle)}.teinte__rond{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c,var(--perle));box-shadow:0 0 0 1px #292a2d3d}.teinte input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}.teinte:has(input:focus-visible){outline:2px solid var(--encre);outline-offset:3px}@keyframes teintes-entree{0%{opacity:0;transform:translateY(-4px)}}@media(prefers-reduced-motion:no-preference){.teintes:not([hidden]){animation:teintes-entree .32s var(--sortie) both}}.fleches{display:flex;gap:8px}.fleches button{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(41,42,45,.3);background:#fffefa99;color:var(--encre);cursor:pointer}.fleches button:hover{background:var(--perle);border-color:var(--encre)}.fleches button:focus-visible{outline:2px solid var(--encre);outline-offset:3px}.fleches svg{width:18px;height:18px}.fleches button:first-child svg{transform:scaleX(-1)}@media(max-width:1179px){.scene{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-bottom:clamp(30px,5vw,56px)}.scene__cote{display:contents}.scene__premier{order:1;align-content:center;gap:clamp(18px,calc(20vh - 100px),64px);min-height:calc(100vh - var(--barre) - var(--air));padding-bottom:var(--air)}.scene__vue{order:2;margin-top:18px;scroll-margin-top:calc(var(--barre) + 8px)}.couleurs{order:3;margin-top:clamp(44px,8vw,64px)}.scene__tete h1{font-size:clamp(2.5rem,6.4vw,4rem)}.scene__chapo{margin-top:clamp(16px,2.6vh,24px)}.pastilles{grid-template-columns:repeat(4,minmax(0,1fr))}.pastille{justify-content:center;padding:0 12px}.pastille:has(input:checked){padding:0 11px}.scene__cadre{--l:calc(100cqw - 3 * var(--dx));max-width:none;margin:0}.paquet{padding-right:calc(3 * var(--dx))}.legende{margin-right:calc(3 * var(--dx))}}@supports (height:1svh){@media(max-width:1179px){.scene__premier{gap:clamp(18px,calc(20svh - 100px),64px);min-height:calc(100svh - var(--barre) - var(--air))}}}@media(max-width:1179px)and (min-height:1000px){.scene__premier{min-height:0;gap:30px;padding-bottom:30px}}@media(max-width:699px){.pastilles{grid-template-columns:1fr 1fr}.scene__cadre{--dx:5px}.paquet{padding-top:30px}.pile{aspect-ratio:390/var(--coupe,590)}.planche__site iframe{width:390px;height:calc(var(--coupe,590) * 1px)}.planche{transform:translate(calc(var(--x,0) * var(--dx)),calc(var(--x,0) * -10px));box-shadow:0 0 0 1px #292a2d2b,4px -4px 9px -5px #292a2d6b}.r1{box-shadow:0 0 0 1px #292a2d2b,4px -4px 9px -5px #292a2d6b,0 26px 46px -32px #292a2d8c}.planche:not(.r1)>picture{display:none}.planche:not(.r1) .planche__cache,.planche:not(.r1) .planche__nom{visibility:hidden}.a-un-nom .v-ordi{display:none}.a-un-nom .v-tel{display:block}.scene__actions{flex:1 1 100%;margin-left:0;flex-direction:column-reverse;align-items:stretch;text-align:center;gap:6px}.scene__actions .lien{align-self:center;padding:10px 4px}.legende__note{margin:2px 0 0;text-align:left;text-wrap:pretty}.legende__note>span{display:inline}}@media(max-width:374px){.scene__tete h1{font-size:10.6vw}}@media(max-width:360px){.pastille{padding:0 12px}.pastille:has(input:checked){padding:0 11px}.pastille .metiers__teintes{display:none}}@media(prefers-reduced-motion:reduce){.planche,.planche__site{transition:none}}.scene-visite{position:absolute;left:0;top:0;width:0;pointer-events:none}.scene-visite .modele{display:none}.scene-visite .modele.devant{display:block}.scene-visite .modele__cadre{background:none;box-shadow:none;border-radius:10px;outline:0}.scene-visite .modele__cadre .surface:not(.volante){opacity:0}.scene-visite .modele__cadre .surface.volante{opacity:1;transition:opacity .18s ease,width .55s var(--sortie)}