/* Animation de presentation (reprise de l'application: static/duxsalary_motion.html), selecteurs limites a .scene */
.scene{position:relative;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--blanc);color:var(--encre);
  container-type:inline-size;box-shadow:0 1px 0 var(--trait),0 40px 80px -40px rgba(31,78,121,.35)}
.scene .halo{position:absolute;width:70cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(79,195,247,.22),transparent 62%);
  left:55cqw;top:-25cqw;transition:left 1.1s cubic-bezier(.7,0,.2,1),top 1.1s cubic-bezier(.7,0,.2,1);pointer-events:none}
.scene[data-plan="1"] .halo{left:-10cqw;top:5cqw}
.scene[data-plan="2"] .halo{left:40cqw;top:20cqw}
.scene[data-plan="3"] .halo{left:-20cqw;top:-20cqw}
.scene[data-plan="4"] .halo{left:30cqw;top:-30cqw}
.scene .entete{position:absolute;top:3.2cqw;left:4.2cqw;right:4.2cqw;display:flex;justify-content:space-between;align-items:center;z-index:5}
.scene .logo{height:3.6cqw;display:flex;align-items:center}
.scene .logo img{height:100%;width:auto}
.scene .entete .tag{font-size:1.15cqw;color:var(--gris);font-weight:500}
.scene .plan{position:absolute;inset:0;padding:10cqw 4.2cqw 8cqw;display:grid;align-items:center;opacity:0;visibility:hidden;
  transform:translateX(3cqw);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.scene .plan.actif{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease .1s,transform .5s cubic-bezier(.2,.8,.2,1) .1s}
.scene .plan.sortie{transform:translateX(-3cqw)}
.scene .deux{grid-template-columns:.9fr 1.1fr;gap:4cqw}
.scene h1,.scene h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.02}
.scene h1{font-size:6.4cqw;max-width:13ch}
.scene h2{font-size:4.2cqw;max-width:14ch}
.scene .lead{margin:1.8cqw 0 0;font-size:1.65cqw;line-height:1.5;color:var(--gris);max-width:40ch;font-weight:400}
.scene .mot{display:inline-block;opacity:0;transform:translateY(.6em)}
.scene .actif .mot{animation:surgit .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes surgit{to{opacity:1;transform:none}}
.scene .apparait{opacity:0}
.scene .actif .apparait{animation:fondu .5s ease forwards}
@keyframes fondu{to{opacity:1}}
.scene .souligne{background:linear-gradient(var(--ciel),var(--ciel)) no-repeat 0 92%/0% .28em;transition:background-size .7s cubic-bezier(.2,.8,.2,1) .9s}
.scene .actif .souligne{background-size:100% .28em}
.scene .accroche{display:grid;grid-template-columns:1.15fr .85fr;gap:3cqw;align-items:center}
.scene .puces{display:flex;flex-direction:column;gap:1.3cqw}
.scene .puce{display:flex;align-items:center;gap:1.4cqw;background:var(--blanc);border:1.5px solid var(--trait);border-radius:1.6cqw;padding:1.5cqw 1.8cqw;
  font-size:1.5cqw;font-weight:600;opacity:0;transform:translateX(3cqw)}
.scene .actif .puce{animation:glisse .55s cubic-bezier(.2,.8,.2,1) forwards}
.scene .actif .puce:nth-child(1){animation-delay:.7s}
.scene .actif .puce:nth-child(2){animation-delay:.9s}
.scene .actif .puce:nth-child(3){animation-delay:1.1s}
@keyframes glisse{to{opacity:1;transform:none}}
.scene .puce .ico{width:3.4cqw;aspect-ratio:1;border-radius:1cqw;background:var(--voile);display:grid;place-items:center;color:var(--marine);flex:none}
.scene .puce .ico svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene .puce small{display:block;font-weight:400;color:var(--gris);font-size:1.15cqw;margin-top:.2cqw}
.scene .fenetre{position:relative;background:var(--blanc);border:1.5px solid var(--trait);border-radius:1.6cqw;overflow:hidden;
  box-shadow:0 2.5cqw 5cqw -2cqw rgba(31,78,121,.28);font-size:1.25cqw}
.scene .barre-nav{display:flex;align-items:center;gap:.6cqw;padding:1cqw 1.4cqw;border-bottom:1.5px solid var(--trait);background:var(--voile)}
.scene .barre-nav i{width:.9cqw;aspect-ratio:1;border-radius:50%;background:#D5E1EC}
.scene .barre-nav .url{margin-left:1cqw;flex:1;background:var(--blanc);border-radius:2cqw;padding:.45cqw 1.2cqw;font-size:1.05cqw;color:var(--gris)}
.scene .corps{padding:1.8cqw 2.2cqw 2.2cqw}
.scene .etapes{display:flex;gap:.8cqw;margin-bottom:1.8cqw}
.scene .etapes span{flex:1;font-size:1cqw;font-weight:600;color:var(--gris);padding-top:.8cqw;border-top:.35cqw solid var(--trait);transition:color .3s,border-color .3s}
.scene .etapes span.fait{color:var(--marine);border-color:var(--ciel)}
.scene .ecran{display:none}
.scene .ecran.vu{display:block;animation:fondu .35s ease}
.scene .grille{display:grid;grid-template-columns:1fr 1fr;gap:1.1cqw 1.4cqw}
.scene .champ label{display:block;font-size:1cqw;color:var(--gris);margin-bottom:.4cqw}
.scene .champ .valeur{height:3cqw;border-radius:.8cqw;border:1.5px solid var(--trait);display:flex;align-items:center;padding:0 1cqw;font-weight:600;
  transition:border-color .2s,box-shadow .2s;white-space:nowrap;overflow:hidden}
.scene .champ .valeur.focus{border-color:var(--ciel);box-shadow:0 0 0 .35cqw rgba(79,195,247,.18)}
.scene .champ .valeur.focus::after{content:"";width:.15cqw;height:1.5cqw;background:var(--marine);margin-left:.15cqw;animation:clignote .8s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
.scene .choix{display:flex;gap:.8cqw}
.scene .choix span{flex:1;text-align:center;padding:.8cqw 0;border:1.5px solid var(--trait);border-radius:.8cqw;font-weight:600;color:var(--gris);transition:all .2s}
.scene .choix span.on{border-color:var(--marine);background:var(--marine);color:var(--blanc)}
.scene .bouton{display:inline-flex;align-items:center;justify-content:center;margin-top:1.6cqw;background:var(--marine);color:var(--blanc);font-weight:600;
  padding:1cqw 2cqw;border-radius:5cqw;transition:transform .15s}
.scene .bouton.presse{transform:scale(.94)}
.scene .recu{text-align:center;padding:2cqw 0 1cqw}
.scene .recu .rond{width:7cqw;aspect-ratio:1;margin:0 auto 1.4cqw;border-radius:50%;background:rgba(23,160,93,.12);display:grid;place-items:center}
.scene .recu .rond svg{width:55%;stroke:var(--vert);stroke-width:3;fill:none;stroke-dasharray:40;stroke-dashoffset:40}
.scene .ecran.vu .recu .rond svg{animation:coche .5s ease .2s forwards}
@keyframes coche{to{stroke-dashoffset:0}}
.scene .recu strong{display:block;font-size:1.8cqw;color:var(--encre)}
.scene .recu p{margin:.6cqw 0 0;color:var(--gris)}
.scene .fil{margin-top:1.6cqw;display:flex;flex-direction:column;gap:.7cqw;text-align:left}
.scene .fil div{display:flex;justify-content:space-between;border:1.5px solid var(--trait);border-radius:.8cqw;padding:.8cqw 1.2cqw;opacity:0}
.scene .ecran.vu .fil div{animation:fondu .4s ease forwards}
.scene .ecran.vu .fil div:nth-child(1){animation-delay:.5s}
.scene .ecran.vu .fil div:nth-child(2){animation-delay:.8s}
.scene .ecran.vu .fil div:nth-child(3){animation-delay:1.1s}
.scene .fil b{color:var(--vert);font-weight:600}
.scene .curseur{position:absolute;width:2.2cqw;left:60%;top:70%;z-index:9;pointer-events:none;transition:left .55s cubic-bezier(.4,0,.2,1),top .55s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.25))}
.scene .curseur.clic::after{content:"";position:absolute;left:-1cqw;top:-1cqw;width:2.2cqw;aspect-ratio:1;border-radius:50%;border:2px solid var(--ciel);animation:onde .4s ease-out}
@keyframes onde{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.scene .appel{background:var(--blanc);border:1.5px solid var(--trait);border-radius:1.8cqw;padding:2.4cqw;box-shadow:0 2.5cqw 5cqw -2cqw rgba(31,78,121,.28)}
.scene .appel-tete{display:flex;align-items:center;gap:1.6cqw}
.scene .avatar{width:5.6cqw;aspect-ratio:1;border-radius:50%;background:var(--marine);color:var(--blanc);display:grid;place-items:center;font-weight:700;font-size:1.9cqw;position:relative}
.scene .avatar::before,.scene .avatar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ciel);opacity:0}
.scene .actif .avatar::before{animation:sonne 1.6s ease-out .4s infinite}
.scene .actif .avatar::after{animation:sonne 1.6s ease-out 1.2s infinite}
@keyframes sonne{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
.scene .appel-tete strong{display:block;font-size:1.7cqw}
.scene .appel-tete small{color:var(--gris);font-size:1.15cqw}
.scene .duree{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--vert);font-size:1.4cqw}
.scene .sujets{margin-top:2cqw;display:flex;flex-direction:column;gap:1cqw}
.scene .sujet{display:flex;gap:1.2cqw;align-items:flex-start;padding:1.2cqw 1.4cqw;border-radius:1.2cqw;background:var(--voile);opacity:0;transform:translateY(1.2cqw)}
.scene .actif .sujet{animation:monte .5s cubic-bezier(.2,.8,.2,1) forwards}
.scene .actif .sujet:nth-child(1){animation-delay:.9s}
.scene .actif .sujet:nth-child(2){animation-delay:1.5s}
.scene .actif .sujet:nth-child(3){animation-delay:2.1s}
@keyframes monte{to{opacity:1;transform:none}}
.scene .sujet i{flex:none;width:2.2cqw;aspect-ratio:1;border-radius:50%;background:var(--ciel);color:var(--blanc);display:grid;place-items:center;font-style:normal;font-size:1.2cqw;font-weight:700}
.scene .sujet strong{display:block;font-size:1.4cqw}
.scene .sujet span{color:var(--gris);font-size:1.15cqw}
.scene .rapide{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center}
.scene .demande{background:var(--blanc);border:1.5px solid var(--trait);border-radius:1.4cqw;padding:1.4cqw 1.6cqw;margin-bottom:1.1cqw;display:flex;justify-content:space-between;align-items:center;
  font-size:1.3cqw;opacity:0;transform:translateX(2cqw)}
