/* Kreative Monster · le mouvement, une seule feuille pour tout le site.
 *
 * Charte : docs/croissance/MOUVEMENT.md. Trois gestes, pas un de plus :
 *   1. le filet qui se trace (orientation), la signature de la DA ;
 *   2. la coupe (arrivee par un masque qui s'ouvre, jamais un fondu mou) ;
 *   3. le retour d'etat.
 *
 * Regles tenues ici :
 *   - seuls transform, opacity et clip-path s'animent : a l'arret, rien ne
 *     pousse rien, la mise en page est celle de la page immobile ;
 *   - tout mouvement lie au defilement vit sous @supports (animation-timeline:
 *     view()). La ou le navigateur ne sait pas, la page reste immobile et
 *     entierement lisible : c'est son etat de repli, pas un defaut ;
 *   - tout vit sous prefers-reduced-motion: no-preference. Qui a demande moins
 *     de mouvement voit l'etat final, tout de suite ;
 *   - aucune boucle infinie, aucune bibliotheque, aucun JavaScript.
 */
:root { --mv-courbe: cubic-bezier(.2, .7, .2, 1); }

/* M7 · Transitions entre pages (View Transitions natives, aucun JavaScript).
 * Les pages qui chargent cette feuille y consentent, comme celles de styles.css.
 * Un element qui porte le meme view-transition-name sur les deux pages grandit
 * de l'une a l'autre : la photo d'une carte /school devient le heros de sa
 * formation. Qui demande moins de mouvement change de page sans animation. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--mv-courbe); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@keyframes mv-filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mv-eclaire { from { opacity: .35; } to { opacity: 1; } }
@keyframes mv-coupe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* M8 · Le prix qui se recalcule sous les yeux. mouvement.js pose la classe
 * mv-maj quand un montant marque data-mv-prix change ; le nouveau chiffre arrive
 * par le bas, par une coupe. clip-path seulement : il s'applique aussi a un
 * element en ligne, et rien ne bouge autour. */
