/* =====================================================================
   Film d'accueil « Le passage » — 15 s de motion design (inc/film.php,
   assets/js/film.js). Chargée seulement sur l'accueil, et seulement si
   FILM_ACCUEIL est vrai : la retirer ne casse rien.

   Règle d'or : l'état ci-dessous (sans animation) EST l'image finale —
   l'affiche vue sans JavaScript, avec « réduire les animations », et après
   la dernière image. Le script n'anime qu'avec transform, opacity,
   clip-path et stroke-dashoffset.

   Unités : la scène est carrée et déclare un conteneur ; 1cqi = 1 % de son
   côté. Les SVG partagent ce repère (viewBox 0 0 100 100).
   ===================================================================== */

/* ---------- Le hero accueille la scène ---------- */
.hero-avec-film .interieur {
    display: grid;
    gap: clamp(2.25rem, 5vw, 3.5rem);
    align-items: center;
}
@media (min-width: 64rem) {
    .hero-avec-film .interieur { grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); }
}

/* ---------- La scène ---------- */
.film {
    --miel: #F2D37A;              /* le jaune du bandeau de l'accueil */
    container: film / inline-size;
    position: relative;
    width: 100%;
    max-width: 33rem;
    aspect-ratio: 1;
    border-radius: var(--r-l);
    overflow: hidden;
    isolation: isolate;
    background: var(--nuit);
    box-shadow: var(--ombre-2);
    font-family: var(--titres);
    color: var(--blanc);
    -webkit-user-select: none;
    user-select: none;
}
.film-scene, .film-plan { position: absolute; inset: 0; }
.film-plan > * { position: absolute; }

/* Sans script, l'affiche apparaît en fondu (le script, lui, part de t = 0) ;
   « réduire les animations » coupe ce fondu : l'affiche est là d'emblée. */
.film:not(.film-pilote) .film-plan { animation: film-affiche 0.6s 1.2s both; }
@keyframes film-affiche { from { opacity: 0; } }

/* SVG : même repère que la scène, traits « dessinables » (pathLength = 1) */
.film svg { overflow: visible; }
.film [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 0; fill: none; }
.film-plan > svg { inset: 0; width: 100%; height: 100%; }

/* ---------- Fond : la réglure seyès du cahier ---------- */
.film-seyes { opacity: 0.5; transform-origin: 50% 60%; }
.film-seyes path { stroke-width: 0.17; }   /* ~1 px sur une scène de 560 px */
.film-seyes-fines      { stroke: rgb(168 203 228 / 0.12); }
.film-seyes-grandes    { stroke: rgb(168 203 228 / 0.26); }
.film-seyes-verticales { stroke: rgb(168 203 228 / 0.1); }
.film-seyes .film-seyes-marge { stroke: rgb(28 171 226 / 0.55); stroke-width: 0.26; }

/* ---------- Actes 1 et 2 : l'école, le passage ---------- */
.film-acte-passage { inset: 0; opacity: 0; }
.film-acte-passage > * { position: absolute; }

.film-trait {
    left: 0;
    top: calc(60% - 0.35cqi);
    width: 100%;
    height: 0.7cqi;
    background: var(--ciel);
    transform-origin: 0 50%;
}
.film-trait-g { width: 50%; }
.film-trait-d { left: 50%; width: 50%; }

/* Les mots se lèvent de la ligne : le masque s'arrête à la ligne de base */
.film-mot { display: flex; overflow: hidden; padding-top: 0.28em; line-height: 1; }
.film-lettre { display: block; }
@supports (text-box: trim-both cap alphabetic) {
    .film-lettre { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
    .film-mot { line-height: 0.74; padding-bottom: 0; }
}

.film-ecole {
    left: 0;
    right: 0;
    bottom: 41%;
    display: grid;
    justify-content: center;
    justify-items: start;
    transform-origin: 50% 100%;
}
.film-ecole .film-mot { font-size: 21cqi; font-weight: 800; letter-spacing: -0.02em; }
.film-de {
    font-size: 4.6cqi;
    font-weight: 700;
    color: var(--ciel);
    letter-spacing: 0.02em;
    margin: 0 0 -0.2em 0.2em;
}
.film-travail { left: 67%; bottom: 41%; }
/* Les cotes, sous la ligne : du collège au premier emploi, 13-25 ans (textes du site) */
.film-cote {
    top: 62.6%;
    font-size: 2.9cqi;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sur-nuit-2);
    white-space: nowrap;
}
.film-cote-college { left: 6.2%; }
.film-cote-age { left: 35%; width: 24%; text-align: center; color: var(--ciel); }
.film-cote-emploi { left: 67.2%; }
.film-travail .film-mot { font-size: 6.6cqi; font-weight: 800; letter-spacing: 0.01em; }

