/* Une expérience plein écran, comme la création d'une vidéo : le site s'efface et l'écran prend les couleurs de l'occasion. */
@property --s1{syntax:"<color>";inherits:true;initial-value:#f5a623}
@property --s2{syntax:"<color>";inherits:true;initial-value:#3c6df0}
@property --s3{syntax:"<color>";inherits:true;initial-value:#141433}
body:has(.studio) header.barre,body:has(.studio) nav.onglets,body:has(.studio) footer.pied,body:has(.studio) .onglets-appli,
body:has(.studio) #lecteur,body:has(.studio) .lecteur{display:none!important}
body:has(.studio){overflow:hidden}
.studio{--s1:#f5a623;--s2:#3c6df0;--s3:#141433;--sur:#14111f;--lueur:rgba(60,109,240,.45);--verre:rgba(255,255,255,.11);--filet:rgba(255,255,255,.18);
position:fixed;inset:0;z-index:1200;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:calc(12px + env(safe-area-inset-top)) 18px calc(108px + env(safe-area-inset-bottom));
box-sizing:border-box;color:#fff;background:var(--s3);isolation:isolate;transition:--s1 .6s ease,--s2 .6s ease,--s3 .6s ease}
.studio::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;opacity:.38;will-change:transform;
background:radial-gradient(36% 28% at 22% 20%,var(--s1),transparent 70%),radial-gradient(34% 30% at 82% 36%,var(--s2),transparent 70%),radial-gradient(44% 30% at 46% 86%,var(--s1),transparent 72%);
animation:studio-ciel 18s ease-in-out infinite alternate}
.studio::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background-image:radial-gradient(circle,transparent 0 9px,rgba(255,255,255,.06) 9.5px 11px,transparent 11.5px 19px,rgba(255,255,255,.045) 19.5px 21px,transparent 21.5px),radial-gradient(circle,rgba(255,255,255,.1) 0 2.5px,transparent 3px);
background-size:64px 64px;background-position:0 0,32px 32px;
-webkit-mask-image:linear-gradient(168deg,#000,transparent 50%);mask-image:linear-gradient(168deg,#000,transparent 50%)}
@keyframes studio-ciel{to{transform:translate3d(-4%,3%,0) scale(1.1) rotate(4deg)}}
.studio:has(.studio-progres)::before,.studio:has(.camera-studio)::before{animation:none}
.studio>*{max-width:480px;margin-left:auto;margin-right:auto}
.studio-quitter{position:fixed;left:14px;top:calc(12px + env(safe-area-inset-top));z-index:4;width:44px;height:44px;margin:0;padding:0;display:grid;place-items:center;
border:0;border-radius:50%;background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet);color:#fff;cursor:pointer}
.studio-quitter svg{width:20px;height:20px}
.studio-tete{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:max-content;max-width:calc(100% - 54px);min-height:44px;margin:0 0 14px 54px;padding:5px 16px 5px 5px;
border-radius:999px;background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet)}
.studio-tete img,.studio-tete .vide{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:linear-gradient(135deg,var(--s1),var(--s2))}
.studio-tete h1{font-size:13px;font-weight:600;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-points{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:0;margin-bottom:20px}
.studio-points i{height:4px;border-radius:2px;background:rgba(255,255,255,.2);transition:background .3s ease}
.studio-points i.fait{background:linear-gradient(90deg,var(--s1),var(--s2))}
.etape{display:none}
.etape.ici{display:block;animation:studio-fondu .3s ease}
@keyframes studio-fondu{from{opacity:0}}
@keyframes studio-monte{from{opacity:0;transform:translateY(14px)}}
@keyframes studio-pop{from{opacity:0;transform:scale(.7)}}
.etape.ici>h2{animation:studio-monte .4s cubic-bezier(.2,.8,.2,1) both}
.etape h2{font-size:clamp(25px,7.4vw,30px);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:4px 0 16px;text-wrap:balance}
.etape h2 svg{display:none}
.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 6px;margin-bottom:20px}
.tuile{--t1:#8f7bff;--t2:#d946ef;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:#fff;font:inherit;
font-size:13.5px;font-weight:600;line-height:1.15;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .22s ease}
.tuile[data-code="maman"]{--t1:#ff5e9c;--t2:#ff9a5c}.tuile[data-code="papa"]{--t1:#3b82f6;--t2:#22d3ee}
.tuile[data-code="famille"]{--t1:#f59e0b;--t2:#ef4444}.tuile[data-code="amour"]{--t1:#f43f5e;--t2:#c026d3}
.tuile[data-code="amis"]{--t1:#10b981;--t2:#a3e635}.tuile[data-code="frere"]{--t1:#6366f1;--t2:#38bdf8}
.tuile[data-code="soeur"]{--t1:#d946ef;--t2:#fb7185}.tuile[data-code="tous"]{--t1:#14b8a6;--t2:#3b82f6}
.grille:not(.deux) .tuile{animation:studio-pop .36s cubic-bezier(.3,1.5,.5,1) both}
.grille:not(.deux) .tuile:nth-child(2){animation-delay:.03s}.grille:not(.deux) .tuile:nth-child(3){animation-delay:.06s}
.grille:not(.deux) .tuile:nth-child(4){animation-delay:.09s}.grille:not(.deux) .tuile:nth-child(5){animation-delay:.12s}
.grille:not(.deux) .tuile:nth-child(6){animation-delay:.15s}.grille:not(.deux) .tuile:nth-child(7){animation-delay:.18s}
.grille:not(.deux) .tuile:nth-child(8){animation-delay:.21s}.grille:not(.deux) .tuile:nth-child(9){animation-delay:.24s}
.grille:not(.deux) .tuile svg{width:clamp(64px,19.5vw,80px);height:clamp(64px,19.5vw,80px);padding:clamp(15px,4.6vw,19px);box-sizing:border-box;border-radius:50%;
background:linear-gradient(145deg,var(--t1),var(--t2));box-shadow:0 10px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.38);
transition:transform .24s cubic-bezier(.3,1.7,.5,1),box-shadow .2s ease}
.grille:not(.deux) .tuile[data-code="ecrire"] svg{background:var(--verre);box-shadow:inset 0 0 0 1.5px var(--filet)}
.tuile:active svg{transform:scale(.9)}
.grille:has([aria-pressed="true"]) .tuile:not([aria-pressed="true"]){opacity:.62}
.grille:not(.deux) .tuile[aria-pressed="true"] svg{transform:scale(1.07);box-shadow:0 0 0 3px var(--s3),0 0 0 6px #fff,0 16px 30px rgba(0,0,0,.42)}
.grille:not(.deux) .tuile[aria-pressed="true"]::after{content:"✓";position:absolute;top:-5px;left:calc(50% + 16px);width:26px;height:26px;display:grid;place-items:center;
border-radius:50%;background:#fff;color:#14111f;font-size:15px;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.35);animation:studio-pop .28s cubic-bezier(.3,1.8,.5,1)}
.studio-rangee{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 14px;padding:4px 18px 10px;scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.studio-rangee::-webkit-scrollbar{display:none}
.studio-rangee .tuile{flex:0 0 auto;flex-direction:row;gap:7px;padding:11px 17px 11px 12px;border-radius:999px;background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet);
white-space:nowrap;transition:background .2s ease,color .2s ease,transform .22s cubic-bezier(.3,1.7,.5,1)}
.studio-rangee .tuile svg{width:22px;height:22px;flex:none}
.studio-rangee .tuile[aria-pressed="true"]{color:var(--sur);background:linear-gradient(120deg,var(--s1),var(--s2));box-shadow:0 8px 20px var(--lueur);transform:scale(1.03)}
.grille.deux{grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px;margin:0;min-height:calc(100vh - 306px);min-height:calc(100dvh - 306px)}
.tuile.geante{overflow:hidden;align-items:flex-start;justify-content:flex-end;gap:3px;min-height:150px;padding:20px 22px;border-radius:28px;font-size:27px;font-weight:800;letter-spacing:-.01em;text-align:left;
box-shadow:0 18px 38px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .22s cubic-bezier(.3,1.7,.5,1);animation:studio-monte .42s cubic-bezier(.2,.8,.2,1) both}
.tuile.geante:nth-child(2){animation-delay:.07s}
.tuile.geante:active{transform:scale(.97)}
.tuile.geante[data-code="voix"]{background:linear-gradient(135deg,#6d3bf5,#e0409a)}
.tuile.geante[data-code="video"]{background:linear-gradient(135deg,#ff8a2c,#ff2d6b)}
.tuile.geante svg{position:absolute;left:20px;top:20px;width:62px;height:62px;padding:15px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.22)}
.tuile.geante small{font-size:14px;font-weight:600;letter-spacing:0;opacity:.9}
.deco-ondes{position:absolute;left:98px;right:20px;top:20px;height:clamp(62px,15vh,132px);display:flex;align-items:center;gap:5px;pointer-events:none}
.deco-ondes b{flex:1;height:100%;border-radius:3px;background:rgba(255,255,255,.72);transform:scaleY(.22);animation:studio-onde 1s ease-in-out infinite alternate}
.deco-ondes b:nth-child(3n){animation-delay:-.35s;animation-duration:.8s}.deco-ondes b:nth-child(3n+1){animation-delay:-.7s;animation-duration:1.2s}
.deco-ondes b:nth-child(4n){animation-delay:-.15s;animation-duration:.9s}
@keyframes studio-onde{to{transform:scaleY(1)}}
.deco-viseur{position:absolute;right:20px;top:20px;height:clamp(62px,15vh,132px);aspect-ratio:3/4;pointer-events:none;
background:linear-gradient(#fff,#fff) 0 0/20px 3px,linear-gradient(#fff,#fff) 0 0/3px 20px,linear-gradient(#fff,#fff) 100% 0/20px 3px,linear-gradient(#fff,#fff) 100% 0/3px 20px,
linear-gradient(#fff,#fff) 0 100%/20px 3px,linear-gradient(#fff,#fff) 0 100%/3px 20px,linear-gradient(#fff,#fff) 100% 100%/20px 3px,linear-gradient(#fff,#fff) 100% 100%/3px 20px;background-repeat:no-repeat}
.deco-viseur b{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:#fff;animation:studio-rec 1.3s ease-in-out infinite}
@keyframes studio-rec{50%{opacity:.25;transform:scale(.72)}}
.studio-nom{display:none;margin:-6px 0 16px}
.studio-nom.ici{display:block;animation:studio-monte .25s ease}
.studio-nom input{width:100%;box-sizing:border-box;font:inherit;font-size:18px;padding:15px 18px;border-radius:16px;border:0;background:var(--verre);color:#fff;box-shadow:inset 0 0 0 1.5px var(--filet)}
.studio-nom input::placeholder{color:rgba(255,255,255,.6)}
.studio-nom input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--s1)}
.actions-etape,.studio-envoi{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;box-sizing:border-box;max-width:516px;margin:0 auto;
padding:18px 18px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--s3) 44%)}
.actions-etape>span:empty{display:none}
.rond{flex:none;width:54px;height:54px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--verre);color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px var(--filet);
transition:transform .18s cubic-bezier(.3,1.7,.5,1),opacity .2s ease}
.rond:active{transform:scale(.9)}
.rond svg{width:25px;height:25px}
.rond:disabled{cursor:default;color:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rond.principal{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;flex:1;width:auto;height:58px;margin-left:auto;border-radius:999px;
font:inherit;font-size:17.5px;font-weight:800;color:var(--sur);background:linear-gradient(100deg,var(--s1),var(--s2));box-shadow:0 14px 30px var(--lueur)}
.rond.principal svg{order:2;width:24px;height:24px}
.rond.principal:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
transform:skewX(-18deg);animation:studio-reflet 3.4s ease-in-out infinite}
@keyframes studio-reflet{55%,100%{left:125%}}
.rond.principal:disabled{color:rgba(255,255,255,.55);background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet)}
.enregistreur{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:calc(100vh - 240px);min-height:calc(100dvh - 240px)}
.enregistreur h2{text-align:center;margin:0}
.micro{--niveau:0;position:relative;width:168px;height:168px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--sur);margin:36px 0 10px;
background:linear-gradient(145deg,var(--s1),var(--s2));box-shadow:0 18px 46px var(--lueur);-webkit-tap-highlight-color:transparent}
.micro svg.icone{width:74px;height:74px}
.micro svg.anneau{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg);pointer-events:none}
.micro::before{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:50%;background:var(--s2);opacity:.2;transform:scale(calc(1 + var(--niveau)*.5));transition:transform 90ms linear}
.micro:not(.enregistre)::before{animation:studio-souffle 2.8s ease-in-out infinite}
@keyframes studio-souffle{50%{transform:scale(1.12);opacity:.1}}
.micro.enregistre{cursor:pointer}
.micro.enregistre svg.icone{visibility:hidden}
.micro.enregistre::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:14px;background:currentColor}
.voix-compteur{visibility:hidden;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.micro.enregistre+.voix-compteur{visibility:visible}
.visage-studio{position:relative;width:96px;height:96px;flex:none;border:0;border-radius:50%;padding:3px;cursor:pointer;background:linear-gradient(145deg,var(--s1),var(--s2))}
.visage-studio img{position:relative;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--s3);box-sizing:border-box}
.visage-studio img:not([src]){display:none}
.visage-studio>svg{display:block;width:100%;height:100%;padding:20px;box-sizing:border-box;border-radius:50%;background:var(--s3);color:#fff}
.visage-studio img[src]~svg{display:none}
.visage-studio span{position:absolute;right:-3px;bottom:-3px;width:36px;height:36px;border-radius:50%;background:#fff;color:#14111f;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.visage-studio span svg{width:20px;height:20px}
.etape:has(.camera-studio){animation:none}
.camera-studio{position:fixed;inset:0;z-index:1300;background:#000;overflow:hidden}
.camera-cadre{position:absolute;inset:0;overflow:hidden;background:#000}
.camera-studio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camera-studio video.miroir{transform:scaleX(-1)}
.camera-studio video.relue{transform:none}
.camera-barre{position:absolute;left:8px;right:8px;top:calc(6px + env(safe-area-inset-top));height:4px;border-radius:2px;
background:rgba(255,255,255,.3);overflow:hidden;z-index:2}
.camera-barre i{display:block;width:0;height:100%;background:#fe2c55}
.camera-chanson{position:absolute;left:50%;top:calc(20px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;
align-items:center;gap:6px;max-width:58vw;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:13px;
font-weight:600;white-space:nowrap;overflow:hidden}
.camera-chanson span{overflow:hidden;text-overflow:ellipsis}
.camera-chanson svg{width:15px;height:15px;flex:none}
.camera-compteur{position:absolute;top:calc(62px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:3px 10px;
border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;display:none}
.camera-studio.enregistre .camera-compteur{display:block;background:#fe2c55}
.camera-studio.enregistre .camera-chanson{display:none}
.camera-retour{position:absolute;top:calc(16px + env(safe-area-inset-top));left:10px;width:46px;height:46px;background:rgba(0,0,0,.5);
color:#fff;box-shadow:none}
.camera-laterale{position:absolute;right:8px;top:calc(76px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:18px}
.camera-outil{display:flex;flex-direction:column;align-items:center;gap:3px;width:58px;padding:0;border:0;background:none;color:#fff;
font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.camera-outil svg{width:30px;height:30px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.camera-outil[aria-pressed="true"]{color:#ffc53d}
.camera-studio.enregistre .camera-laterale,.camera-studio.enregistree .camera-laterale{display:none}
.camera-decompte{position:absolute;left:0;right:0;top:32%;text-align:center;color:#fff;font-size:110px;font-weight:800;
text-shadow:0 4px 24px rgba(0,0,0,.6);pointer-events:none}
.camera-commandes{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;
padding:24px 0 calc(18px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.7) 45%)}
.camera-teintes{display:flex;gap:12px;max-width:100%;overflow-x:auto;padding:4px 14px;scrollbar-width:none}
.camera-teinte{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;
color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.camera-teinte canvas{width:60px;height:60px;border-radius:50%;border:3px solid rgba(255,255,255,.45);background:#222;
transform:scaleX(-1)}
.camera-teinte[aria-pressed="true"] canvas{border-color:var(--accent)}
.camera-teinte{position:relative}
.camera-teinte.a-telecharger::after{content:"\2193";position:absolute;right:2px;top:40px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:13px;font-weight:800}
.camera-teinte.charge::after{content:"";position:absolute;right:2px;top:40px;width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;animation:filtre-charge .7s linear infinite}
@keyframes filtre-charge{to{transform:rotate(360deg)}}
.camera-filtre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.camera-filtre.miroir{transform:scaleX(-1)}
.camera-studio.enregistre .camera-teintes{visibility:hidden}
.camera-studio .micro{width:80px;height:80px;background:#fe2c55;color:#fff}
.camera-studio .micro svg.icone{width:42px;height:42px}
.camera-studio .micro svg.anneau{inset:-10px;width:100px;height:100px}
.camera-studio.enregistree .micro{display:none}
.camera-studio .actions-etape{position:static;max-width:none;justify-content:center;gap:12px;margin:0;padding:0 14px;background:none}
.camera-studio .actions-etape .rond:disabled{display:none}
.camera-erreur{position:absolute;left:16px;right:16px;top:40%;margin:0;padding:14px;border-radius:12px;background:rgba(0,0,0,.7);
color:#fff;text-align:center;font-weight:600}
.camera-studio .micro{margin:0;box-shadow:none}
.camera-studio .micro::before{display:none}
.camera-studio .micro.enregistre::after{width:30px;height:30px;margin:-15px;border-radius:8px}
.refilmage{position:fixed;inset:0;z-index:2100;overflow:hidden;background:#000;color:#fff;font-weight:700}
.refilmage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.refilmage video.miroir{transform:scaleX(-1)}
.refilmage video.relue{transform:none}
.refilmage-barre{position:absolute;left:8px;right:8px;top:calc(6px + env(safe-area-inset-top));height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.refilmage-barre i{display:block;width:0;height:100%;background:#fe2c55}
.refilmage-temps{position:absolute;left:50%;top:calc(20px + env(safe-area-inset-top));transform:translateX(-50%);max-width:calc(100% - 130px);padding:8px 16px;box-sizing:border-box;border-radius:999px;
background:rgba(0,0,0,.55);font-size:14px;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.refilmage.enregistre .refilmage-temps{background:#fe2c55}
.refilmage-rond{position:absolute;top:calc(16px + env(safe-area-inset-top));width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
.refilmage-rond svg{width:22px;height:22px}
.refilmage-fermer{left:10px}
.refilmage-tourner{right:10px}
.refilmage.enregistre .refilmage-tourner,.refilmage.revue .refilmage-tourner{display:none}
.refilmage-compte{position:absolute;left:0;right:0;top:32%;text-align:center;font-size:110px;font-weight:800;line-height:1;text-shadow:0 4px 24px rgba(0,0,0,.6);pointer-events:none}
.refilmage-bas{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;padding:40px 18px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.65))}
.refilmage-feu{position:relative;width:82px;height:82px;padding:0;border:5px solid #fff;border-radius:50%;background:none;cursor:pointer}
.refilmage-feu::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fe2c55;transition:inset .18s ease,border-radius .18s ease}
.refilmage.enregistre .refilmage-feu::after{inset:20px;border-radius:7px}
.refilmage-bas .rond{--verre:rgba(255,255,255,.16);--filet:rgba(255,255,255,.24);display:none}
.refilmage-garder{display:none;align-items:center;justify-content:center;gap:9px;flex:1;max-width:280px;height:58px;border:0;border-radius:999px;font:inherit;font-size:17px;font-weight:800;color:#fff;
background:linear-gradient(100deg,#25d366,#12b48e);box-shadow:0 14px 30px rgba(37,211,102,.4);cursor:pointer}
.refilmage-garder svg{width:24px;height:24px}
.refilmage.revue .refilmage-feu{display:none}
.refilmage.revue .refilmage-bas .rond{display:grid}
.refilmage.revue .refilmage-garder{display:flex}
.refilmage-colle video{opacity:.45}
.refilmage-attente{position:absolute;left:24px;right:24px;top:42%;padding:20px 18px;border-radius:20px;background:rgba(0,0,0,.72);text-align:center}
.refilmage-attente p{margin:0 0 14px;font-size:16px;line-height:1.3}
.refilmage-attente .refilmage-barre{position:static;height:8px;border-radius:4px}
.refilmage-attente .refilmage-barre i{background:linear-gradient(90deg,#ffb32c,#fe2c55);transition:width .2s linear}
.studio .dedicace{display:flex;justify-content:center}
.studio .dedicace-ecran{width:min(66vw,270px);width:min(calc(100vw - 64px),calc((100dvh - 214px)*.5625),420px);margin-bottom:0;border-radius:22px;box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px var(--filet)}
.studio-envoi{justify-content:center;flex-wrap:wrap}
.studio .avec-cadeau .dedicace-ecran{width:min(calc(100vw - 64px),calc((100dvh - 276px)*.5625),420px)}
.studio-cadeau{flex:1 0 100%;display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:52px;padding:6px 14px 6px 8px;border:0;border-radius:18px;font:inherit;text-align:left;color:#fff;background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet);cursor:pointer;transition:background .2s ease}
.studio-cadeau[hidden]{display:none}
.studio-cadeau i{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12)}
.studio-cadeau i svg{width:22px;height:22px}
.studio-cadeau span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.studio-cadeau b{font-size:15px;font-weight:800}
.studio-cadeau small{font-size:12.5px;color:rgba(255,255,255,.78)}
.studio-cadeau em{flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.studio-cadeau.offert{background:#12805f}
.studio-cadeau.offert i{background:rgba(255,255,255,.2)}
.studio-cadeau.offert em{box-shadow:none;color:#fff}
.studio-cadeau.offert em svg{display:block;width:24px;height:24px}
.studio-cauris{position:fixed;inset:0;z-index:8;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55)}
.studio-cauris>div{box-sizing:border-box;width:100%;max-width:516px;padding:20px 18px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--sur)}
.studio-cauris h3{margin:0 0 4px;font-size:19px}
.studio-cauris p{margin:0 0 14px;font-size:14px;color:rgba(255,255,255,.78)}
.studio-cauris button{display:flex;justify-content:space-between;width:100%;box-sizing:border-box;margin-top:8px;padding:14px 16px;border:0;border-radius:14px;font:inherit;font-size:16px;font-weight:700;color:#fff;background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet);cursor:pointer}
.studio-cauris .studio-cauris-fermer{justify-content:center;background:none;box-shadow:none;font-weight:600}
.studio-cadeau-parti{color:#7df0c4}
.studio-envoi .rond{width:50px;height:50px}
.studio-envoi .bouton-envoyer{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9px;flex:1;min-width:0;height:58px;border:0;border-radius:999px;font:inherit;font-size:17px;
font-weight:800;background:linear-gradient(100deg,#25d366,#12b48e);color:#fff;cursor:pointer;box-shadow:0 14px 30px rgba(37,211,102,.4);transition:transform .18s cubic-bezier(.3,1.7,.5,1)}
.studio-envoi .bouton-envoyer:active{transform:scale(.96)}
.studio-envoi .bouton-envoyer svg{width:24px;height:24px;flex:none}
.rond.studio-crayon{width:auto;height:50px;padding:0 15px;display:flex;align-items:center;gap:7px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:700}
.rond.studio-crayon svg{width:20px;height:20px}
.studio-progres{display:flex;flex-direction:column;align-items:center;gap:14px;margin:4px 0 18px}
.studio-progres .etapes-envoi{display:flex;gap:14px}
.studio-progres .etapes-envoi i{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet);color:#fff}
.studio-progres .etapes-envoi i.ici,.studio-progres .etapes-envoi i.fait{color:var(--sur);background:linear-gradient(145deg,var(--s1),var(--s2))}
.studio-progres .etapes-envoi i.ici::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px var(--s1);animation:studio-onde-ronde 1.3s ease-out infinite}
@keyframes studio-onde-ronde{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.35)}}
.studio-progres .etapes-envoi svg{width:24px;height:24px}
.studio-barre{width:min(76vw,300px);height:8px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.studio-barre i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--s1),var(--s2));transition:width .2s linear}
.etape.fini .dedicace-ecran{width:min(46vw,190px);height:auto;margin:0 auto}
.studio-fin{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
.studio-fin .studio-envoi{position:static;max-width:none;width:100%;margin:0;padding:0;background:none}
.studio-fin .bouton-envoyer{width:100%;animation:studio-appel 2.2s ease-in-out infinite}
@keyframes studio-appel{50%{box-shadow:0 14px 42px rgba(37,211,102,.7)}}
.studio-fin .bouton{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;height:52px;margin:0;border-radius:999px;border:0;font:inherit;font-size:15.5px;
font-weight:700;color:#fff;text-decoration:none;background:var(--verre);box-shadow:inset 0 0 0 1px var(--filet);cursor:pointer}
.etape .bouton svg{width:22px;height:22px;flex:none}
.bouton.grand{display:flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;width:100%;height:58px;border:0;border-radius:999px;color:var(--sur);font:inherit;font-size:17.5px;font-weight:800;
text-decoration:none;background:linear-gradient(100deg,var(--s1),var(--s2));box-shadow:0 14px 30px var(--lueur)}
.studio-message{min-height:1.4em;margin:12px 0 0;color:rgba(255,255,255,.82);text-align:center;font-size:14.5px}
.studio>.studio-message{position:fixed;left:18px;right:18px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:6;min-height:0;margin:0 auto;max-width:440px;padding:10px 14px;box-sizing:border-box;
border-radius:14px;background:rgba(0,0,0,.72);color:#fff}
.studio>.studio-message:empty{display:none}
.studio>.studio-message{pointer-events:none}
.etape.ici.avec-cadeau~.studio-message{bottom:calc(150px + env(safe-area-inset-bottom))}
.studio-connexion{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px);text-align:center}
.studio-connexion h2{margin:0;font-size:24px;font-weight:800;line-height:1.2;text-wrap:balance}
.studio-connexion h2 svg{display:block;width:124px;height:124px;margin:0 auto 24px;padding:32px;box-sizing:border-box;border-radius:50%;color:var(--sur);background:linear-gradient(145deg,var(--s1),var(--s2));box-shadow:0 18px 46px var(--lueur)}
.scene-fabrication{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
@media (max-height:690px){.micro{width:132px;height:132px;margin:30px 0 8px}.micro svg.icone{width:58px;height:58px}.visage-studio{width:76px;height:76px}.enregistreur{gap:12px}}
@media (prefers-reduced-motion:reduce){.studio *,.studio::before,.studio *::before,.studio *::after{animation:none!important}}