/* ============================================================
   /demonstration — la page du film
   L'experience filmee devient une partie du site (demande de Kemy,
   21/09/2026). Elle garde sa matiere (noir, aluminium, verre) et se
   termine par un panneau qui renvoie vers le site, a la place du
   long contenu qui la suivait sur l'ancienne page d'accueil.
   ============================================================ */

.chrome__nav{display:flex; align-items:center; gap:clamp(14px,1.8vw,30px)}
.chrome__link{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2);
  transition:color var(--t-fast) var(--ease);
}
.chrome__link:hover{color:var(--fg)}
.chrome__retour{display:inline-flex; align-items:center; gap:10px}
/* l appel a l action de la page : orange mat, texte noir (6,4:1) */
/* la touche allumee : coeur presque blanc, bord ambre, halo. Texte noir (11:1). */
.chip,.fin .btn:not(.btn--ghost){
  background:linear-gradient(180deg,#FFE9C7 0%,#FFCB85 42%,#FFB55C 100%); border-color:rgba(255,146,51,.7); color:#0B0C0E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 16px rgba(255,152,58,.55),0 10px 30px -8px rgba(255,152,58,.7)}
.chip:hover,.fin .btn:not(.btn--ghost):hover{background:linear-gradient(180deg,#FFF1DC 0%,#FFD49A 42%,#FFBE6E 100%); border-color:rgba(255,146,51,.8)}
/* la rampe de lumiere au-dessus du panneau de fin */
.fin__dedans::before{content:""; display:block; height:3px; border-radius:3px; margin-bottom:clamp(40px,6vh,64px);
  background:linear-gradient(90deg,rgba(255,152,58,0),#FFB55C 12%,#FFE9C7 50%,#FFB55C 88%,rgba(255,152,58,0));
  box-shadow:0 0 12px rgba(255,152,58,.9),0 0 40px rgba(255,152,58,.5)}
.chrome__retour::before{content:""; width:14px; height:1px; background:currentColor}

body.stage-off .stage,
body.stage-off .chrome--bottom{opacity:0; visibility:hidden; transition:opacity .35s var(--ease)}
body.suite-visible .chrome--bottom{opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s .3s}
body.stage-off .grade{opacity:0}
body.stage-off .chrome--top{
  background:rgba(8,9,10,.84);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

/* ---------- le panneau de fin ----------
   Il remonte par-dessus le film pendant que celui-ci s'eteint (95 a 99 %
   du defilement) : aucun ecran noir vide entre les deux. */
.fin{
  position:relative; z-index:20; margin-top:-40vh;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(110px,16vh,180px) var(--gut) 40px;
  background:linear-gradient(180deg, rgba(8,9,10,0) 0%, rgba(8,9,10,.92) 14%, var(--ink-900) 30%);
}
.fin__dedans{max-width:1180px; width:100%; margin:0 auto}
.fin__titre{
  font-weight:700; font-size:clamp(30px,4.6vw,66px); line-height:1.04; letter-spacing:-.02em;
  max-width:18ch; margin-top:18px;
}
.fin__texte{
  margin-top:24px; max-width:56ch; color:var(--fg-2);
  font-size:clamp(15px,1.3vw,19px); line-height:1.7;
}
.fin__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:40px}
.fin__liste{
  margin-top:clamp(56px,9vh,110px); display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.fin__liste li{padding:26px 28px 26px 0; border-right:1px solid var(--line)}
.fin__liste li + li{padding-left:28px}
.fin__liste li:last-child{border-right:0}
.fin__liste b{display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3); margin-bottom:10px}
.fin__liste a{font-size:clamp(17px,1.5vw,22px); font-weight:700; line-height:1.3; color:var(--fg);
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1px; transition:background-size .25s var(--ease)}
.fin__liste a:hover{background-size:100% 1px}
.fin__liste p{margin-top:8px; color:var(--fg-2); font-size:14px; line-height:1.6}

.fin__pied{
  margin:clamp(56px,9vh,100px) auto 0; max-width:1180px; width:100%;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-top:22px; border-top:1px solid var(--line);
  font-size:12px; color:var(--fg-3);
}
.fin__pied nav{display:flex; gap:20px; flex-wrap:wrap}
.fin__pied a{text-decoration:underline; text-underline-offset:3px}
.fin__pied a:hover{color:var(--fg)}

@media (max-width:1080px){
  .chrome__link{display:none}
}
@media (max-width:760px){
  .fin__liste{grid-template-columns:1fr}
  .fin__liste li, .fin__liste li + li{padding:20px 0; border-right:0; border-bottom:1px solid var(--line)}
  .fin__actions .btn{flex:1 1 100%; justify-content:center}
}

/* ---------- OTTO parle, version nuit ----------
   Le meme hublot que sur le site (site.css), pose sur le noir de la coursive. */
.fin__otto{display:grid;grid-template-columns:.55fr 1.45fr;gap:5vw;align-items:center;margin-top:clamp(56px,9vh,110px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.otto__hublot{position:relative;width:min(100%,15rem);aspect-ratio:1/1;margin:0 auto;border-radius:27%;background:#030405;
  box-shadow:0 0 0 6px #17181B,0 0 0 7px rgba(255,255,255,.14),0 0 0 10px var(--tech),0 0 0 13px #FFE9C7,0 0 0 15px var(--tech),
    0 0 calc(14px + var(--niveau,0) * 40px) calc(14px + var(--niveau,0) * 18px) rgba(255,152,58,calc(.35 + var(--niveau,0) * .5))}
.otto__hublot i{position:absolute;left:50%;top:50%;width:38%;height:38%;border-radius:50%;transform:translate(-50%,-50%) scale(calc(1 + var(--niveau,0) * .55));
  background:radial-gradient(circle,#FFF4E0 0%,#FFE9C7 30%,var(--tech) 62%,rgba(255,146,51,0) 72%);
  box-shadow:0 0 30px 6px rgba(255,152,58,.7);transition:transform .08s linear;animation:otto-respire 4s ease-in-out infinite}
.otto__hublot b{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 26%)}
@keyframes otto-respire{0%,100%{opacity:.75}50%{opacity:1}}
.otto.en-ligne .otto__hublot i{animation:none;opacity:1}
.otto[data-etat="erreur"] .otto__hublot i{background:radial-gradient(circle,#fff 0%,#767d84 40%,rgba(118,125,132,0) 72%);box-shadow:none}
.fin__sous{font-weight:700;font-size:clamp(22px,2.6vw,36px);line-height:1.15;letter-spacing:-.015em;margin-top:12px}
.otto__texte p{margin-top:16px;max-width:56ch;color:var(--fg-2);font-size:clamp(14px,1.2vw,17px);line-height:1.65}
.otto__etat{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);min-height:1.4em}
.otto__etat::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2a2d31;margin-right:10px;vertical-align:1px}
.otto[data-etat="ecoute"] .otto__etat::before,.otto[data-etat="parle"] .otto__etat::before{background:var(--tech);box-shadow:0 0 8px 2px rgba(255,152,58,.85)}
.otto[data-etat="parle"] .otto__etat::before{animation:otto-respire .6s ease-in-out infinite}
.otto[data-etat="erreur"] .otto__etat{color:#FFB09A}
.otto__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.otto__actions .btn{font-family:inherit;cursor:pointer}
.otto.en-ligne .otto__actions .btn:not(.btn--ghost){background:var(--fg);border-color:var(--fg);color:var(--ink-900)}
.otto__note{font-size:12px !important;color:var(--fg-3) !important}
@media (max-width:760px){
  .fin__otto{grid-template-columns:1fr;gap:28px}
  .otto__hublot{max-width:11rem}
  .otto__actions .btn{flex:1 1 100%;justify-content:center}
}