.film-pont path { stroke-linecap: round; stroke-linejoin: round; }
.film-arche  { stroke: var(--ciel); stroke-width: 0.7; }
.film-pointe { stroke: var(--ciel); stroke-width: 0.7; }
.film .film-comete { stroke: var(--blanc); stroke-width: 1.1; stroke-dasharray: 0.07 1.2; stroke-dashoffset: -1.02; }

.film-noeud, .film-onde {
    left: 47%;
    top: 40.5%;
    width: 2.6cqi;
    height: 2.6cqi;
    margin: -1.3cqi 0 0 -1.3cqi;
    border-radius: 50%;
}
.film-noeud { background: var(--ciel); }
.film-onde { border: 0.3cqi solid var(--ciel); opacity: 0; }
.film-deat { left: 47%; bottom: 62.5%; translate: -50% 0; }
.film-deat .film-mot { font-size: 8.5cqi; font-weight: 800; color: var(--ciel); letter-spacing: 0.04em; }

/* ---------- Acte 3 : les programmes ---------- */
.film-programme { inset: 0; opacity: 0; color: var(--nuit); }
.film-programme > * { position: absolute; }
.film-programme-bridge { background: var(--ciel); }
.film-programme-lab    { background: var(--brume); }
.film-programme-impact { background: var(--miel); }

.film-signe { left: 8%; top: 9%; width: 24cqi; height: auto; }
.film-signe * { transform-box: fill-box; transform-origin: center; }
.film-signe-arc { stroke: var(--nuit); stroke-width: 1.7; stroke-linecap: round; }
.film-signe-point { fill: var(--nuit); }
.film-programme-lab .film-signe { width: 17cqi; }
.film-signe-bloc { fill: none; stroke: var(--nuit); stroke-width: 1.3; }
.film-signe-solution { fill: var(--ciel); stroke: var(--nuit); stroke-width: 1.3; }
.film-programme-impact .film-signe { width: 21cqi; }
.film-signe-onde { fill: none; stroke: var(--nuit); stroke-width: 1.3; }
.film-signe-impact { fill: var(--nuit); }

.film-prog-numero {
    right: 6%;
    top: 4%;
    font-size: 30cqi;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 0.3cqi var(--nuit);
}
.film-prog-sigle {
    left: 8%;
    top: 49%;
    font-size: 3.3cqi;
    font-weight: 700;
    letter-spacing: 0.26em;
}
.film-prog-nom {
    left: 7.2%;
    top: 53.5%;
    display: flex;
    font-size: 19cqi;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    transform-origin: 0 70%;
}
.film-prog-nom .film-lettre { text-box: normal; }
.film-prog-mission {
    left: 8%;
    right: 8%;
    top: 77%;
    display: flex;
    flex-direction: column;
    font-size: 4.7cqi;
    font-weight: 600;
    line-height: 1.22;
}

/* Les volets : une lame cyan suit le bord de chaque transition */
.film-lame { background: var(--ciel); opacity: 0; }
.film-lame-v { left: 0; top: 0; bottom: 0; width: 1cqi; }
.film-lame-h { left: 0; right: 0; top: 0; height: 1cqi; }

/* ---------- Acte 4 : l'écosystème ---------- */
.film-eco-fond { inset: 0; background: var(--nuit); opacity: 0; }
.film-eco { inset: 0; opacity: 0; }
.film-eco > * { position: absolute; }
.film-eco-reseau { inset: 0; width: 100%; height: 100%; }
.film-eco-reseau * { transform-box: fill-box; transform-origin: center; }
.film-eco-pole {
    left: 0;
    right: 0;
    text-align: center;
    font-size: 4.4cqi;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}
.film-eco-entreprises { top: 10%; }
.film-eco-jeunes { top: 85.5%; }
.film-voie, .film-fleche { stroke: var(--ciel); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; }
.film .film-flux { stroke: var(--blanc); stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 0.14 1.2; stroke-dashoffset: -1.02; }
.film-eco-anneau { stroke: var(--ciel); stroke-width: 0.5; rotate: -90deg; }
.film-eco-couronne { transform-box: view-box; transform-origin: 50px 50px; }
.film-eco-couronne text {
    font-family: var(--titres);
    font-size: 2.3px;
    font-weight: 700;
    letter-spacing: 0.9px;
    fill: var(--sur-nuit-2);
}
.film-eco-deat {
    left: 0;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    text-align: center;
    font-size: 5.4cqi;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
}
.film-eco-mot {
    font-size: 3.9cqi;
    font-weight: 600;
    color: var(--sur-nuit);
    line-height: 1.1;
    white-space: nowrap;
}
.film-eco-competences { right: 57%; top: 68%; text-align: right; }
.film-eco-experience { left: 58%; top: 28%; }
.film-eco-opportunites { left: 58%; top: 68%; }
.film-eco-accompagnement { display: none; right: 57%; top: 28%; text-align: right; }

