/* Animations pixel du site (ADR-003). Reprises telles quelles des maquettes
   validées le 2026-09-27 (docs/maquettes-pixel/situation/) : grille x4,
   mouvement par pas (steps), jouées une fois après un geste ou au premier
   passage. Le code est dans asset/pixel/*.js, un fichier par famille.
   PixeloidSans est réservée à l'intérieur des animations (CLAUDE.md). */
@font-face { font-family: 'PixeloidSans'; src: url('/asset/fonts/PixeloidSans.ttf') format('truetype'); font-display: swap; }

body {
  --px-k: #0b1210; --px-c: #CCE3DE; --px-C: #F6FFF8; --px-d: #7FA39A;
  --px-g: #26302e; --px-G: #9DABA5; --px-b: #0b1210;
  --px-sol: #111615; --px-sol-bord: #1f2826; --px-texte: #F6FFF8; --px-doux: #9DABA5; --px-lueur: #CCE3DE;
}
body.theme-corporate {
  --px-g: #3a4744; --px-d: #2F5D53; --px-sol: #EAF4F4; --px-sol-bord: #CCE3DE;
  --px-texte: #0B1210; --px-doux: #4E5B56; --px-lueur: #2F5D53;
}
.px-police { font-family: PixeloidSans, monospace; -webkit-font-smoothing: none; }
.px-sprite svg { display: block; overflow: visible; }