@keyframes mv-maj { from { clip-path: inset(100% 0 0 0); opacity: .35; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .mv-maj { animation: mv-maj .32s var(--mv-courbe); }
}

/* ── M4 · Hebergement : la mise sous tension du schema ─────────────────────
 * Chaque brique porte deja son filet rouge (::before). Au chargement, les huit
 * filets se tracent a tour de role et chaque etat s'eclaire : une fois, en une
 * seconde. L'etat reste lisible des le depart (35 % d'opacite, pas zero). */
@media (prefers-reduced-motion: no-preference) {
  .hb-briques .hb-brique::before { transform-origin: left center; animation: mv-filet .45s var(--mv-courbe) both; }
  .hb-briques .hb-brique-etat { animation: mv-eclaire .4s var(--mv-courbe) both; }
  .hb-briques .hb-brique:nth-child(1)::before, .hb-briques .hb-brique:nth-child(1) .hb-brique-etat { animation-delay: .20s; }
  .hb-briques .hb-brique:nth-child(2)::before, .hb-briques .hb-brique:nth-child(2) .hb-brique-etat { animation-delay: .31s; }
  .hb-briques .hb-brique:nth-child(3)::before, .hb-briques .hb-brique:nth-child(3) .hb-brique-etat { animation-delay: .42s; }
  .hb-briques .hb-brique:nth-child(4)::before, .hb-briques .hb-brique:nth-child(4) .hb-brique-etat { animation-delay: .53s; }
  .hb-briques .hb-brique:nth-child(5)::before, .hb-briques .hb-brique:nth-child(5) .hb-brique-etat { animation-delay: .64s; }
  .hb-briques .hb-brique:nth-child(6)::before, .hb-briques .hb-brique:nth-child(6) .hb-brique-etat { animation-delay: .75s; }
  .hb-briques .hb-brique:nth-child(7)::before, .hb-briques .hb-brique:nth-child(7) .hb-brique-etat { animation-delay: .86s; }
  .hb-briques .hb-brique:nth-child(8)::before, .hb-briques .hb-brique:nth-child(8) .hb-brique-etat { animation-delay: .97s; }
}

/* ── M1 · Monster Media : l'iceberg ────────────────────────────────────────
 * Au-dessus de la ligne : ce que l'audience voit, trois videos. Sous la ligne,
 * plus large : ce qui ne se voit pas. Le texte de la section dit deja tout ;
 * cette figure le montre, elle est donc aria-hidden. */
.mv-iceberg { margin: 32px 0 8px; max-width: 640px; color: #fff; }
.mv-iceberg-etiquette { display: block; font-family: var(--fa, var(--fh)); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.mv-iceberg-haut { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.mv-iceberg-videos { display: flex; gap: 8px; }
.mv-iceberg-videos span { width: 34px; aspect-ratio: 9 / 16; border: 1px solid rgba(255, 255, 255, .45); position: relative; }
.mv-iceberg-videos span::before { content: ''; position: absolute; left: 5px; right: 5px; top: 6px; height: 2px; background: var(--red, #AE0000); }
.mv-iceberg-ligne { height: 2px; background: var(--red, #AE0000); }
.mv-iceberg-bas { list-style: none; margin: 0; padding: 0; }
.mv-iceberg-bas li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-family: var(--fh); font-weight: 800; font-size: .95rem; }
.mv-iceberg-bas li::before { content: ''; flex: none; width: 14px; height: 2px; background: var(--red, #AE0000); }
.mv-iceberg .mv-iceberg-etiquette--bas { margin-top: 12px; }

/* ── M1 · Monster Media : l'anneau du cycle ─────────────────────────────────
 * Six etapes qui recommencent chaque mois : un anneau qui se ferme au fil de
 * la lecture. aria-hidden, les six etapes sont ecrites juste a cote. */
.mv-anneau { position: relative; width: 132px; margin: 26px 0 6px; }
.mv-anneau svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.mv-anneau circle { fill: none; stroke-width: 3; }
.mv-anneau .mv-anneau-fond { stroke: rgba(255, 255, 255, .16); }
.mv-anneau .mv-anneau-trait { stroke: var(--red, #AE0000); }
.mv-anneau .mv-anneau-point { fill: #fff; stroke: none; }
.mv-anneau-centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 800; font-size: .85rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; }

/* ── M3 · Video IA : le cadre vertical qui monte un clip ────────────────────
 * Quatre plans, calques sur les etapes reelles du studio (WORKFLOW dans
 * lib/ai-studio.js). Immobile, le cadre montre le premier plan. */
.mv-methode { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .mv-methode { grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; } }
.mv-cadre { position: relative; width: min(240px, 68vw); aspect-ratio: 9 / 16; border: 1px solid rgba(255, 255, 255, .28); background: #0B0B0B; overflow: hidden; justify-self: center; }
.mv-plan { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; color: #fff; }
.mv-plan + .mv-plan { opacity: 0; }
.mv-plan-k { margin: 0; font-family: var(--fa, var(--fh)); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #FF6B6B; }
.mv-plan-titre { margin: 0; font-family: var(--fh); font-weight: 800; font-size: 1rem; line-height: 1.2; }
.mv-plan-texte { margin: 0; font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.mv-plan-pied { margin-top: auto; font-size: .72rem; color: rgba(255, 255, 255, .6); border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 10px; }
.mv-nuancier { display: flex; gap: 6px; }
.mv-nuancier span { flex: 1; height: 28px; border: 1px solid rgba(255, 255, 255, .2); }
.mv-nuancier span:nth-child(1) { background: #111; } .mv-nuancier span:nth-child(2) { background: #555; }
.mv-nuancier span:nth-child(3) { background: #E6E6E6; } .mv-nuancier span:nth-child(4) { background: #AE0000; }
.mv-cases { display: grid; gap: 8px; }
.mv-cases span { display: block; aspect-ratio: 16 / 9; border: 1px solid rgba(255, 255, 255, .35); position: relative; }
.mv-cases span::before { content: attr(data-n); position: absolute; left: 6px; top: 4px; font-size: .68rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.mv-cases span::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 28%; height: 1px; background: rgba(255, 255, 255, .45); transform: rotate(-8deg); }
.mv-image { position: relative; flex: 1; border: 1px solid rgba(255, 255, 255, .3); background:
  linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 33.33% 0 / 1px 100% no-repeat,
  linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 66.66% 0 / 1px 100% no-repeat,
  linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 0 33.33% / 100% 1px no-repeat,
  linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 0 66.66% / 100% 1px no-repeat; }
.mv-image::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 1px solid #FF6B6B; }
.mv-pistes { display: grid; gap: 6px; }
.mv-piste { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; font-size: .66rem; font-weight: 700; color: rgba(255, 255, 255, .6); }
.mv-piste i { display: block; height: 14px; position: relative; }
.mv-piste i::before, .mv-piste i::after { content: ''; position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, .28); }
.mv-piste i::before { left: 0; width: 46%; }
.mv-piste i::after { left: 50%; width: 38%; }
.mv-piste--rouge i::after { background: var(--red, #AE0000); }
.mv-tete { position: relative; }
.mv-tete::after { content: ''; position: absolute; left: 62%; top: -4px; bottom: -4px; width: 2px; background: #FF6B6B; }

/* ── M2 · Realisations : le site client qui defile dans son cadre ─────────
 * La capture (800 x 1800, scripts/capture-realisations.mjs) remplace la
 * vignette seulement la ou elle peut defiler. Ailleurs elle n'est meme pas
 * telechargee (display: none sur une image paresseuse). */
.mv-folio-defile { display: none; }

/* ── Le mouvement lie au defilement : seulement la ou le navigateur sait ─── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* L'iceberg : la ligne se trace, puis chaque couche cachee s'ouvre. */
    .mv-iceberg-ligne { transform-origin: left center; animation: mv-filet linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    .mv-iceberg-bas li { animation: mv-coupe linear both; animation-timeline: view(); animation-range: entry 60% cover 42%; }

    /* L'anneau se ferme pendant la lecture des six etapes. */
    .mv-cycle { view-timeline-name: --mv-cycle; }
    .mv-anneau .mv-anneau-trait { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mv-anneau linear both; animation-timeline: --mv-cycle; animation-range: entry 55% exit 45%; }

    /* Le cadre : quatre plans, quatre coupes franches, au fil du passage du
       cadre dans l'ecran. Pas de fondu : une coupe. */
    .mv-cadre { view-timeline-name: --mv-cadre; }
    .mv-plan { animation-timeline: --mv-cadre; animation-range: entry 70% exit 30%; animation-fill-mode: both; animation-timing-function: linear; }
    .mv-plan:nth-child(1) { animation-name: mv-plan-1; }
    .mv-plan:nth-child(2) { animation-name: mv-plan-2; }
    .mv-plan:nth-child(3) { animation-name: mv-plan-3; }
    .mv-plan:nth-child(4) { animation-name: mv-plan-4; }

    /* Le cadre garde exactement la taille de la vignette (800 x 517) : rien ne
       bouge autour. La capture y descend pendant que la carte traverse l'ecran.
       -71,28 % = 1 - 517 / 1800 : le bas de la capture arrive au bas du cadre. */
    /* overflow: clip et non hidden, sur le cadre ET sur sa carte : hidden fait de
       l'element un conteneur de defilement, et la frise mesurait alors la
       position du cadre DANS la carte, donc une valeur constante. Constate le
       2026-09-26 : la capture restait figee a mi-hauteur. clip rogne pareil. */
    .st-folio-card:has(> .mv-folio), .home-folio-card:has(> .mv-folio) { overflow: clip; }
    .mv-folio { position: relative; overflow: clip; aspect-ratio: 800 / 517; view-timeline-name: --mv-folio; }
    .mv-folio > picture { display: none; }
    .mv-folio > .mv-folio-defile { display: block; position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; animation: mv-defile linear both; animation-timeline: --mv-folio; animation-range: cover 12% cover 88%; }
  }
}
@keyframes mv-defile { from { transform: translateY(0); } to { transform: translateY(-71.28%); } }
@keyframes mv-anneau { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mv-plan-1 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes mv-plan-2 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mv-plan-3 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes mv-plan-4 { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }