/* ============================================================================
   LE FILM D'OUVERTURE de la page publique (05/10/2026) — le déroulé est dans film.js.

   Walter, vidéo à l'appui : une « VSL en motion design » — la typographie qui arrive mot à mot dans
   un flou, le problème répété, la bascule, « Voici », le logo qui se construit, les promesses. À la
   D.A. de l'app : fond de salle, capitales condensées, l'orange pour LE mot qui compte, la barre de
   l'app. Le film joue PAR-DESSUS la page : à la fin, la barre et le titre glissent à leur place dans
   le héros, et le reste de la page arrive.
   ========================================================================== */

/* Pendant le film : la page ne défile pas, et seuls la barre et le titre du héros restent — c'est le
   film qui les déplace. Le reste attend. */
html.film-joue, html.film-joue body{overflow:hidden}
html.film-joue .chapeau,
html.film-joue .heros-texte,
html.film-joue main > .enveloppe{visibility:hidden}
html.film-joue .heros h1,
html.film-joue .heros .scene{opacity:0; position:relative; z-index:2; will-change:transform, opacity}
html.film-joue .salle{overflow:visible}

/* Après la bascule : ce qui attendait arrive, en cascade. */
.film-fin .chapeau{animation:monter 520ms cubic-bezier(.2,.7,.3,1) backwards}
.film-fin .heros-texte{animation:monter 520ms cubic-bezier(.2,.7,.3,1) 120ms backwards}
.film-fin main > .enveloppe{animation:monter 520ms cubic-bezier(.2,.7,.3,1) 220ms backwards}

.film{position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden; display:none}
html.film-joue .film{display:block}

/* ---- les phrases ------------------------------------------------------- */
.film-ligne,
.film-legende{
  position:absolute; left:50%; translate:-50% -50%;
  width:min(100% - 32px, 62rem); text-align:center; text-wrap:balance;
  font-family:var(--condense); font-weight:700; text-transform:uppercase;
  color:var(--salle-encre); letter-spacing:.4px;
}
.film-ligne{top:50%; font-size:clamp(46px, 10.5vw, 118px); line-height:.94}
/* Les phrases passent DEVANT les questions, qui pleuvent de partout. */
.film-ligne,.film-legende{z-index:3}
/* La phrase d'une promesse : au-dessus de l'objet qui la montre. */
.film-legende{top:17%; font-size:clamp(30px, 6.4vw, 64px); line-height:.96}
.film-mot{display:inline-block; white-space:pre}
.film-accent{color:var(--signal)}

/* ---- les notes griffonnées, qui flottent derrière le problème ----------- */
.film-note{
  position:absolute; padding:10px 14px; white-space:nowrap;
  background:var(--surface1); border:1px solid var(--rail); border-radius:12px;
  font-family:var(--condense); font-weight:600; font-size:clamp(15px, 2.1vw, 21px); letter-spacing:.3px;
  color:var(--secondaire); box-shadow:0 6px 18px rgba(0,0,0,.16);
  animation:flotter 7s ease-in-out infinite alternate;
  z-index:1; will-change:transform, opacity;
}
.film-note s{color:var(--tertiaire)}
/* Au loin : pâlie et plus petite, sans flou — un flou par question saccadait le film au téléphone. */
.film-note.loin{scale:.82; opacity:.32}
@keyframes flotter{from{transform:translate(0,0) rotate(var(--r, 0deg))} to{transform:translate(var(--dx, 10px), var(--dy, -14px)) rotate(calc(var(--r, 0deg) * -1))}}

/* ---- les disques qui balaient l'écran : de la fonte vue de face --------- */
.film-disque{
  position:absolute; left:0; top:0; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 8.5%, #55514b 8.5% 10.5%, #1f1d1b 10.5% 36%, #2e2b28 36% 38.5%,
      #1c1a18 38.5% 84%, #3b3834 84% 88%, #161513 88% 100%);
  box-shadow:inset 18px 22px 46px rgba(255,255,255,.07), inset -10px -14px 30px rgba(0,0,0,.45), 0 30px 60px rgba(0,0,0,.35);
}

