.film{line-height:normal;font-size:16px;letter-spacing:normal;text-align:left;font-weight:400}
.film *:not(svg):not(svg *){all:revert;box-sizing:border-box}
/* ═══ LE FILM PLANNAVA — la visite complète, en écrans réels ═══════════════
   Charte : accent indigo #3e63dd, encre #1c2024, gris slate, tailles
   9,5 · 11 · 12,5 · 14 · 16 · 20 · 26, rayons 4 · 8 · 12 · 16 · 99. */
.film{--acc:#3e63dd;--accd:#3a5bc7;--encre:#1c2024;--gris:#60646c;--gris2:#8b8d98;--filet:#e0e1e6;--creux:#f0f0f3;
  --t1:140ms;--t2:220ms;--ease:cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;gap:12px;font-family:Inter,system-ui,sans-serif;color:var(--encre);
  -webkit-font-smoothing:antialiased;width:100%;min-width:0}
.film>*{min-width:0}
.film *{box-sizing:border-box}

/* la barre des chapitres : chaque pastille se remplit à mesure que son chapitre avance */
.film .chapitres{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.film .chapitres::-webkit-scrollbar{display:none}
.film .chap{position:relative;flex:0 0 auto;height:32px;padding:0 14px;border-radius:99px;border:1px solid var(--filet);
  background:#fff;color:var(--gris);font:500 12.5px/30px Inter,system-ui,sans-serif;cursor:pointer;overflow:hidden;
  transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.film .chap span{position:relative;z-index:1}
.film .chap i{position:absolute;inset:0;background:rgba(62,99,221,.12);transform-origin:0 50%;transform:scaleX(0)}
.film .chap:hover{color:var(--encre)}
.film .chap:active{scale:.965}
.film .chap.fait{color:var(--encre)}
.film .chap.actif{color:var(--accd);border-color:rgba(62,99,221,.45)}
.film .chap:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* la scène : la fenêtre de l'application, une seule surface, un filet */
.film .cadre{border-radius:12px;border:1px solid var(--filet);background:#fff;overflow:hidden}
.film .cadre .barre{height:28px;display:flex;align-items:center;gap:6px;padding-left:12px;border-bottom:1px solid var(--filet)}
.film .cadre .barre i{width:10px;height:10px;border-radius:99px;background:#e0e1e6}
.film .cadre .barre i:nth-child(1){background:#ff5f57}.film .cadre .barre i:nth-child(2){background:#febc2e}.film .cadre .barre i:nth-child(3){background:#28c840}
.film .ecr{position:relative;overflow:hidden;aspect-ratio:1440/720;background:#fcfcfd}
.film .ecr iframe{position:absolute;left:0;top:0;width:1440px;height:720px;border:0;transform-origin:0 0;pointer-events:none;
  opacity:0;transition:opacity var(--t2) var(--ease)}
.film .ecr iframe.vu{opacity:1}
.film .ecr .attente{position:absolute;inset:0;display:grid;place-items:center;color:var(--gris2);font-size:12.5px}

/* la légende : un titre, une phrase, sur un fond teinté de l'accent */
.film .legende{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 18px;border-radius:12px;
  background:linear-gradient(120deg,#eef2ff 0%,#f5f7ff 55%,#fcfcfd 100%);border:1px solid rgba(62,99,221,.18);min-height:76px}
.film .legende .num{flex:0 0 auto;width:40px;height:40px;border-radius:99px;display:grid;place-items:center;background:var(--acc);color:#fff;
  font:600 14px/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.film .legende .txt{flex:1;min-width:0}
.film .legende .titre{font:600 16px/1.3 Inter,system-ui,sans-serif;color:var(--encre)}
.film .legende .phrase{margin:4px 0 0;font:400 14px/1.45 Inter,system-ui,sans-serif;color:var(--gris)}
.film .legende .txt.change{animation:film-texte var(--t2) var(--ease)}
@keyframes film-texte{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
.film .commandes{flex:0 0 auto;display:flex;gap:8px}
.film .commandes button{width:40px;height:40px;border-radius:99px;border:1px solid rgba(62,99,221,.3);background:#fff;color:var(--accd);
  display:grid;place-items:center;cursor:pointer;transition:background var(--t1) var(--ease)}
.film .commandes button:hover{background:#eef2ff}
.film .commandes button:active{scale:.965}
.film .commandes button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.film .commandes svg{width:16px;height:16px}

@media(max-width:699px){
  .film{gap:10px}
  .film .chap{height:30px;padding:0 12px;line-height:28px}
  .film .cadre{border-radius:8px}.film .cadre .barre{height:20px;gap:4px;padding-left:8px}.film .cadre .barre i{width:8px;height:8px}
  .film .legende{padding:12px;gap:12px;min-height:0;align-items:flex-start}
  .film .legende .num{width:32px;height:32px;font-size:12.5px}
  .film .legende .titre{font-size:14px}.film .legende .phrase{font-size:12.5px}
  .film .commandes button{width:36px;height:36px}
}
/* le carton du staccato : trois verbes plein cadre, le titre, puis l'écran arrive en lames (validé par Chaouki) */
.film .ecr{container-type:inline-size}
.film .carton{position:absolute;inset:0;z-index:5;display:none;pointer-events:none;overflow:hidden}
.film .carton.on{display:block}
.film .c-col{position:absolute;top:0;bottom:0}
.film .c-papier{position:absolute;inset:0;background-color:#fcfcfd;
  background-image:linear-gradient(#eef0f5 1px,transparent 1px),linear-gradient(90deg,#eef0f5 1px,transparent 1px);background-size:5.5556cqw 5.5556cqw}
.film .c-bleu{position:absolute;inset:0;background:var(--acc);clip-path:inset(100% 0 0 0)}
.film .c-verbe{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 12cqw/1 Inter,system-ui,sans-serif;letter-spacing:-.045em;color:var(--encre);opacity:0}
.film .c-dernier{color:var(--acc)}
.film .c-rang{position:absolute;left:6cqw;top:5cqw;display:flex;gap:16px;font:500 12.5px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gris2);opacity:0}
.film .c-rang span:last-child{color:var(--accd)}
.film .c-titre{position:absolute;left:6cqw;right:6cqw;bottom:6cqw;opacity:0}
.film .c-titre span{display:block;font:600 26px/1.2 Inter,system-ui,sans-serif;color:var(--encre)}
.film .c-titre small{display:block;margin:8px 0 0;font:400 16px/1.5 Inter,system-ui,sans-serif;color:var(--gris)}
@container (max-width:600px){
  .film .c-titre span{font-size:16px}.film .c-titre small{font-size:12.5px;margin-top:4px}
  .film .c-rang{gap:8px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){ .film .ecr iframe,.film .legende .txt.change{transition:none;animation:none} }