/* Mouvements partagés */
.px-cahot { animation: px-cahot 240ms steps(1) infinite; }
@keyframes px-cahot { 0% { transform: translateY(0); } 50% { transform: translateY(1px); } }
.px-roue-a { animation: px-clignote 160ms steps(1) infinite; }
.px-roue-b { animation: px-clignote 160ms steps(1) infinite reverse; }
@keyframes px-clignote { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ===== Voile vidéo : clap puis bobine, posé sur le cadre de la vidéo ===== */
.px-voile { position: absolute; inset: 0; z-index: 3; background: #050505; display: grid; place-items: center; transition: opacity 360ms steps(3); }
.px-voile.fini { opacity: 0; pointer-events: none; }
.px-clap { position: relative; width: 144px; height: 132px; }
.px-clap.joue { animation: px-secousse 1400ms steps(1) both; }
.px-clap .px-clap-ouvert { opacity: 1; } .px-clap .px-clap-ferme { opacity: 0; }
.px-clap.joue .px-clap-ouvert { animation: px-ouvert 1400ms steps(1) both; }
.px-clap.joue .px-clap-ferme { animation: px-ferme 1400ms steps(1) both; }
@keyframes px-ouvert { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes px-ferme { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes px-secousse { 0%, 45% { transform: translate(0,0); } 47% { transform: translate(4px,4px); } 50% { transform: translate(-4px,0); } 53% { transform: translate(0,4px); } 56%, 100% { transform: translate(0,0); } }
.px-action { position: absolute; left: calc(100% + 18px); top: 0; font-size: 22px; color: #CCE3DE; opacity: 0; white-space: nowrap; }
.px-clap.joue .px-action { animation: px-action 1400ms both; }
@keyframes px-action { 0%, 46% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.25); } 56%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.px-poussiere { position: absolute; width: 8px; height: 8px; background: #F6FFF8; opacity: 0; }
.px-clap.joue .px-poussiere { animation: px-poussiere 1400ms steps(1) both; }
@keyframes px-poussiere { 0%, 46% { opacity: 0; transform: translate(0,0); } 48% { opacity: 1; } 52% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)); } 58% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 62%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

.px-bobine-bloc { display: grid; justify-items: center; gap: 14px; }
.px-bobine-ligne { display: flex; align-items: flex-end; }
.px-bobine { width: 80px; height: 80px; }
.px-bobine-img { opacity: 0; animation: px-bobine 480ms steps(1) infinite; }
.px-bobine-img.i1 { animation-delay: -360ms; } .px-bobine-img.i2 { animation-delay: -240ms; } .px-bobine-img.i3 { animation-delay: -120ms; }
@keyframes px-bobine { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.px-film { width: 140px; height: 24px; margin-bottom: 6px; background:
  linear-gradient(#26302e, #26302e) 0 7px / 100% 10px no-repeat,
  repeating-linear-gradient(90deg, #9DABA5 0 8px, transparent 8px 16px) 0 2px / 100% 3px no-repeat,
  repeating-linear-gradient(90deg, #9DABA5 0 8px, transparent 8px 16px) 0 19px / 100% 3px no-repeat, #0b1210;
  animation: px-film 480ms steps(4) infinite; }
@keyframes px-film { 0% { background-position: 0 7px, 0 2px, 0 19px, 0 0; } 100% { background-position: 0 7px, 16px 2px, 16px 19px, 0 0; } }
.px-bobine-texte { font-size: 12px; color: #9DABA5; }

/* ===== Les trois de Brunoy : en tête de « Notre histoire » ===== */
.px-brunoy { position: relative; height: 190px; margin: 0 0 2.2rem; overflow: hidden; border-radius: 12px; background: var(--theme-bg-alt, transparent); }
.px-route { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: var(--px-sol); border-top: 3px solid var(--px-sol-bord); }
.px-perso { position: absolute; bottom: 14px; left: -80px; width: 60px; height: 96px; }
.px-perso .px-pas-b { opacity: 0; }
.px-perso.marche .px-pas-a { animation: px-clignote 260ms steps(1) infinite; }
.px-perso.marche .px-pas-b { animation: px-clignote 260ms steps(1) infinite reverse; opacity: 1; }
.px-perso.marche .px-corps { animation: px-cahot 260ms steps(1) infinite; }
.px-nom { position: absolute; bottom: 116px; width: 130px; margin-left: -65px; text-align: center; font-size: 10px; line-height: 1.5; color: var(--px-texte); opacity: 0; }
.px-nom b { display: block; color: var(--px-lueur); font-weight: 400; }
.px-nom.vu { animation: px-nom 400ms steps(4) both; }
@keyframes px-nom { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.px-annee { position: absolute; left: 20px; top: 16px; font-size: 26px; line-height: 1; color: var(--px-texte); }
.px-annee small { display: block; font-size: 10px; color: var(--px-doux); margin-top: 6px; }

/* ===== L'éclipse : dans la bande noire de la citation ===== */
.px-eclipse { position: relative; z-index: 1; width: 160px; height: 160px; margin: 0 auto 2rem; }
.px-eclipse .px-lune { transform: translateX(-30px); }
.px-eclipse .px-couronne, .px-eclipse .px-rayons, .px-eclipse .px-bague { opacity: 0; }
.px-eclipse.joue .px-lune { animation: px-lune 3000ms steps(30) both; }
@keyframes px-lune { 0% { transform: translateX(-30px); } 55%, 100% { transform: translateX(0); } }
.px-eclipse.joue .px-couronne { animation: px-couronne 3000ms steps(1) both; }
@keyframes px-couronne { 0%, 55% { opacity: 0; } 57% { opacity: .5; } 60% { opacity: 1; } 64% { opacity: .6; } 67%, 100% { opacity: 1; } }
.px-eclipse.joue .px-rayons { animation: px-rayons 3000ms both; }
@keyframes px-rayons { 0%, 60% { opacity: 0; } 66%, 100% { opacity: 1; } }
.px-eclipse.joue .px-bague { animation: px-bague 3000ms steps(1) both; }
@keyframes px-bague { 0%, 50% { opacity: 0; } 51%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
.px-scintille rect { animation: px-clignote 700ms steps(1) infinite; }

/* ===== Le van : bande en bas de l'écran après l'envoi ===== */
.px-van-scene { position: fixed; left: 0; right: 0; bottom: 0; height: 150px; z-index: 90; pointer-events: none; overflow: hidden; animation: px-van-scene 2600ms both; }
@keyframes px-van-scene { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.px-van-scene .px-route { height: 22px; animation: px-route 2600ms both; }
@keyframes px-route { 0% { transform: translateY(100%); } 10%, 85% { transform: translateY(0); } 100% { transform: translateY(100%); } }
.px-van { position: absolute; bottom: 12px; width: 128px; height: 64px; animation: px-traverse 2600ms steps(48) both; }
@keyframes px-traverse { 0%, 6% { left: -150px; } 71%, 100% { left: calc(100% + 20px); } }
.px-fumee { position: absolute; left: -6px; top: 40px; width: 9px; height: 9px; background: color-mix(in srgb, var(--px-c) 55%, transparent); animation: px-fumee 500ms steps(4) infinite; }
.px-fumee + .px-fumee { animation-delay: 250ms; top: 44px; }
@keyframes px-fumee { 0% { transform: translate(0,0) scale(1); opacity: .8; } 100% { transform: translate(-22px,-10px) scale(.4); opacity: 0; } }
.px-lettre { position: absolute; bottom: 34px; width: 18px; height: 14px; opacity: 0; animation: px-lettre 800ms steps(8) both; }
@keyframes px-lettre { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 70% { opacity: 1; transform: translateY(-46px); } 100% { opacity: 0; transform: translateY(-62px); } }
.px-panneau { position: absolute; right: 22px; top: 22px; padding: 10px 14px; text-align: right; background: #050505; box-shadow: 0 0 0 2px #0b1210, 0 0 0 4px #CCE3DE; animation: px-panneau 2600ms both; }
@keyframes px-panneau { 0%, 70% { opacity: 0; transform: scale(.6); } 73% { opacity: 1; transform: scale(1.12); } 77%, 100% { opacity: 1; transform: scale(1); } }
.px-panneau .l1 { font-size: 18px; line-height: 1; color: #F6FFF8; }
.px-panneau .l2 { font-size: 11px; color: #9DABA5; margin-top: 6px; }

/* ===== Fondu pixel : la trame couvre l'écran, puis se retire à l'arrivée ===== */
html.px-arrivee::after { content: ''; position: fixed; inset: 0; z-index: 9998; background: var(--px-arrivee, #050505); }
.px-fondu { position: fixed; inset: 0; z-index: 9999; display: grid; pointer-events: none; overflow: hidden; }
.px-fondu i { opacity: 0; }
.px-fondu i.on { opacity: 1; }

/* ===== Le projecteur : une bande noire avant le pied de page ===== */
.px-proj { position: relative; height: 220px; background: #050505; overflow: hidden; border-top: 1px solid rgba(246,255,248,.06); }
.px-proj-machine { position: absolute; left: clamp(16px, 6vw, 80px); bottom: 50px; width: 112px; height: 104px; }
.px-proj-bobine { position: absolute; top: 0; width: 48px; height: 48px; }
.px-proj-bobine:nth-child(2) { left: 56px; }
.px-proj-bobine .px-bobine-img { animation-play-state: paused; }
.px-proj.joue .px-proj-bobine .px-bobine-img { animation-play-state: running; }
.px-proj-corps { position: absolute; left: 4px; right: 4px; bottom: 0; height: 52px; background: #26302e; box-shadow: 0 0 0 3px #0b1210, 0 0 0 5px #9DABA5; }
.px-proj-objectif { position: absolute; right: -18px; bottom: 16px; width: 18px; height: 22px; background: #0b1210; box-shadow: inset -6px 0 0 #CCE3DE; }
.px-proj-faisceau { position: absolute; left: calc(clamp(16px, 6vw, 80px) + 130px); bottom: 20px; height: 180px; width: 0; background: linear-gradient(90deg, rgba(204,227,222,.32), rgba(204,227,222,.06)); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 62%); }
.px-proj.joue .px-proj-faisceau { animation: px-proj-faisceau 700ms steps(8) both 300ms; }
@keyframes px-proj-faisceau { to { width: calc(100% - clamp(16px, 6vw, 80px) - 170px); } }
.px-proj-ecran { position: absolute; right: clamp(20px, 7vw, 120px); bottom: 40px; width: min(280px, 40vw); height: 140px; display: grid; place-content: center; justify-items: center; gap: 12px; opacity: 0; }
.px-proj-ecran img { width: min(200px, 30vw); }
.px-proj-ecran span { font-size: 10px; color: #9DABA5; }
.px-proj.joue .px-proj-ecran { animation: px-proj-grain 1400ms steps(1) both 1000ms; }
@keyframes px-proj-grain { 0% { opacity: 0; } 8% { opacity: .7; } 14% { opacity: .3; } 22% { opacity: 1; } 30% { opacity: .75; } 40%, 100% { opacity: 1; } }

/* ===== Le vu-mètre, posé dans le coin du champ message ===== */
.px-vu-hote { position: relative; }
.px-vu { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 3px; padding: 5px; background: #0b1210; box-shadow: 0 0 0 2px #26302e; pointer-events: none; }
.px-vu-col { display: grid; gap: 2px; }
.px-vu-col i { display: block; width: 12px; height: 5px; background: #1b2322; }
.px-vu-col i.on { background: #7FA39A; }
.px-vu-col i:nth-child(-n+3).on { background: #CCE3DE; }
.px-vu-col i:nth-child(1).on { background: #F6FFF8; }

/* ===== Copié : une pastille pixel par-dessus le bouton, et des étincelles ===== */
.px-copie { position: fixed; z-index: 10; pointer-events: none; display: grid; place-items: center; }
.px-copie-pastille { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; background: #CCE3DE; color: #050505; font-size: 13px; animation: px-copie 1800ms steps(1) both; }
.px-copie-pastille svg { width: 20px; height: 20px; }
@keyframes px-copie { 0% { transform: scale(.7); } 6% { transform: scale(1.08); } 12% { transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }
.px-copie i { position: absolute; left: calc(50% - 6px); top: calc(50% - 6px); width: 12px; height: 12px; animation: px-copie-etinc 600ms steps(4) both; }
@keyframes px-copie-etinc { 0% { opacity: 1; transform: translate(0, 0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* Mouvement réduit : l'état final seulement. Le van et le fondu ne jouent pas
   du tout (les scripts ne les créent pas). */
@media (prefers-reduced-motion: reduce) {
  [class*="px-"], [class*="px-"] * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .px-fondu, html.px-arrivee::after { display: none; }
}

/* Sur téléphone, le cadre vidéo est étroit : ACTION passe au-dessus du clap. */
@media (max-width: 700px) {
  .px-clap { width: 108px; height: 99px; }
  .px-action { left: 50%; top: -38px; margin-left: -52px; font-size: 18px; }
}
/* Sur téléphone, les trois de Brunoy sont à 86 px l'un de l'autre : les noms
   se resserrent et passent à la ligne, la scène grandit pour ne pas toucher
   l'année en haut à gauche. */
@media (max-width: 560px) {
  .px-brunoy { height: 230px; }
  .px-nom { width: 84px; margin-left: -42px; font-size: 9px; }
}

/* ===== Accueil : la route de « Notre approche » (route.js) =====
   Sans JavaScript ou en mouvement réduit : les quatre étapes en liste.
   route.js ajoute .px-route-on : scène fixe, canvas, cartes posées sur la route. */
.px-route { position: relative; padding: var(--section) 0; }
.px-route-tete { text-align: center; transition: opacity .5s; }
.px-route-tete h2 { font-size: clamp(1.4rem, 2.8vw, 2.4rem); text-transform: uppercase; margin-top: .6rem; }
.px-route-cadre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; max-width: var(--container-width); margin: 2.4rem auto 0; padding: 0 var(--gutter); }
.px-route-carte { border-left: 2px solid var(--glow); padding: .5rem 0 .6rem 1.1rem; }
.px-route-carte .px-police { color: var(--glow); font-size: .78rem; }
.px-route-carte h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.1; text-transform: uppercase; margin: .3rem 0 .45rem; text-shadow: 0 0 30px rgba(204,227,222,.3); }
.px-route-carte p { font-size: clamp(.92rem, 1.2vw, 1.05rem); color: #dfe9e5; line-height: 1.5; margin: 0; }
.px-route-fin { grid-column: 1 / -1; text-align: center; margin-top: 1.4rem; }
.px-route-fin p { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 2.4rem); line-height: 1.1; text-transform: uppercase; max-width: 22ch; margin: 0 auto 1.4rem; }
.px-route-pas { display: none; }

.px-route.px-route-on { height: 580vh; padding: 0; }
.px-route-on .px-route-scene { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(.6rem, 2vh, 1.2rem); overflow: hidden; background: #050505; }
.px-route-on .px-route-cadre { display: block; position: relative; width: min(100%, calc((100svh - 240px) * 256 / 120)); margin: 0 auto; padding: 0; }
.px-route-on canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.px-route-on .px-route-carte { position: absolute; top: 4%; width: min(360px, 40%); transform: translateX(-50%); background: rgba(5,5,5,.72); opacity: 0; transition: opacity 360ms steps(4); pointer-events: none; }
.px-route-on .px-route-carte.on { opacity: 1; }
.px-route-on .px-route-fin { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(5,5,5,.9); opacity: 0; transition: opacity .6s; pointer-events: none; }
.px-route-on .px-route-fin.on { opacity: 1; pointer-events: auto; }
.px-route-on .px-route-pas { display: flex; gap: 6px; justify-content: center; }
.px-route-pas i { width: 26px; height: 4px; background: #26302e; transition: background .3s steps(2); }
.px-route-pas i.on { background: var(--glow); }
.px-route-pas i.vu { background: #7FA39A; }

@media (max-width: 760px) {
  .px-route-cadre { grid-template-columns: minmax(0, 1fr); }
  .px-route-on .px-route-cadre { width: 100%; }
  .px-route-on .px-route-carte { position: static; transform: none; width: auto; margin: 1rem var(--gutter) 0; display: none; background: none; }
  .px-route-on .px-route-carte.on { display: block; }
}