/* ---- le logo : TREMPE qui monte lettre à lettre, sous la barre ---------- */
.film-marque{position:absolute; left:50%; top:66%; translate:-50% 0; text-align:center}
.film-lettres{display:flex; justify-content:center; overflow:hidden; padding-bottom:.04em}
.film-lettre{
  display:inline-block; font-family:var(--condense); font-weight:700; text-transform:uppercase;
  font-size:clamp(72px, 17vw, 176px); line-height:.9; letter-spacing:.06em; color:var(--salle-encre);
}
.film-devise{margin-top:14px; font-family:var(--texte); font-weight:600; font-size:clamp(15px, 2.3vw, 20px); color:var(--salle-encre-discrete)}

/* ---- la charge, sous la barre ------------------------------------------- */
.film-charge{
  position:absolute; left:50%; top:80%; translate:-50% 0; white-space:nowrap;
  font-family:var(--condense); font-weight:700; text-transform:uppercase;
  font-size:clamp(22px, 4vw, 36px); letter-spacing:1.6px; color:var(--salle-encre);
}
.film-charge span{color:var(--tertiaire); margin-right:.5em}

/* ---- les jauges : ton volume, muscle par muscle ------------------------- */
.film-jauges{position:absolute; left:50%; top:56%; translate:-50% -50%; width:min(100% - 48px, 34rem)}
.film-jauge{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:8px 12px; margin-bottom:clamp(16px, 2.6vh, 26px)}
.film-jauge .nom{font-family:var(--texte); font-weight:600; font-size:clamp(17px, 2.4vw, 22px); color:var(--salle-encre)}
.film-jauge .compte{font-family:var(--condense); font-weight:700; font-size:clamp(22px, 3.2vw, 32px); font-variant-numeric:tabular-nums; color:var(--salle-encre)}
.film-jauge .compte small{font-size:.62em; color:var(--tertiaire)}
.film-jauge .rail{grid-column:1 / -1; height:10px; border-radius:5px; background:var(--surface2); overflow:hidden}
.film-jauge .plein{height:100%; border-radius:5px; background:var(--salle-encre); transform-origin:left center; scale:0 1; transition:background-color 220ms ease-out}
/* La jauge qui atteint sa cible : l'orange de l'app — « ce qu'on vient de valider ». */
.film-jauge.atteinte .plein{background:var(--signal)}
.film-jauge.atteinte .compte{color:var(--signal)}

/* ---- la courbe : tes progrès ------------------------------------------- */
.film-courbe{position:absolute; left:50%; top:57%; translate:-50% -50%; width:min(100% - 40px, 40rem)}
.film-courbe svg{display:block; width:100%; height:auto; overflow:visible}
.film-courbe .ligne{fill:none; stroke:var(--salle-encre); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.film-courbe .base{stroke:var(--rail); stroke-width:1.5}
.film-courbe .point{fill:var(--racine); stroke:var(--salle-encre); stroke-width:3; opacity:0}
.film-courbe .bout{fill:var(--signal); opacity:0}
.film-courbe .valeur{font-family:var(--condense); font-weight:700; font-size:34px; fill:var(--salle-encre); opacity:0}
.film-courbe .date{font-family:var(--texte); font-weight:600; font-size:17px; fill:var(--tertiaire)}

/* ---- passer ---------------------------------------------------------------- */
.film-passer{
  position:fixed; right:16px; bottom:16px; z-index:6; display:none;
  font:inherit; font-family:var(--condense); font-weight:600; text-transform:uppercase; letter-spacing:1.2px; font-size:15px;
  color:var(--secondaire); background:color-mix(in srgb, var(--racine) 70%, transparent);
  border:1px solid var(--rail); border-radius:var(--r-action); padding:10px 18px; cursor:pointer;
}
html.film-joue .film-passer{display:block}
.film-passer:hover{color:var(--craie); border-color:var(--secondaire)}