.scene .actif .demande{animation:glisse .45s cubic-bezier(.2,.8,.2,1) forwards}
.scene .actif .demande:nth-child(2){animation-delay:.25s}
.scene .actif .demande:nth-child(3){animation-delay:.5s}
.scene .demande em{font-style:normal;font-size:1.05cqw;font-weight:600;padding:.4cqw .9cqw;border-radius:2cqw;background:#FFF4D6;color:#8A5A00;transition:all .3s}
.scene .demande em.ok{background:rgba(23,160,93,.12);color:var(--vert)}
.scene .chrono{font-size:13cqw;font-weight:800;letter-spacing:-.06em;line-height:.85;color:var(--marine);font-variant-numeric:tabular-nums}
.scene .chrono small{font-size:3.6cqw;letter-spacing:-.02em;color:var(--ciel);margin-left:.6cqw}
.scene .final{text-align:center;justify-items:center}
.scene .final h2{max-width:18ch;margin:0 auto}
.scene .atouts{display:flex;gap:1.2cqw;justify-content:center;margin-top:2.4cqw;flex-wrap:wrap}
.scene .atouts span{border:1.5px solid var(--trait);border-radius:5cqw;padding:.9cqw 1.8cqw;font-size:1.35cqw;font-weight:500;opacity:0;transform:scale(.9)}
.scene .actif .atouts span{animation:pop .4s cubic-bezier(.2,.8,.2,1.2) forwards}
.scene .actif .atouts span:nth-child(1){animation-delay:.5s}
.scene .actif .atouts span:nth-child(2){animation-delay:.65s}
.scene .actif .atouts span:nth-child(3){animation-delay:.8s}
.scene .actif .atouts span:nth-child(4){animation-delay:.95s}
@keyframes pop{to{opacity:1;transform:none}}
.scene .cta{margin-top:3cqw;display:inline-flex;gap:1.2cqw;align-items:center;background:var(--marine);color:var(--blanc);font-weight:600;font-size:1.8cqw;
  padding:1.5cqw 3cqw;border-radius:5cqw;text-decoration:none;box-shadow:0 1.4cqw 3cqw -1.2cqw rgba(31,78,121,.7)}
.scene .cta:focus-visible{outline:3px solid var(--ciel);outline-offset:3px}
.scene .site{margin-top:1.6cqw;color:var(--gris);font-size:1.4cqw}
.scene .chapitres{position:absolute;left:4.2cqw;right:4.2cqw;bottom:2.6cqw;display:flex;gap:1cqw;z-index:6}
.scene .chapitres button{flex:1;background:none;border:0;padding:1.1cqw 0 0;text-align:left;font:500 1.1cqw 'Sora',system-ui,sans-serif;color:var(--gris);cursor:pointer;position:relative}
.scene .chapitres button::before{content:"";position:absolute;left:0;right:0;top:0;height:.3cqw;border-radius:1cqw;background:var(--trait)}
.scene .chapitres button::after{content:"";position:absolute;left:0;top:0;height:.3cqw;border-radius:1cqw;background:var(--marine);width:0}
.scene .chapitres button.vu::after{width:100%}
.scene .chapitres button.encours{color:var(--encre);font-weight:600}
.scene .chapitres button.encours::after{animation:avance var(--d,4s) linear forwards}
.scene.pause .chapitres button.encours::after{animation-play-state:paused}
@keyframes avance{from{width:0}to{width:100%}}
.scene .chapitres button:focus-visible{outline:2px solid var(--ciel);outline-offset:4px;border-radius:4px}
@media (max-width:700px){
.scene .deux,.scene .accroche,.scene .rapide{grid-template-columns:1fr}
.scene .deux>div:first-child .lead,.scene .rapide>div:first-child{display:none}
.scene .puces{display:none}
}
@media (prefers-reduced-motion: reduce){
.scene *,.scene *::before,.scene *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

/* Adaptation au telephone (ajout du site): scene plus haute, textes agrandis, une colonne */
@media (max-width:700px){
.scene{aspect-ratio:3/4;border-radius:18px}
.scene .plan{padding:19cqw 5.5cqw 13cqw;align-content:center;gap:5cqw}
.scene h1{font-size:10.5cqw;max-width:none}
.scene h2{font-size:7.4cqw;max-width:none}
.scene .lead{font-size:4.1cqw;margin-top:3.5cqw;max-width:none}
.scene .entete{top:5cqw;left:5.5cqw;right:5.5cqw}
.scene .entete .tag{display:none}
.scene .logo{height:7.5cqw}
.scene .fenetre,.scene .rapide>div:last-child{zoom:1.85}
.scene .appel{zoom:1.6}
.scene .rapide>div:first-child{display:block}
.scene .chrono{font-size:24cqw}
.scene .chrono small{font-size:7cqw}
.scene .atouts{gap:2cqw;margin-top:5cqw}
.scene .atouts span{font-size:3.4cqw;padding:1.6cqw 3.4cqw}
.scene .cta{font-size:4.4cqw;padding:3.2cqw 6.5cqw;margin-top:6cqw}
.scene .site{font-size:3.4cqw;margin-top:3cqw}
.scene .chapitres{left:5.5cqw;right:5.5cqw;bottom:5cqw;gap:1.6cqw}
.scene .chapitres button{font-size:0;padding-top:3cqw}
.scene .chapitres button::before,.scene .chapitres button::after{height:.9cqw}
}
/* Le site fixe une hauteur de ligne plus grande: la scene garde celle de l'animation d'origine */
.scene{line-height:normal}