/* ═══════════════════════════════════════════════════════════════════
   PANACHE · le film « Panache en 1 minute » (16 octobre 2026)
   Une animation écrite en code, sans fichier vidéo, placée sous le premier écran de l'accueil. 14 plans en
   5 étapes (le flou, mesurer, raconter, décider, agir), environ une minute, arrêt sur le dernier plan.
   Même lecteur que la vidéo d'introduction de psycomet.com (temps dans le HTML, data-duree, data-entree,
   data-sortie ; le script film.js pose la classe is-on), dans le système « Revue » de Panache :
   la scène part de la nuit du premier écran, la personne y est floue ; elle devient nette à mesure que
   l'on mesure et que l'on raconte ; au Dossier, le papier de la page jaillit de son cercle.
   Une seule couleur parle : la braise sur la nuit, le vermillon sur le papier. Aucune des trois
   directions n'est marquée plus qu'une autre.
   Rien ne démarre seul : la vidéo attend derrière une couverture (la question du film, un grand bouton).
   « Réduire les animations » : ni couverture ni mouvement, chaque plan fixe, le visiteur avance lui-même.
   La musique (19 octobre 2026) : elle part avec le grand bouton ; le bouton Musique la coupe et la remet.
   ═══════════════════════════════════════════════════════════════════ */

.film{max-width:var(--wrap);margin:0 auto;padding:64px var(--pad) 0}
.film-in{max-width:1120px;margin:0 auto}
/* Le titre de la section est lu, pas affiché : la couverture dit déjà « Regarder la vidéo, Panache en 1 minute » */
.film-in{position:relative}
.film .vi-titre{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.film .vi-player{container-type:inline-size;position:relative}

/* La scène : le texte en haut, l'image dessous, tout centré ; les plans sans image au milieu.
   Fond de nuit, toujours : au Dossier, c'est le papier qui la recouvre (.vi-lumiere). */
.film .vi-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,40fr) minmax(0,60fr);aspect-ratio:6/5;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--night);background:var(--night);color:var(--on-night);transition:border-color .6s ease}
.film .vi-stage[data-fond="clair"]{border-color:var(--line)}
/* La couleur du texte suit le fond de son propre plan : à la coupe vers le papier, le plan qui sort reste clair sur la nuit */
.film .vi-plan[data-fond="clair"]{color:var(--ink)}
/* Téléphone : d'un bord à l'autre de l'écran, presque carrée (6:5), pour que la page reste sous huit écrans */
@media (max-width:600px){.film{padding:32px 0 0}.film .vi-stage{border-radius:0;border-left:0;border-right:0}.film .vi-ctrl{padding:0 12px}.film .vi-transcription{padding:0 var(--pad)}}
@container (min-width:600px){.film .vi-stage{aspect-ratio:4/3;grid-template-rows:minmax(0,36fr) minmax(0,64fr)}}
@container (min-width:800px){.film .vi-stage{aspect-ratio:16/9;grid-template-rows:minmax(0,40fr) minmax(0,60fr)}}

