/* ══ SITE IMMERSIF : le vol ═══════════════════════════════════════
   Feuille propre a site-immersif.html, chargee apres la feuille du site.
   Palette DANS le vol : celle de la video, qui est celle du site : bleu nuit
   dehors (#0f1322), une seule lumiere cuivre (#e0703a sur fond sombre). Les
   cartons vivent a GAUCHE, dans le vide que chaque plan laisse (la porte et
   les mains sont a droite du centre, le ciel est en haut) ; en bas sur
   telephone, comme des sous-titres.
   Regle d'or : l'etat par defaut est l'etat final visible. Tout ce qui
   epingle, cache ou superpose n'existe que sous .vol-js, posee par le JS. */

.page-vol{--pin:#0f1322;--ardoise:#535a70;--brume:#e0703a;--ciel:#9ba4ae;--pale:#f4f5f9;
  --vol-r:1.75rem;--vol-pilule:9999px;}

/* ── Sans JavaScript, et par defaut : une photo, puis des textes ── */
.vol{position:relative;background:var(--pin);color:var(--pale);}
.vol-piste{position:relative;}
.vol-scene{position:relative;}
.vol-img{display:block;width:100%;height:auto;}
.vol-voile{display:none;}
.vol-actes{padding:clamp(2rem,5vw,3.5rem) var(--px);max-width:var(--mw);margin:0 auto;display:grid;gap:clamp(1.75rem,4vw,2.75rem);}
.vol-rail{display:none;}

/* ── Les cartons ── Une phrase enorme, centree, qui s'inscrit dans le
   paysage quand son plan arrive. Comme un carton de cinema, pas une legende. */
.vol-sur{margin:0 0 1.25rem;font-family:var(--fp);font-weight:700;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brume);}
.vol-num{color:var(--brume);}
.vol-t{margin:0;font-family:var(--fd);font-weight:700;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(2.125rem,4.4vw,4.25rem);color:#fff;text-shadow:0 2px 28px rgba(15,19,34,.6),0 1px 2px rgba(15,19,34,.5);}
.vol-num{margin:0 0 1rem;font-family:var(--fp);font-weight:700;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brume);text-shadow:0 1px 14px rgba(28,38,36,.6);}
.vol-l1{display:block;}
.vol-l2{display:block;margin:.55em 0 0;max-width:26em;font-size:.44em;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:rgba(244,245,249,.86);}
.vol-d{margin:1.25rem 0 0;font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.6;color:#fff;max-width:34rem;text-shadow:0 1px 18px rgba(28,38,36,.6);}
.vol-indice{display:flex;align-items:center;gap:.75rem;margin:2rem 0 0;font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brume);}
.vol-indice span{width:1.375rem;height:2.25rem;border-radius:var(--vol-pilule);border:1.5px solid var(--brume);position:relative;flex:0 0 auto;}
.vol-indice span::after{content:'';position:absolute;left:50%;top:.4375rem;width:.1875rem;height:.5rem;margin-left:-.09375rem;border-radius:var(--vol-pilule);background:#fff;}
/* Les mots d'un carton montent l'un apres l'autre : des mots entiers, jamais des lettres. */
.vol-js .vol-acte .m{display:inline-block;opacity:0;transform:translate3d(0,.4em,0);
  transition:opacity .55s var(--e-out),transform .8s var(--e-out);transition-delay:var(--i,0s);}
.vol-js .vol-acte.on .m{opacity:1;transform:none;}

/* ── Avec JavaScript : la scene s'epingle, les cartons se superposent ── */
.vol-js .vol-piste{height:calc(100svh * var(--vol-ecrans,4));}
.vol-js .vol-scene{position:sticky;top:0;height:100svh;overflow:clip;}
.vol-js .vol-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%;}
/* Le canevas, cree par le JS, couvre l'image et ne se vide jamais entre deux images. */
.vol-js .vol-toile{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* Le voile : oblique, dense a gauche sous les cartons, nul a droite sur la
   matiere. Pire cas calcule sur du blanc pur : a gauche .6 -> composite
   (105,108,118), 4,9:1 pour du blanc ; les cartons font plus de 36 px en
   gras (3:1 exige), et le halo de texte fait le reste. */
.vol-js .vol-voile{display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,19,34,.6) 0%,rgba(15,19,34,.3) 36%,rgba(15,19,34,0) 58%);}
.vol-js .vol-actes{position:absolute;inset:0;display:block;padding:0;max-width:none;opacity:calc(1 - var(--brume,0));}
.vol-js .vol-acte{position:absolute;left:max(var(--px),calc((100vw - var(--mw)) / 2 + var(--px)));top:50%;
  width:min(38vw,32rem);text-align:left;opacity:0;visibility:hidden;transform:translateY(calc(-50% + 1.25rem));
  transition:opacity .6s var(--e-out),transform 1.1s var(--e-out),visibility 0s .6s;}
.vol-js .vol-acte.on{opacity:1;visibility:visible;transform:translateY(-50%);transition-delay:0s;}
/* Le carton du toit monte dans le ciel : en bas, c'est la matiere. */
@media (min-width:900px){.vol-js .vol-acte--haut{top:30%;}}
/* La brume devient la page : un voile couleur papier que le JS ouvre sur les
   derniers pourcents du vol. Sans JS, il n'existe pas. */
.vol-brume{display:none;}
.vol-js .vol-brume{display:block;position:absolute;inset:0;pointer-events:none;background:var(--paper);opacity:var(--brume,0);}
.vol-js.vol-pret .vol-indice span::after{animation:vol-indice 1.8s ease-in-out infinite;}
@keyframes vol-indice{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(.75rem);opacity:.2}}

