/* VoiceMochi · accueil animé : aplats noirs et violets, gros blocs carrés, onde. Chargé seulement sur l'accueil. */
body{background:#000;color:#f5f5f7}
body .nav{background:rgba(0,0,0,.72);border-bottom-color:#ffffff1a;color:#f5f5f7}
body .nav-g a{color:#c7c7cc}body .nav-g a:hover{color:#fff}
body .lien-connexion{color:#f5f5f7}body .lien-connexion:hover{color:#B4A8FF}
body .langue{color:#a1a1a6}body .langue [aria-current]{color:#fff}
body .btn-contour{color:#fff;box-shadow:inset 0 0 0 1px #B4A8FF}
body .menu-btn:hover{background:#ffffff1a}
@media(max-width:960px){body .nav .links{background:#0b0a12;border-bottom-color:#ffffff1a}body .nav-g a{color:#f5f5f7;border-bottom-color:#ffffff1a}}
body footer{background:#000;border-top-color:#ffffff1a;color:#a1a1a6}
body .fbrand p,body .fcols h4{color:#f5f5f7}body .fcols a{color:#a1a1a6}body .fcols a:hover{color:#fff}body .fbot{border-top-color:#ffffff1a}

.an section{position:relative;overflow:hidden}
.an .w{position:relative;z-index:2}
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.rev.vu{opacity:1;transform:none}

/* aplats */
.an .sec{padding-block:clamp(70px,9vw,130px)}
.an .sec h2{font-size:clamp(30px,4.4vw,66px);line-height:1.05;letter-spacing:-.028em;max-width:16em}
.an .sec.dark{background:#000}.an .sec.dark h2 span,.an .sec.fonce h2 span{color:#B4A8FF}
.an .sec.fonce{background:#17113A;color:#f5f5f7}.an .sec.fonce .lead{color:#c9c4e6}
.an .sec.violet{background:#6E5CD6;color:#fff}.an .sec.violet h2 span{color:#17113A}
.an .sec.violet .lead,.an .sec.violet .note2{color:#fff}.an .lg10{color:#fff;opacity:.82;border-top:0;padding-top:0;margin-top:10px;font-size:14px}
.onde{display:block;position:relative;z-index:3;width:100%;height:clamp(70px,9vw,130px);margin-bottom:-1px;background:transparent}
#traduction,#calcul,.final{margin-top:0}
canvas.onde{margin-top:calc(-1 * clamp(70px,9vw,130px))}

/* héros */
.an .hero{background:#000;padding-block:clamp(36px,5vw,72px) 0;text-align:center}
.an .hero h1{font-size:clamp(44px,6.6vw,112px);line-height:.98;letter-spacing:-.04em;max-width:11em;font-weight:650}
.an .hero h1 .gr{color:#B4A8FF}
.an .hero .sub{color:#c7c7cc}
.an .link{color:#fff;text-decoration-color:#B4A8FF}
.scene{position:relative;z-index:2;height:clamp(300px,34vw,500px);margin:clamp(14px,2vw,28px) calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0}
#ligne{position:absolute;inset:0;width:100%;height:100%}
.an .heroimg{position:absolute;left:50%;top:50%;width:clamp(210px,26vw,400px);margin:0;transform:translate(-50%,-50%);transition:none;will-change:transform;-webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent);mask-image:radial-gradient(closest-side,#000 76%,transparent)}
.dict{position:absolute;left:calc(50% + clamp(120px,14vw,220px));right:clamp(16px,4vw,56px);top:14%;height:3.6em;overflow:hidden;text-align:left;font-size:clamp(18px,2.1vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.dict i{display:inline-block;width:3px;height:.95em;background:#B4A8FF;margin-left:3px;vertical-align:-.1em;animation:cu 1s steps(2) infinite}
@keyframes cu{50%{opacity:0}}

/* barres */
.barres{display:flex;gap:3px;align-items:center;justify-content:center;height:44px;overflow:hidden;margin:24px auto 0;max-width:420px}
.barres u{display:block;flex:1 1 0;max-width:3px;height:100%;border-radius:2px;background:#B4A8FF;transform:scaleY(.1);transition:transform .1s linear}
.violet .barres u{background:#fff}
#bar-tr{margin:6px auto 18px;height:32px}

/* démo */
.an .stb button{background:#17113A;color:#c9c4e6}.an .stb button small{color:#a79fd4}
.an .stb button[aria-pressed=true]{background:#6E5CD6;color:#fff}.an .stb button[aria-pressed=true] small{color:#fff}
.an .sst li{color:#a1a1a6}.an .sst li.on{background:#6E5CD6;color:#fff}.an .sst li.on span{color:#fff}
.an .swin{box-shadow:0 30px 80px #0009}
.an .replay{color:#fff}

/* traduction */
.an .hello{font-size:clamp(30px,4.2vw,62px);color:#fff;min-height:1.2em;letter-spacing:-.025em;margin:26px 0 8px}
.an .hello.tape::after{content:"";display:inline-block;width:.05em;height:.8em;margin-left:.05em;background:#fff;vertical-align:-.04em}

/* fonctions : gros carrés pleins */
.tuiles{grid-template-columns:repeat(3,1fr);gap:0;max-width:none;margin-top:clamp(36px,5vw,64px)}
.tuiles>div{aspect-ratio:1/.82;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding:clamp(18px,2.4vw,34px);opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1),filter .25s}
.tuiles>div.vu{opacity:1;transform:none}.tuiles>div:hover{filter:brightness(1.12)}
.tuiles>div:nth-child(2){transition-delay:.08s}.tuiles>div:nth-child(3){transition-delay:.16s}.tuiles>div:nth-child(4){transition-delay:.08s}.tuiles>div:nth-child(5){transition-delay:.16s}.tuiles>div:nth-child(6){transition-delay:.24s}
.tuiles>div:nth-child(1),.tuiles>div:nth-child(5){background:#6E5CD6}.tuiles>div:nth-child(2),.tuiles>div:nth-child(6){background:#17113A}.tuiles>div:nth-child(3){background:#B4A8FF;color:#17113A}.tuiles>div:nth-child(4){background:#1c1c1e}
.an .fg h3{font-size:clamp(22px,2.8vw,42px);line-height:1.05;letter-spacing:-.02em}
.an .fg p{color:inherit;opacity:.9;font-size:clamp(14px,1.3vw,18px);margin-top:8px}
.tuiles>div:nth-child(3) p{opacity:1}

/* pour qui */
.an .ptabs button{background:#ffffff14;color:#f5f5f7}.an .ptabs button[aria-pressed=true]{background:#6E5CD6;color:#fff}
.an .ppanel{background:#ffffff0f;border-radius:20px;box-shadow:inset 0 0 0 1px #ffffff1f}
.an .pl h3{color:#fff;font-size:clamp(22px,2.2vw,28px)}.an .pl p{color:#c9c4e6}
.an .pr{border-radius:14px;background:#00000040}.an .pr small,.an .pr p{color:#c9c4e6}.an .pr .res{color:#fff}

/* calcul */
.an #cTitle{font-variant-numeric:tabular-nums}
.an .sl label,.an .sl label b{color:#fff}
.an .sl input{-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:#ffffff66;outline-offset:6px}
.an .sl input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0005}
.an .sl input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
.an .cg span{color:#fff}.an .cg b{color:#fff;font-size:clamp(30px,4vw,54px)}.an .cg div{border-left-color:#ffffff59}

/* confidentialité */
.an .c3 p{color:#a1a1a6}.an .c3 h3{color:#B4A8FF}
.an .c3 h3{font-size:clamp(24px,2.6vw,36px);letter-spacing:-.02em;line-height:1.06}

/* faq */
.an .faq details{border-bottom-color:#ffffff2e}.an .faq summary::after{color:#B4A8FF}.an .faq p{color:#c9c4e6}
.an #faq h2{color:#fff}.an kbd{background:#2c2c2e;color:#f5f5f7;border-color:#48484a}

/* fin */
.an .final{padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(380px,38vw,560px)}
.fin-noir{background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fin-noir img{width:min(62%,420px);-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent);mask-image:radial-gradient(closest-side,#000 78%,transparent);animation:flotte 5s ease-in-out infinite}
.fin-txt{align-self:center;padding:40px clamp(20px,5vw,72px);text-align:left}
.an .final h2{font-size:clamp(34px,4.8vw,72px);margin:0 0 22px;text-align:left}
.an .final .ctas{justify-content:flex-start}
.an .btn{background:#6E5CD6}.an .sec.violet .btn{background:#000}

.an #demo .lead{color:#f5f5f7}
/* téléphone */
@media(max-width:700px){
 .scene{height:auto;padding-bottom:26px}
 #ligne{height:190px;bottom:auto}
 .an .heroimg{position:relative;left:auto;top:auto;display:block;margin:0 auto;width:210px;transform:none!important}
 .dict{position:static;margin:6px auto 0;padding:0 16px;text-align:center;height:3.6em;font-size:19px}
 .tuiles{grid-template-columns:1fr 1fr}.tuiles>div{aspect-ratio:1/1;padding:16px}
 .an .final{grid-template-columns:1fr}.fin-noir{padding:26px 0}.fin-noir img{width:190px}
 .fin-txt{text-align:center;padding:34px 16px 44px}.an .final h2{text-align:center}.an .final .ctas{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.rev,.tuiles>div{opacity:1;transform:none}.dict i{display:none}}

/* page Télécharger : une seule idée, façon Apple */
.dl-h{background:#000;text-align:center;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(120px,15vw,240px)}
.dl-h h1{font-size:clamp(38px,5.4vw,80px);line-height:1.04;letter-spacing:-.032em;font-weight:650}
.dl-scene{position:relative;height:clamp(150px,14vw,210px);margin:clamp(14px,2vw,26px) calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
.dl-scene canvas{position:absolute;inset:0;width:100%;height:100%}
.dl-scene img{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);-webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent);mask-image:radial-gradient(closest-side,#000 76%,transparent)}
.dl-sous{margin:12px auto 0;font-size:clamp(17px,1.7vw,22px);color:#c7c7cc}
.dl-os{display:grid;grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;gap:16px 20px}
.btn.gros{display:flex;width:100%;height:56px;padding:0 20px;font-size:18px;box-sizing:border-box;white-space:nowrap}
.btn.gros.off{background:#17113A;color:#f5f5f7;cursor:default;box-shadow:inset 0 0 0 1px #b4a8ff66}.btn.gros.off:hover{opacity:1}
.ligne2{margin:12px 0 0;font-size:16px;font-weight:500;color:#f5f5f7;min-height:1.5em}.ligne2 a{color:#B4A8FF;white-space:nowrap}.ligne2 a:hover{text-decoration:underline;text-underline-offset:3px}
.ligne1{margin:4px 0 0;font-size:14px;color:#a1a1a6}
.cap-sel{position:relative;z-index:2;display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.cap-sel button{padding:8px 20px;border-radius:980px;font-size:15px;color:#f5f5f7;background:#ffffff14}.cap-sel button[aria-pressed=true]{background:#6E5CD6;color:#fff}
.dl-tel{margin:0 auto 18px;max-width:28em;font-size:18px;font-weight:500;color:#fff}
.dl-cap{background:linear-gradient(#000 0,#000 clamp(90px,12vw,190px),#6E5CD6 clamp(90px,12vw,190px));margin-top:calc(-1 * clamp(90px,12vw,190px));padding-bottom:clamp(44px,6vw,90px)}
.dl-cap img{display:block;width:100%;max-width:1120px;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;margin:auto;background:#000;border-radius:14px;box-shadow:0 30px 80px #0007}
.dl-fin{background:#000;text-align:center;padding-block:clamp(44px,5vw,72px)}
#etapes{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid #ffffff26;text-align:left}
#etapes li{padding:24px 24px 0 0;margin-top:-2px;border-top:2px solid transparent;color:#a1a1a6;font-size:clamp(17px,1.5vw,20px);font-weight:500;line-height:1.3;transition:border-color .4s,color .4s}
#etapes li.on{border-top-color:#B4A8FF;color:#f5f5f7}
#etapes span{display:block;font-size:clamp(44px,5vw,72px);font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:12px;color:#3a3a3c;transition:color .4s}
#etapes li.on span{color:#B4A8FF}
.dl-touche{margin:22px 0 0;font-size:15px;color:#a1a1a6}
@media(max-width:760px){#etapes{grid-template-columns:1fr;border-top:0}#etapes li{padding:18px 0;margin:0;border-top:2px solid #ffffff26}}
@media(max-width:700px){.dl-os{grid-template-columns:minmax(0,320px)}}
/* connexion, inscription, Mon compte : ids et classes lus par compte.js, seul l'habillage change */
body{color-scheme:dark}
body main{background:#000}
body h1,body h2{color:#fff}
body .page-tete p{color:#c7c7cc}
body .champ label{color:#f5f5f7}
body .champ input{background:#1c1c1e;border-color:#48484a;color:#fff}
body .champ input::placeholder{color:#98989d}
body .champ input:focus{border-color:#B4A8FF;box-shadow:0 0 0 3px #b4a8ff33}
body .lien,body .btn-lien,body .champ-mdp .btn-lien,body .alink,body .licence-retirer{color:#B4A8FF;text-decoration-color:#b4a8ff80}
body .aide,body .chargement{color:#a1a1a6}
body .case{color:#e5e5ea}
body .message-erreur{background:#2a1416;color:#ff9c94;box-shadow:inset 0 0 0 1px #ff6961}
body .message-ok{background:#17113A;color:#f5f5f7;box-shadow:inset 0 0 0 1px #B4A8FF}
body .encart strong{color:#fff}
.page-auth .encart{background:none;padding:0;border-radius:0;margin-bottom:0}
.page-auth .encart p{color:#c7c7cc}.page-auth .encart h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em}
.page-auth .page-tete h1{font-size:clamp(34px,4vw,56px);letter-spacing:-.03em}
.page-auth{min-height:calc(100vh - 53px)}
.auth-visuel{order:2;padding:0;align-items:stretch;justify-content:stretch;background:#000;display:flex;flex-direction:column}
.auth-scene{position:relative;flex:1;min-height:280px;display:flex;align-items:center;justify-content:center}
.auth-scene canvas{position:absolute;inset:0;width:100%;height:100%}
.auth-visuel .auth-scene img{position:relative;width:min(300px,52%);animation:flotte 5s ease-in-out infinite}
.auth-visuel>p{margin:0;background:#6E5CD6;color:#fff;padding:clamp(28px,4vw,52px) clamp(20px,4vw,56px);text-align:left;font-size:clamp(28px,3vw,44px)}
.auth-visuel>p span{color:#17113A}
@media(max-width:860px){.auth-visuel{order:0}.auth-scene{min-height:150px;flex:none;height:150px}.auth-visuel .auth-scene img{width:130px}.auth-visuel>p{display:none}.page-auth{min-height:0}}
/* Mon compte */
body[data-page=compte] .encart{background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff1f}
body[data-page=compte] .acc-tete p,body[data-page=compte] .licences-compte,body[data-page=compte] .licence-texte small,body[data-page=compte] .ligne-info span:first-child,body[data-page=compte] .cle-libelle{color:#a1a1a6}
body[data-page=compte] .ligne-info,body[data-page=compte] .licence,body[data-page=compte] .famille-app,body[data-page=compte] .cle-licence{border-top-color:#ffffff1f}
body[data-page=compte] .amenu a{color:#c7c7cc}body[data-page=compte] .amenu a:hover{background:#ffffff14}
@media(max-width:860px){body[data-page=compte] .amenu a{background:#ffffff14}}

/* tout le site dans le noir (Nico, 31/10/2026) */
body{--bg:#000;--wh:#0e0e10;--ink:#f5f5f7;--mu:#a1a1a6;--li:#ffffff2e;--li2:#ffffff1f;color-scheme:dark}
.btn-commu{margin-top:18px;height:46px;padding:0 20px;font-size:15px;gap:10px}.btn-commu svg{width:20px;height:20px;fill:currentColor}
.lien,.link,.back,.alink{color:#B4A8FF;text-decoration-color:#b4a8ff80}
.legal p,.legal li{color:#d1d1d6}.legal a,.article-corps a{color:#B4A8FF;text-decoration-color:#b4a8ff80}
.legal .sommaire,.legal .important,.page .bloc{background:#ffffff0f}
.article-corps{color:#d1d1d6}
.tableau{background:#ffffff0a}.tableau thead th{background:#17113A}.tableau tbody th{background:#121214}
.article-corps pre{background:#17113A}
.encart-app{box-shadow:inset 0 0 0 1px #ffffff1f}.encart-app .btn{background:#6E5CD6;color:#fff}.encart-app .lien{color:#B4A8FF}
.carte,.blog-une{background:#ffffff0f}.carte:hover h2,.blog-une:hover h2{color:#B4A8FF}.blog-une .surtitre{color:#B4A8FF}
.carte:hover{box-shadow:0 14px 36px #0009}
.introuvable .link{color:#B4A8FF}
.btn-contour{color:#fff;box-shadow:inset 0 0 0 1px #B4A8FF}
.famille a{color:#f5f5f7;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b4a8ff80}.famille a:hover,.famille a:focus-visible{color:#B4A8FF;text-decoration-color:#B4A8FF}.famille a:focus-visible{outline:2px solid #B4A8FF;outline-offset:3px;border-radius:2px}
/* liste du blog : fond clair, cartes blanches */
.blog-clair{background:#F5F5F7;color:#1d1d1f;padding-bottom:clamp(56px,7vw,96px)}
.blog-grille{padding-top:clamp(28px,4vw,48px)}
.blog-clair .blog-une,.blog-clair .carte{background:#fff;color:#1d1d1f;box-shadow:0 1px 3px #0000000f;transition:transform .2s,box-shadow .2s}
.blog-clair .blog-une:hover,.blog-clair .carte:hover{transform:translateY(-4px);box-shadow:0 16px 36px #0000001f}
.blog-clair .blog-une:focus-visible,.blog-clair .carte:focus-visible{outline:2px solid #6E5CD6;outline-offset:3px}
.blog-clair .blog-une{align-items:stretch;gap:0;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.blog-clair .blog-une img{height:100%;aspect-ratio:auto;min-height:100%;object-fit:contain;background:#000}
.blog-clair h2{color:#1d1d1f}
.blog-clair .blog-une .txt{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.blog-clair .surtitre{color:#6E5CD6}
.blog-clair .blog-une p.res{color:#6e6e73;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-clair .blog-une .article-meta{margin:14px 0 0}
.blog-clair .carte .res,.blog-clair .article-meta{color:#6e6e73}
.blog-clair .blog-liste{gap:32px 28px}
.blog-clair .carte:hover h2,.blog-clair .blog-une:hover h2{color:#6E5CD6}
.blog-clair .lien{color:#6E5CD6;text-decoration-color:#6e5cd680}
@media(max-width:700px){.blog-clair .blog-une{grid-template-columns:1fr}.blog-clair .blog-une img{height:auto;min-height:0;aspect-ratio:1200/630}}
.pagi{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:clamp(36px,4vw,52px)}
.pagi a,.pagi span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border-radius:12px;font-size:16px;font-weight:500;color:#1d1d1f}
.pagi a{background:#fff;box-shadow:0 1px 3px #0000000f;transition:color .15s,box-shadow .15s}.pagi a:hover{color:#6E5CD6;box-shadow:0 6px 16px #0000001a}
.pagi a:focus-visible{outline:2px solid #6E5CD6;outline-offset:2px}
.pagi .on{background:#6E5CD6;color:#fff}.pagi .pts{min-width:22px;color:#6e6e73}.pagi .fl{padding:0 16px}
.blog-clair .blog-rss{text-align:center;margin-top:22px}
/* Page Contact (31/10/2026) */
.champ textarea,.champ select{width:100%;font:inherit;font-size:16px;box-sizing:border-box;border:1px solid #48484a;border-radius:10px;padding:11px 14px;outline:0;background:#1c1c1e;color:#fff}
.champ textarea{resize:vertical;min-height:104px}
.champ textarea::placeholder{color:#98989d}
.champ textarea:focus,.champ select:focus{border-color:#B4A8FF;box-shadow:0 0 0 3px #b4a8ff33}
.champ-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.page-contact{min-height:calc(100vh - 53px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px}
.page-contact .wrap{width:100%;max-width:560px;padding:0;margin:0}
.page-contact .page-tete{text-align:center;padding:0;margin:0 0 20px}
.page-contact .page-tete h1{font-size:clamp(32px,3.4vw,44px);margin:0 0 6px}
.page-contact .page-tete p{margin:0}
.contact-mochi{width:84px;height:84px;margin:0 0 8px;object-fit:contain;display:block}
.contact-ligne{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.page-contact .encart{background:none;padding:0;margin:0;border-radius:0}
.page-contact .champ{margin-bottom:12px}
.page-contact .aide{text-align:center;margin-top:10px}
@media(max-width:560px){.contact-ligne{grid-template-columns:1fr;gap:0}}
@media(max-height:720px){.contact-mochi{display:none}.page-contact .champ textarea{min-height:76px}}
/* Connexion et inscription : tout sur un seul écran, formulaire et Mochi centrés (31/10/2026) */
@media(min-width:861px){
.page-auth{min-height:calc(100vh - 53px);align-items:stretch}
.page-auth>.wrap{padding-block:20px;align-self:center}
.page-auth .page-tete{margin-bottom:20px}
.page-auth .page-tete h1{font-size:clamp(32px,3.2vw,44px);margin-bottom:6px}
.page-auth .champ{margin-bottom:12px}
.page-auth .case{margin-bottom:10px}
.page-auth .aide{margin-top:10px}
.auth-scene{min-height:0}
.auth-visuel>p{padding:22px clamp(20px,4vw,56px);font-size:clamp(24px,2.2vw,32px)}
}
/* Premier écran : formulaire et Mochi centrés entre le menu et le pied de page (31/10/2026) */
@media(min-width:861px){
.auth-visuel{justify-content:center;align-items:stretch}
.auth-scene{flex:none;height:min(52vh,420px)}
.auth-visuel>p{background:none;color:#f5f5f7;text-align:center;padding:0 24px}
.auth-visuel>p span{color:#B4A8FF}
}