/* Le papier : quand la personne est nette, il part de son cercle et remplit le cadre */
.film .vi-lumiere{position:absolute;inset:0;z-index:1;background:var(--paper);pointer-events:none;opacity:0;clip-path:circle(var(--vi-r,0px) at var(--vi-x,25%) var(--vi-y,70%));transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.film .vi-lumiere.is-on{opacity:1;clip-path:circle(150% at var(--vi-x,25%) var(--vi-y,70%))}

/* Plans : un message par plan, une idée par ligne. À la coupe, le texte sortant monte et s'efface
   pendant que le suivant monte et apparaît : un enchaînement, jamais un cadre vide. */
.film .vi-plan{position:relative;z-index:2;grid-area:1/1/2/2;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px 16px 0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.film .vi-plan.is-on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.film .vi-plan.vi-solo{grid-area:1/1/-1/-1;padding:24px 16px}
.film .vi-txt{margin:0;font-size:clamp(21px,calc((100cqi - 32px) / 14),40px);font-weight:700;line-height:1.1;letter-spacing:-.028em;color:inherit}
.film .vi-solo .vi-txt{font-size:clamp(24px,calc((100cqi - 32px) / 11),56px)}
@container (min-width:800px){
  .film .vi-plan{padding:30px 64px 4px}
  .film .vi-plan.vi-solo{padding:40px 64px}
  .film .vi-txt{font-size:clamp(28px,calc((100cqi - 128px) / 14),56px)}
  .film .vi-solo .vi-txt{font-size:clamp(40px,calc((100cqi - 128px) / 11),84px)}
}
/* Une ligne ne se coupe pas ; si le visiteur impose un espacement du texte plus large (WCAG 1.4.12), elle
   passe à la ligne de façon équilibrée au lieu d'être rognée. Le script mesure les lignes sans retour. */
.film .vi-l{display:block;text-wrap:balance;opacity:0;transform:translateY(.32em);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.film .vi-stage.vi-mesure .vi-l{white-space:nowrap}
.film .vi-l+.vi-l{margin-top:.2em}
.film .vi-l.is-on{opacity:1;transform:none}
/* Une ligne longue se partage en 2 sur téléphone, à l'endroit choisi (gen/film.py, C) : jamais sous 22 px */
@container (max-width:599px){.film .vi-c{display:block}}
.film .vi-plan:not(.is-on) .vi-l.is-on{transform:translateY(-.15em)}
.film .vi-l.vi-gris{color:var(--on-night2);font-weight:600}
.film .vi-plan[data-fond="clair"] .vi-l.vi-gris{color:var(--ink2)}
.film .vi-k{transition:color .5s ease}
.film .vi-k.is-on{color:var(--braise)}
.film .vi-plan[data-fond="clair"] .vi-k.is-on{color:var(--verm-d)}
/* Le dernier plan : la phrase, puis le lien vers le Dossier publié en entier */
.film .vi-fin .vi-txt{font-size:clamp(26px,4.4cqi,48px)}
.film .vi-l.vi-appel{margin-top:.9em}
.film .vi-bouton{display:inline-flex;align-items:center;gap:.4em;padding:.62em 1.2em;border-radius:var(--pill);background:var(--ink);color:var(--paper);font-size:clamp(17px,2cqi,20px);font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;text-decoration:none;transition:background-color .2s ease,transform .2s ease}
.film .vi-bouton:hover{background:var(--verm-btn);color:#fff;transform:translateY(-1px)}
.film .vi-plan[data-fond="clair"] a:focus-visible{outline-color:var(--ink)}

/* Les images : traits fins, aucune décoration, chaque forme dit quelque chose */
.film .vi-fig{position:relative;z-index:2;grid-area:2/1/3/2;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px 18px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.film .vi-fig.is-on{opacity:1;visibility:visible;transition:opacity .6s ease .1s,visibility 0s}
@container (min-width:800px){.film .vi-fig{padding:0 64px 40px}}
.film .vi-fig svg{display:block;width:100%;height:100%;overflow:visible}
.film .vi-monte{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.film .vi-monte.is-on{opacity:1;transform:none}
.film .vi-apparait{opacity:0;transition:opacity .6s ease}
.film .vi-apparait.is-on{opacity:1}
.film .vi-trace{opacity:0;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.film .vi-trace.is-on{opacity:1;stroke-dashoffset:0}
.film .vi-tape{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.film .vi-tape.is-on{transform:none}

/* La personne : floue dans la nuit, puis de plus en plus nette ; encre sur le papier */
.film .pf-personne{fill:rgba(245,241,234,.9)}
.film .pf-personne-papier{fill:var(--ink)}
.film .pf-pointille{fill:none;stroke:rgba(245,241,234,.4);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.film .vi-anneau{fill:none;stroke:var(--braise);stroke-width:3.5}
.film .pf-anneau-clair{fill:none;stroke:var(--verm);stroke-width:3}

/* Le flou : quatre chemins possibles, aucun choisi ; au plan de la question, ils hésitent */
.film .pf-chemin{fill:none;stroke:rgba(245,241,234,.42);stroke-width:2;stroke-linecap:round}
.film .pf-bout{fill:none;stroke:rgba(245,241,234,.42);stroke-width:2}
.film .pf-hesite.is-on .pf-chemin,.film .pf-hesite.is-on .pf-bout{animation:pf-hesite 1.8s ease-in-out infinite}
.film .pf-hesite.is-on > :nth-child(2n){animation-delay:.45s}
.film .pf-hesite.is-on > :nth-child(3n){animation-delay:.9s}
@keyframes pf-hesite{50%{opacity:.25}}

/* Mesurer : trois échelles, chacune la sienne ; un repère par échelle, situé parmi d'autres, jamais additionné */
.film .pf-echelle{fill:none;stroke:rgba(245,241,234,.34);stroke-width:2;stroke-linecap:round}
.film .pf-echelle-k{fill:none;stroke:var(--braise);stroke-width:3;stroke-linecap:round}
.film .pf-autre{fill:rgba(245,241,234,.46)}
.film .pf-repere{fill:var(--on-night);opacity:0;transition:opacity .4s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.film .pf-repere.is-on{opacity:1;transform:translateX(var(--dx,0px))}

/* Raconter : une question, des réponses qui s'écrivent, en une ou plusieurs fois, au clavier ou à la voix */
.film .pf-carte{fill:rgba(245,241,234,.06);stroke:rgba(245,241,234,.3);stroke-width:1.5}
.film .pf-question{fill:rgba(245,241,234,.86)}
.film .pf-ligne{fill:rgba(245,241,234,.46)}
.film .pf-micro{fill:none;stroke:var(--braise);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Décider : le Dossier, sur le papier ; le métier en trois parts ; trois directions, de même trait */
.film .pf-page{transform-box:fill-box;transform-origin:50% 60%}
.film .pf-page-fond{fill:var(--card);stroke:var(--line);stroke-width:1}
.film .pf-p-encre{fill:var(--ink)}
.film .pf-p-gris{fill:rgba(72,80,90,.42)}
.film .pf-p-filet{stroke:var(--line);stroke-width:1}
.film .pf-part-coeur{fill:var(--verm)}
.film .pf-part-transforme{fill:rgba(21,38,58,.5)}
.film .pf-part-delegue{fill:rgba(21,38,58,.2)}
.film .pf-direction{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.film .pf-cap{fill:var(--card);stroke:var(--ink);stroke-width:3}

/* Agir : une date, le jour où l'on commence */
.film .pf-cal{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.film .pf-cal-tete{fill:var(--ink)}
.film .pf-cal-jour{fill:rgba(21,38,58,.16)}
.film .pf-jour{fill:none;stroke:var(--verm);stroke-width:3.5;stroke-linecap:round}
.film .pf-drapeau{fill:var(--verm)}

/* Couverture : rien ne démarre seul. La question du film et un grand bouton de lecture ; toute la
   couverture se clique. Le titre prend la taille du plan 2 (le script la recopie). Au lancement, elle
   sort comme un plan du film : monte et s'efface en 0,18 s. */
.film .vi-couverture{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:inherit;background:var(--night) radial-gradient(circle at 50% 68%,rgba(255,148,102,.12),rgba(255,148,102,0) 42%);color:var(--on-night);cursor:pointer;transition:opacity .18s ease,visibility 0s linear .18s}
.film .vi-couverture-titre{grid-area:1/1/2/2;align-self:center;margin:0;padding:20px 16px 0;text-align:center;text-wrap:balance;font-size:clamp(21px,calc((100cqi - 32px) / 14),40px);font-weight:700;line-height:1.1;letter-spacing:-.028em;transition:transform .18s ease}
.film .vi-couverture .vi-braise{color:var(--braise)}
.film .vi-couverture-bas{grid-area:2/1/3/2;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 16px 18px;text-align:center}
.film .vi-couverture .vi-jouer{position:relative;flex:0 0 auto;width:clamp(76px,10cqi,108px);height:clamp(76px,10cqi,108px);padding:0;border:0;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-3);transition:background-color .2s ease,color .2s ease,transform .2s ease}
.film .vi-couverture .vi-jouer:focus-visible{outline:3px solid var(--braise);outline-offset:6px;border-radius:50%}
.film .vi-jouer svg{width:40%;height:40%;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linejoin:round;margin-left:6%}
.film .vi-couverture:hover .vi-jouer,.film .vi-couverture .vi-jouer:focus-visible{background:var(--verm-btn);color:#fff;transform:scale(1.05)}
.film .vi-couverture:active .vi-jouer{transform:scale(.97)}
/* L'onde : 2 pulsations chaque fois que la couverture arrive à l'écran, puis le calme (moins de 5 s, WCAG 2.2.2) */
.film .vi-jouer::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(245,241,234,.55);opacity:0;pointer-events:none}
.film .vi-player.vi-vu:not(.vi-lance):not(.vi-fixe) .vi-jouer::after{animation:vi-onde 2.2s cubic-bezier(.2,.7,.2,1) .5s 2}
.film .vi-couverture:hover .vi-jouer::after{animation:none}
@keyframes vi-onde{0%{opacity:.8;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.5)}}
/* Réseau lent : une roue tourne dans le grand bouton en attendant la 1re note (2,5 s au plus, puis l'image part seule) */
.film .vi-jouer.vi-charge svg{opacity:0}
.film .vi-jouer.vi-charge::before{content:"";position:absolute;inset:34%;border-radius:50%;border:3px solid rgba(21,38,58,.16);border-color:color-mix(in srgb,currentColor 18%,transparent);border-top-color:currentColor;animation:vi-tourne .8s linear infinite}
@keyframes vi-tourne{to{transform:rotate(1turn)}}
.film .vi-jouer-texte{margin:0;font-size:clamp(16px,1.8cqi,19px);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.film .vi-jouer-info{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--on-night3)}
@container (min-width:800px){
  .film .vi-couverture-titre{padding:30px 64px 4px;font-size:clamp(28px,calc((100cqi - 128px) / 14),56px)}
  .film .vi-couverture-bas{padding:0 64px 40px}
}
.film .vi-player.vi-lance .vi-couverture,.film .vi-player.vi-fixe .vi-couverture{opacity:0;visibility:hidden;pointer-events:none}
.film .vi-player.vi-lance .vi-couverture-titre{transform:translateY(-.15em)}
/* Avant le lancement, les commandes ne prennent aucune place : sous la couverture, la version texte.
   Au lancement, elles s'intercalent en fondu, sous la scène que le visiteur regarde. */
.film .vi-player:not(.vi-lance):not(.vi-fixe) .vi-ctrl{display:none}
@starting-style{.film .vi-player.vi-lance .vi-ctrl{opacity:0}}

/* Saut, pause, réduction des animations, page sans JavaScript */
.film .vi-stage.vi-saut,.film .vi-stage.vi-saut *{transition:none!important;animation:none!important}
.film .vi-stage.vi-pause *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.film .vi-stage,.film .vi-stage *,.film .vi-stage *::before,.film .vi-stage *::after,.film .vi-transcription summary::after{transition:none!important;animation:none!important}}
html:not(.js) .film .vi-ctrl,html:not(.js) .film .vi-couverture{display:none}
html:not(.js) .film .vi-stage{background:var(--paper);border-color:var(--line);color:var(--ink)}
html:not(.js) .film .vi-fin,html:not(.js) .film .vi-fin .vi-l,html:not(.js) .film .vi-fig,html:not(.js) .film .pf-fin{opacity:1;visibility:visible;transform:none}
html:not(.js) .film .pf-fin.vi-trace{stroke-dashoffset:0}

/* Commandes : lecture et pause (revoir à la fin), 5 étapes qui se remplissent ; plan précédent et
   suivant sur grand écran et en « réduire les animations » (au clavier, les flèches font de même partout) */
.film .vi-ctrl{display:flex;align-items:center;gap:8px;margin-top:12px;transition:opacity .4s ease .15s}
.film .vi-annonce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.film .vi-btn{flex:0 0 auto;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.film .vi-btn:hover{border-color:var(--verm-d);color:var(--verm-d)}
.film .vi-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.film .vi-lecture .vi-ico-pause,.film .vi-lecture[data-etat="pause"] .vi-ico-lecture{display:none}
.film .vi-lecture[data-etat="pause"] .vi-ico-pause{display:block}
.film .vi-revoir,.film .vi-player.vi-fini .vi-lecture,.film .vi-player.vi-fixe .vi-lecture{display:none}
.film .vi-player.vi-fini .vi-revoir{display:inline-flex}
/* Musique : le libellé dit l'action, l'icône l'état ; pas de musique en « réduire les animations » */
.film .vi-son .vi-ico-son,.film .vi-son[data-etat="son"] .vi-ico-muet{display:none}
.film .vi-son[data-etat="son"] .vi-ico-son{display:block}
.film .vi-player.vi-fixe .vi-son{display:none}
@container (max-width:599px){.film .vi-player:not(.vi-fixe) .vi-prec,.film .vi-player:not(.vi-fixe) .vi-suiv{display:none}}
.film .vi-etapes{flex:1 1 auto;min-width:0;display:flex;justify-content:center;gap:6px}
.film .vi-etape{position:relative;flex:1 1 0;max-width:76px;height:40px;padding:0;border:0;background:none;cursor:pointer}
.film .vi-etape::before,.film .vi-etape::after{content:"";position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px}
.film .vi-etape::before{right:0;top:calc(50% + .5px);height:2px;background:var(--attente);transition:background-color .2s ease}
.film .vi-etape::after{width:calc(var(--f,0) * 100%);background:var(--verm)}
.film .vi-etape:hover::before{background:var(--ink)}

/* Version texte repliable */
.film .vi-transcription{max-width:720px;margin:10px auto 0;color:var(--ink2);font-size:15px;line-height:1.6}
.film .vi-transcription summary{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 0;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--ink3);transition:color .2s ease}
.film .vi-transcription summary::-webkit-details-marker{display:none}
.film .vi-transcription summary::after{content:"+";content:"+" / "";font-size:19px;font-weight:400;line-height:1;transition:transform .3s ease}
.film .vi-transcription[open] summary::after{transform:rotate(45deg)}
.film .vi-transcription summary:hover{color:var(--ink)}
.film .vi-transcription ol{margin:8px 0 0;padding:0 0 0 22px}
.film .vi-transcription li{padding:3px 0}
.film .vi-transcription a{color:var(--verm-d);text-decoration:underline;text-underline-offset:2px}

/* Contraste élevé de Windows : les barres d'étape et les boutons restent visibles */
@media (forced-colors:active){.film .vi-etape::before{background:ButtonText}.film .vi-etape::after{background:Highlight}.film .vi-btn{border-color:ButtonText}.film .vi-couverture .vi-jouer{border:2px solid ButtonText}}
/* Navigateurs sans requêtes de conteneur (Safari 15) : format 16:9 sur grand écran */
@supports not (container-type:inline-size){@media (min-width:860px){.film .vi-stage{aspect-ratio:16/9;grid-template-rows:minmax(0,40fr) minmax(0,60fr)}}}