/* Le rail : cinq points, un par carton, a droite. Un etat qui se voit. */
.vol-js .vol-rail{display:flex;flex-direction:column;gap:.625rem;position:absolute;right:clamp(1rem,2.5vw,2rem);top:50%;
  transform:translateY(-50%);margin:0;padding:0;list-style:none;}
.vol-rail li{width:.4375rem;height:.4375rem;border-radius:50%;background:rgba(221,227,232,.32);transition:background .4s,transform .4s;}
.vol-rail li.on{background:#fff;transform:scale(1.35);}
.vol-rail li.fait{background:rgba(221,227,232,.7);}

@media (max-width:899.98px){
  .vol-js .vol-piste{--vol-ecrans:3.5;}
  .vol-js .vol-acte{left:var(--px);right:var(--px);top:auto;bottom:calc(var(--dock-h,3.75rem) + 1.5rem + env(safe-area-inset-bottom));width:auto;transform:translateY(1rem);}
  .vol-js .vol-acte.on{transform:none;}
  .vol-js .vol-voile{background:linear-gradient(to top,rgba(15,19,34,.84) 0%,rgba(15,19,34,.5) 30%,rgba(15,19,34,0) 55%);}
  .vol-js .vol-rail{right:.75rem;}
}
@media (prefers-reduced-motion:reduce){
  .vol-js .vol-acte,.vol-js .vol-acte .m{transition:none;}
  .vol-js.vol-pret .vol-indice span::after{animation:none;}
}

/* ── La page blanche : le logo en grand, le resume, l'option ─────────
   Papier nu, tout centre, le logo enorme : c'est le retour chez KINONE
   apres le monde du vol. Une liste a filets pour les metiers, pas de cartes. */
.bilan{background:var(--paper);color:var(--txt);text-align:center;
  padding:clamp(4.5rem,11vh,8rem) 0 clamp(3.5rem,8vh,6rem);}
.bilan .wrap{max-width:60rem;}
.bilan-logo{display:block;width:min(34rem,74vw);height:auto;margin:0 auto clamp(2.25rem,5vh,3.5rem);}
.bilan .sidx{display:block;margin-bottom:.875rem;}
.bilan-t{margin:0 auto;font-family:var(--fd);font-weight:700;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(2rem,4.6vw,3.75rem);max-width:22ch;}
.bilan-d{margin:1.25rem auto 0;max-width:44rem;font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.65;color:var(--body);}
.bilan-liste{list-style:none;margin:clamp(2.5rem,5vh,3.5rem) auto 0;padding:0;max-width:50rem;text-align:left;
  border-top:1px solid var(--line2);}
.bilan-liste li{display:grid;gap:.375rem 2rem;padding:1.125rem 0;border-bottom:1px solid var(--line2);}
@media (min-width:720px){.bilan-liste li{grid-template-columns:11rem minmax(0,1fr);align-items:baseline;}}
.bilan-liste b{font-family:var(--fd);font-weight:700;font-size:1.125rem;letter-spacing:-.01em;color:var(--txt);}
.bilan-liste li:last-child b{color:var(--copper-txt);}
.bilan-liste span{color:var(--body);font-size:1.0313rem;line-height:1.65;}
.bilan-prix{margin:clamp(2.5rem,5vh,3.5rem) auto 0;max-width:46rem;}
.bilan-prix-e{margin:0 0 .75rem;font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-txt);}
.bilan-prix-v{margin:0;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.5;color:var(--body);}
.bilan-prix-v b{font-family:var(--fd);font-weight:700;color:var(--txt);font-size:1.15em;}
.bilan-prix-v sup{font-size:.6em;font-weight:600;}
.bilan-prix-d{margin:1rem auto 0;color:var(--dim);font-size:1rem;line-height:1.65;}
.bilan .hctas{justify-content:center;margin-top:1.75rem;}
.bilan-fin{margin:clamp(2.5rem,5vh,3.5rem) auto 0;color:var(--dim);font-size:.9375rem;line-height:1.65;max-width:44rem;}
.bilan-fin a{color:var(--copper-txt);font-weight:650;box-shadow:inset 0 -1px 0 rgba(181,77,27,.42);transition:box-shadow .3s,color .3s;}
.bilan-fin a:hover{color:var(--txt);box-shadow:inset 0 -2px 0 var(--copper);}

/* ── Sous le vol : KINONE, en papier, trois reponses a filets ── */
/* La section qui suit est celle dans laquelle la brume debouche : meme papier,
   pas de rupture. */
.dev-sec{background:var(--paper);}
.dev{display:grid;gap:clamp(1.75rem,3.5vw,2.5rem);margin-top:clamp(2rem,4vw,3rem);}
@media (min-width:900px){
  .dev{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .dev-c{padding-right:clamp(1.5rem,3vw,2.75rem);}
  .dev-c+.dev-c{padding-left:clamp(1.5rem,3vw,2.75rem);border-left:1px solid var(--line2);}
  .dev-c:last-child{padding-right:0;}
}
.dev-e{font-family:var(--fp);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-txt);margin:0 0 .625rem;}
.dev-t{font-family:var(--fd);font-size:clamp(1.375rem,2.1vw,1.625rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--txt);margin:0 0 .75rem;}
.dev-d{color:var(--body);font-size:1.0313rem;line-height:1.72;margin:0;}
.dev-fin{margin-top:clamp(2rem,4vw,2.75rem);color:var(--dim);font-size:1.0313rem;line-height:1.7;max-width:52rem;}
.dev-fin a{color:var(--copper-txt);font-weight:650;box-shadow:inset 0 -1px 0 rgba(181,77,27,.42);transition:box-shadow .3s,color .3s;}
.dev-fin a:hover{color:var(--txt);box-shadow:inset 0 -2px 0 var(--copper);}