/* ---------- Acte 5 : l'affiche finale ---------- */
.film-final { inset: 0; }
.film-final > * { position: absolute; }
.film-logo-cercle { inset: 0; width: 100%; height: 100%; }
.film-logo-cercle circle {
    stroke: var(--ciel);
    stroke-width: 0.705;
    rotate: -90deg;
    transform-box: fill-box;
    transform-origin: center;
}
.film-logo {
    left: 50%;
    top: 36%;
    width: 26cqi;
    height: 26cqi;
    margin: -13cqi 0 0 -13cqi;
    border-radius: 50%;
    background: var(--blanc);
    overflow: hidden;
}
.film-logo img { display: block; width: 100%; height: 100%; }
.film-marque {
    left: 50%;
    top: 57%;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 0.28em;
    margin: 0;
    font-size: 5.6cqi;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.film-marque-masque { display: block; overflow: hidden; padding-block: 0.06em 0.14em; }
.film-marque-a, .film-marque-b { display: block; }
.film-marque-fleche { display: block; width: 1.45em; height: auto; }
.film-marque-fleche path { stroke: var(--ciel); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.film-marque-trait {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.3em;
    height: 0.7cqi;
    background: var(--ciel);
    transform-origin: 0 50%;
}
.film-baseline {
    left: 6%;
    right: 6%;
    top: 72%;
    margin: 0;
    text-align: center;
    font-family: var(--corps);
    font-size: 3.7cqi;
    font-weight: 500;
    color: var(--sur-nuit-2);
}
.film-trio {
    left: 0;
    right: 0;
    top: 87%;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 0.9em;
    font-size: 2.7cqi;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ciel);
}
.film-trio-sep { color: var(--sur-nuit-2); letter-spacing: 0; }

.film-progression {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.6cqi;
    background: var(--ciel);
    transform-origin: 0 50%;
    opacity: 0;
}

/* ---------- Le bouton pause / reprendre / rejouer (WCAG 2.2.2) ----------
   Sous la scène, jamais sur l'image : il ne masque aucun plan. */
.film-cadre { display: grid; justify-items: end; width: 100%; max-width: 33rem; }
.film-cadre .film { max-width: none; }
.film-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 2.75rem;
    margin-top: 0.35rem;
    padding: 0 0.2rem;
    border: 0;
    background: none;
    color: var(--gris);
    font: 600 0.88rem/1 var(--titres);
    cursor: pointer;
    transition: color var(--vite);
}
.film-bouton[hidden] { display: none; }
.film-bouton:hover { color: var(--nuit); }
.film-bouton:hover .film-bouton-texte { text-decoration: underline; text-underline-offset: 0.2em; }
.film-bouton:focus-visible { outline: 3px solid var(--ciel); outline-offset: 2px; border-radius: 4px; }
.film-icone { display: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ciel-appui); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.film-icone-lecture { fill: var(--ciel-appui); stroke-width: 1.5; }
.film-bouton[data-etat="lecture"] .film-icone-pause,
.film-bouton[data-etat="pause"] .film-icone-lecture,
.film-bouton[data-etat="repos"] .film-icone-lecture,
.film-bouton[data-etat="fin"] .film-icone-rejouer { display: block; }
.film-bouton[data-etat="fin"] { color: var(--nuit); }

/* ---------- Petites scènes (téléphones) : une composition, pas une réduction ---------- */
@container film (max-width: 25rem) {
    .film-seyes-fines { display: none; }          /* une réglure plus aérée */
    .film-de { font-size: 5.4cqi; }
    .film-travail .film-mot { font-size: 6.9cqi; }
    .film-cote { font-size: 3.2cqi; letter-spacing: 0.06em; }
    .film-cote-emploi { left: auto; right: 3%; }
    .film-prog-numero { font-size: 27cqi; }
    .film-prog-sigle { font-size: 4cqi; }
    .film-prog-mission { font-size: 5.5cqi; }
    .film-eco-pole { font-size: 5cqi; letter-spacing: 0.12em; }
    .film-eco-mot { font-size: 4.6cqi; }
    .film-eco-couronne { display: none; }         /* texte circulaire illisible si petit */
    .film-eco-accompagnement { display: block; }  /* il passe en clair, en haut à gauche */
    .film-eco-deat { font-size: 6.2cqi; }
    .film-marque { font-size: 6.1cqi; }
    .film-baseline { font-size: 4.3cqi; left: 8%; right: 8%; }
    .film-trio { font-size: 3.3cqi; letter-spacing: 0.24em; }
}