/* ==========================================================================
   ein-suite.css — page EIN, après EDIT ICONIC NORMS :
   la scène ASCII 3D (toile WebGL) puis la présentation des photos.
   Tout est rangé sous .ein-suite / .es-* pour ne pas toucher à la page Framer.
   ========================================================================== */
@font-face { font-family: "Inter 143"; src: url("../fonts/inter-143.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Uncut Sans 143"; src: url("../fonts/uncut-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* la plaine de neige 3D (Three.js) : sous le titre ASCII, apparaît en fondu derrière lui */
.es-neige { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147480999; pointer-events: none; visibility: hidden; opacity: 0; }
.ein-suite .es-credit { position: relative; z-index: 2; margin-top: 10px; color: var(--gris); font-size: 9px; opacity: .7; }

/* la scène ASCII : posée sur la page Framer, sous la galerie et le menu */
.es-scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147481000; pointer-events: none; visibility: hidden; }

.ein-suite {
  --noir: #050818; --papier: #eceaff; --gris: rgba(220,218,255,.5); --lav: #b9aaf5; --glace: #cfe0ff;
  --mono: "Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --marge: clamp(16px, 2.2vw, 34px);
  --ease: cubic-bezier(.22,.61,.36,1);
  position: relative; z-index: 2147481500;
  background: transparent; color: var(--papier);
  font: 400 11px/1.75 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--marge);
  overflow-x: clip; overflow-y: visible;
}
.ein-suite *, .ein-suite *::before, .ein-suite *::after { box-sizing: border-box; }
.ein-suite p, .ein-suite figure, .ein-suite h2 { margin: 0; }
.ein-suite a, .ein-suite button { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
.ein-suite button { background: none; border: 0; padding: 0; cursor: pointer; }

/* en-tête façon ticket */
.es-entete { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2ch; padding: 22vh 0 14px; border-bottom: 1px solid rgba(207,224,255,.14); }
.es-entete p { white-space: pre; }
.es-entete p:nth-child(2) { color: var(--papier); }
.es-entete p:nth-child(3) { justify-self: end; color: var(--gris); }
.es-entete p:nth-child(1) { color: var(--gris); }

/* la phrase */
.es-phrase { position: relative; z-index: 2; margin: 16vh 0 18vh; text-align: center; }
.es-phrase h2 {
  font: 800 clamp(48px, 9.4vw, 190px)/.86 "Uncut Sans 143", "Arial Narrow", sans-serif;
  letter-spacing: -.02em; transform: scaleX(.62) scaleY(1.25); transform-origin: center top;
  filter: blur(1.2px); color: #eef0ff; text-shadow: 0 0 40px rgba(150,130,255,.35);
}
.es-phrase h2 span { display: inline-block; opacity: 0; transform: translateY(40%); filter: blur(10px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.es-phrase.est-visible h2 span { opacity: 1; transform: none; filter: blur(0); }
.es-phrase p { margin-top: 4vh; color: var(--gris); }

/* grille éditoriale */
.es-grille { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.4vw; row-gap: 16vh; align-items: start; }
.es-fig { grid-column: var(--c); margin-top: var(--d, 0); will-change: transform; position: relative; }
.es-cadre { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4/5); background: #0a0e2a; z-index: 1;
  clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(.7,0,.2,1); }
.es-cadre img, .es-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.28) translateY(5%); transition: transform 2.4s cubic-bezier(.2,.6,.2,1), filter .6s var(--ease); filter: saturate(.92) contrast(1.02); }
.es-fig.est-visible .es-cadre { clip-path: inset(0 0 0 0); }
.es-fig.est-visible .es-cadre img, .es-fig.est-visible .es-cadre video { transform: scale(1.0001); }
.es-fig:hover .es-cadre img, .es-fig:hover .es-cadre video { transform: scale(1.04); filter: saturate(1.05); transition-duration: 1.2s, .6s; }
/* ligne de scan qui balaie l'image à son arrivée */
.es-cadre::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(207,224,255,.9); box-shadow: 0 0 16px rgba(160,140,255,.8); opacity: 0; z-index: 2; }
.es-fig.est-visible .es-cadre::after { animation: es-scan 1.5s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes es-scan { 0% { top: 100%; opacity: 1; } 92% { opacity: 1; } 100% { top: 0; opacity: 0; } }
/* coins de cadrage */
.es-cadre i { position: absolute; width: 10px; height: 10px; border: 1px solid rgba(207,224,255,.65); z-index: 2; opacity: 0; transition: opacity .6s 1.2s; }
.es-cadre i:nth-of-type(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.es-cadre i:nth-of-type(2) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.es-fig.est-visible .es-cadre i { opacity: 1; }

.es-legende { display: flex; gap: 0; margin-top: 12px; white-space: pre; color: var(--gris); min-height: 1.75em; }
.es-legende b { font-weight: 400; color: var(--papier); }

/* bandeau qui défile */
.es-bandeau { position: relative; z-index: 2; margin: 18vh calc(-1 * var(--marge)); padding: 3vh 0; border-top: 1px solid rgba(207,224,255,.1); border-bottom: 1px solid rgba(207,224,255,.1); overflow: hidden; white-space: nowrap; }
.es-bandeau div { display: inline-block; will-change: transform;
  font: 800 clamp(40px, 7vw, 140px)/1 "Uncut Sans 143", "Arial Narrow", sans-serif; letter-spacing: -.01em;
  transform-origin: left center; color: transparent; -webkit-text-stroke: 1px rgba(185,170,245,.5); }
.es-bandeau span { display: inline-block; transform: scaleX(.6); transform-origin: left center; }
.es-bandeau em { font-style: normal; color: #cfe0ff; -webkit-text-stroke: 0; filter: blur(1px); }

.es-compteur { position: relative; z-index: 2; display: flex; justify-content: space-between; margin: 20vh 0 0; padding-top: 12px; border-top: 1px solid rgba(207,224,255,.14); color: var(--gris); }

/* menu de fin (repris de style.css) */
.ein-suite .fin { position: relative; z-index: 2; padding: 26vh 0 14vh; font-size: clamp(11px, .85vw, 14px); }
.ein-suite .fin__menu { display: flex; align-items: center; gap: 1.2ch; white-space: nowrap; }
.ein-suite .fin__menu > i { flex: 1; min-width: 2ch; height: 1em;
  background: radial-gradient(circle, rgba(237,237,234,.4) 1px, transparent 1.3px) 0 70% / 7px 7px repeat-x; }
.ein-suite .fin__item { position: relative; }
.ein-suite .fin__titre { transition: color .3s; }
.ein-suite .fin__menu:has(.est-ouverte) .fin__item:not(.est-ouverte) .fin__titre { color: var(--gris); }
.ein-suite .fin__sous { position: absolute; left: 0; top: 100%; list-style: none; margin: 0; padding: 10px 0 0; display: none; }
.ein-suite .fin__item--droite .fin__sous { left: auto; right: 0; }
.ein-suite .fin__item.est-ouverte .fin__sous { display: block; }
.ein-suite .fin__sous { min-width: 28ch; }
.ein-suite .fin__sous li { min-height: 1.9em; }
.ein-suite .fin__sous a { display: flex; white-space: pre; color: var(--gris); transition: color .25s; line-height: 1.9; }
.ein-suite .fin__sous a:hover, .ein-suite .fin__sous a:focus-visible { color: var(--papier); }
.ein-suite .fin__sous .sous__qte { color: var(--papier); }

@media (max-width: 760px) {
  .ein-suite { font-size: 10px; }
  .es-entete { grid-template-columns: 1fr; gap: 4px; padding-top: 16vh; }
  .es-entete p:nth-child(3) { justify-self: start; }
  .es-grille { grid-template-columns: repeat(6, 1fr); row-gap: 9vh; }
  .es-fig { grid-column: var(--cm, 1 / -1) !important; margin-top: 0 !important; }
  .es-phrase h2 { transform: scaleX(.7) scaleY(1.2); }
  .ein-suite .fin__menu { flex-wrap: wrap; row-gap: 14px; white-space: normal; }
  .ein-suite .fin__menu > i { flex-basis: 3ch; }
  .ein-suite .fin__sous { position: static; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .es-cadre { clip-path: none; transition: none; }
  .es-cadre img, .es-cadre video { transform: none; transition: none; }
  .es-phrase h2 span { opacity: 1; transform: none; filter: none; }
}


/* ---- glitch à l'apparition des photos : tranches décalées, aberration chromatique ---- */
.es-fig.est-visible .es-cadre img, .es-fig.est-visible .es-cadre video { animation: es-glitch .9s steps(1, end) .15s 1 both; }
@keyframes es-glitch {
  0%   { clip-path: inset(0 0 62% 0); transform: translateX(-2.4%) scale(1.04); filter: saturate(1.6) hue-rotate(-25deg); }
  14%  { clip-path: inset(38% 0 30% 0); transform: translateX(2.2%) scale(1.04); filter: saturate(1.4) hue-rotate(20deg); }
  28%  { clip-path: inset(0 0 0 0); transform: translateX(-.8%) scale(1.02); filter: saturate(1.2) hue-rotate(-8deg); }
  42%  { clip-path: inset(70% 0 0 0); transform: translateX(1.6%) scale(1.03); filter: saturate(1.5) hue-rotate(35deg); }
  56%  { clip-path: inset(0 0 0 0); transform: none; filter: saturate(.92); }
  70%  { clip-path: inset(12% 0 55% 0); transform: translateX(-1.2%); filter: saturate(1.3) hue-rotate(-18deg); }
  84%  { clip-path: inset(0 0 0 0); transform: translateX(.4%); filter: none; }
  100% { clip-path: inset(0 0 0 0); transform: none; filter: saturate(.92) contrast(1.02); }
}
/* grain de balayage léger sur les cadres */
.es-cadre::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }

/* ---- lignes de code qui s'écrivent derrière les photos, au bord de la page ---- */
.es-code { position: absolute; z-index: 0; width: 54%; min-width: 240px; margin: 0; pointer-events: none; white-space: pre; overflow: hidden;
  font: 500 clamp(10px, .9vw, 13px)/1.6 var(--mono); letter-spacing: .02em; text-transform: none;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent); }
/* le bloc dépasse de la photo du côté où il y a de la place (la photo le recouvre en partie) */
.es-code--droite { left: 70%; top: 10%; width: 62%; text-align: left; }
.es-code--gauche { right: 70%; top: 10%; width: 62%; text-align: right; }
.es-code--haut { left: 6%; top: -11%; text-align: left; }
.es-code--bas { right: 6%; bottom: -13%; text-align: right; }
.es-code span { display: block; min-height: 1.6em; opacity: 1; text-shadow: -1.5px 0 rgba(255,70,60,.55), 1.5px 0 rgba(60,190,255,.55); }
.es-code span:nth-child(3n) { color: #ff7a63; }
.es-code span:nth-child(3n+1) { color: #66c9ff; }
.es-code span:nth-child(3n+2) { color: #c8b8ff; }
.es-code::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(5,8,24,.3) 0 1px, transparent 1px 3px); }

/* légendes : plus fines, sans ticket */
.es-legende { color: rgba(220,218,255,.55); }
.es-legende b { color: #eceaff; }
@media (max-width: 760px) { .es-code { font-size: 9px; } .es-code--droite { left: 60%; width: 70%; } .es-code--gauche { right: 60%; width: 70%; } }

/* ---- lignes de code blanches (Inter) qui s'écrivent partout pendant que le titre ASCII tourne ---- */
.es-chaos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147481001; pointer-events: none; visibility: hidden; }
/* ---- la toile du datamosh : au-dessus de la galerie, sous le menu et le lecteur ---- */
.es-mosh { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147482000; pointer-events: none; visibility: hidden; }

/* ---- la grille d'images : exactement la disposition du collage (photo 2), chaque photo entière, sans coupe ---- */
.es-bento { position: relative; z-index: 2; margin: 0 calc(-1 * var(--marge)); display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; --g: clamp(6px, .8vw, 14px); padding: var(--g); }
.es-bento__texte { position: sticky; top: 0; height: 100vh; height: 100svh; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding-left: var(--marge); }
.es-bento__codes { position: absolute; inset: 0; pointer-events: none; }
.es-bento__codes .es-code { position: absolute; width: 36vw; white-space: pre; }
.es-bento__g { display: grid; grid-template-columns: 1fr .4718fr; gap: var(--g); flex: 0 0 58vw; width: 58vw; }
/* fond : nuit bleue qui tire vers le noir, bleu glacial, violet lavande, + grain pellicule 35 mm */
.es-fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #02030a 0%, #050a1e 45%, #03050f 100%); }
.es-fond::before { content: ""; position: absolute; inset: -25%; will-change: transform;
  background:
    radial-gradient(48% 44% at 18% 14%, rgba(120,178,238,.50), transparent 70%),
    radial-gradient(44% 46% at 34% 66%, rgba(170,150,240,.46), transparent 70%),
    radial-gradient(50% 40% at 6% 96%, rgba(96,160,230,.36), transparent 72%),
    radial-gradient(56% 52% at 78% 40%, rgba(16,34,112,.85), transparent 74%);
  animation: es-derive 26s ease-in-out infinite alternate; }
@keyframes es-derive { 0% { transform: translate3d(-3%,2%,0) scale(1); } 100% { transform: translate3d(4%,-3%,0) scale(1.1) rotate(4deg); } }
.es-grain { position: fixed; inset: -20%; z-index: 6; pointer-events: none; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  1.6 1.6 1.6 0 -1.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: es-grain 0.9s steps(1) infinite; }
@keyframes es-grain { 0%{transform:translate(0,0)} 17%{transform:translate(-7%,4%)} 33%{transform:translate(5%,-8%)} 50%{transform:translate(-4%,9%)} 67%{transform:translate(8%,3%)} 83%{transform:translate(-9%,-5%)} }
@media (max-width: 760px) { .es-bento { flex-direction: column; } .es-bento__texte { position: relative; height: auto; padding: 14vh 0 6vh var(--marge); } .es-bento__g { flex-basis: auto; width: 100%; } }
.es-bento__i { position: relative; overflow: hidden; background: #0a0e2a; min-height: 0; aspect-ratio: var(--ar); will-change: transform; }
.es-bento__i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.es-bento__i.b1 { grid-column: 1 / -1; }
.es-bento__col { display: flex; flex-direction: column; gap: var(--g); min-height: 0; }
.es-bento__col:last-child .es-bento__i:last-child { aspect-ratio: auto; flex: 1 1 0; }

/* « THE BEAUTY OF THE UNEXPECTED » : Times New Roman, étiré en hauteur comme le EIN de l'intro */
.es-bento__texte .es-phrase { margin: 0; text-align: left; position: relative; z-index: 2; }
.es-bento__texte .es-phrase h2 { display: flex; flex-direction: column; gap: .02em; transform-origin: left center !important; }
.es-bento__texte .es-phrase h2 span { display: block; }
.es-phrase { margin: 26vh 0 22vh; }
.es-phrase h2 { font: 400 clamp(36px, 4.7vw, 96px)/.9 "Times New Roman", Times, "Liberation Serif", serif !important; letter-spacing: -.01em;
  transform: scaleY(1.55) !important; transform-origin: center center !important; filter: blur(.5px) !important; color: #fff !important; text-shadow: none !important; text-transform: uppercase; padding: 4vh 0; }
.es-phrase p { margin-top: 9vh; }
.es-fig:hover .es-cadre img, .es-fig:hover .es-cadre video { transform: scale(1.0001) !important; filter: saturate(1.05); }
/* le code derrière les photos : blanc, en Inter, petit */
.es-code { font-family: "Inter 143", Inter, system-ui, sans-serif !important; font-weight: 400 !important; font-size: clamp(9px, .72vw, 11px) !important; letter-spacing: 0 !important; }
.es-code span, .es-code span:nth-child(3n), .es-code span:nth-child(3n+1), .es-code span:nth-child(3n+2) { color: rgba(255,255,255,.82) !important; text-shadow: -1px 0 rgba(255,255,255,.18), 1px 0 rgba(255,255,255,.12); }

.es-code--marge { width: 120%; z-index: 0; }
.es-code--marge.es-code--gauche { right: 90%; }
.es-code--marge.es-code--droite { left: 90%; }

.es-code--fond { position: absolute; z-index: 0; width: 22vw; white-space: pre; text-align: left; }
.es-fond.gl::before { display: none; }
.es-code--col { position: absolute; z-index: 0; top: 0; bottom: 0; left: -7.5vw; width: 14vw; overflow: hidden; pointer-events: none; }
.es-code--col span { color: rgba(255,255,255,.85) !important; }
/* pas d'ancrage de défilement : le navigateur ne doit jamais décaler la position quand la page change d'un cran (il faussait les seuils du datamosh) */
html, body { overflow-anchor: none; }
.es-phrase.es-direct h2 span { transition: none !important; transition-delay: 0s !important; opacity: 1 !important; transform: none !important; filter: none !important; }

/* ---- PACKAGING après la galerie ---- */
.es-grille, .ein-suite .es-compteur, .ein-suite .fin { display: none; }   /* photos, compteur et pied de page reviendront après PACKAGING */
.es-pack { position: relative; z-index: 2147481600; margin-top: -30vh; background: transparent; }   /* au-dessus de la galerie : son fond fixe passe dessous */
.es-pack__rail { position: relative; }
.es-pack__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.es-pack__fr { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: transparent; color-scheme: normal; }
/* copie de la page dans le cadre : on ne montre que la scène PACKAGING, sur fond transparent, sans barres ni interface en double */
.est-pack, .est-pack body { background: transparent !important; scrollbar-width: none; }
.est-pack ::-webkit-scrollbar { display: none; width: 0; height: 0; }
.est-pack body * { visibility: hidden !important; }
.est-pack [data-framer-name="PACKAGING INTRO"], .est-pack [data-framer-name="PACKAGING INTRO"] *, .est-pack [data-framer-name="SUITE PACKAGING"], .est-pack [data-framer-name="SUITE PACKAGING"] * { visibility: visible !important; }
.est-pack .ui143, .est-pack canvas.es-chaos, .est-pack canvas.es-scene, .est-pack canvas.es-mosh, .est-pack .ein-suite { display: none !important; }

/* ---- animation 3D de la boîte (liée au défilement) ---- */
.es-box{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;pointer-events:none;color:#fff;font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
.es-box__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.es-box__scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0 1px,transparent 1px 4px)}
.es-box__txt{position:absolute;left:5vw;bottom:11vh;width:min(34vw,560px);text-align:center;font:400 clamp(11px,.85vw,15px)/1.55 Arial,Helvetica,sans-serif;letter-spacing:.01em;text-shadow:0 0 18px rgba(0,20,40,.7);opacity:0}
.es-box__l{display:block;min-height:1.55em;white-space:pre-wrap}
.es-box__l--t{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;font-size:.9em;text-transform:uppercase}
.es-box__hud{position:absolute;top:7vh;font:400 clamp(9px,.62vw,12px)/1.7 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;color:rgba(255,255,255,.78)}
.es-box__hud--g{left:4vw}.es-box__hud--d{right:4vw;text-align:right}
.es-box__c{position:absolute;width:22px;height:22px;border:0 solid rgba(255,255,255,.7)}
.es-box__c--a{left:2.5vw;top:4vh;border-width:1px 0 0 1px}.es-box__c--b{right:2.5vw;top:4vh;border-width:1px 1px 0 0}
.es-box__c--c{left:2.5vw;bottom:4vh;border-width:0 0 1px 1px}.es-box__c--d{right:2.5vw;bottom:4vh;border-width:0 1px 1px 0}
@media (max-width:860px){.es-box__txt{left:6vw;width:88vw;bottom:6vh}.es-box__hud--d{display:none}}
.es-box__load{position:absolute;left:50%;bottom:5vh;width:min(260px,40vw);transform:translateX(-50%);font:400 10px/1 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:rgba(255,255,255,.8);text-align:center;transition:opacity .6s ease}
.es-box__load b{display:block;height:1px;margin-bottom:8px;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
/* titre de la galerie un peu plus petit : il ne doit pas toucher la colonne de code */
.es-bento__texte .es-phrase h2 { font-size: clamp(30px, 3.9vw, 78px) !important; }
/* la boîte en vidéo (images clés uniquement), bords fondus dans le fond */
.es-box__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 70% 56% at 50% 48%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 56% at 50% 48%,#000 55%,transparent 100%)}

/* ==========================================================================
   PACKAGING — les photos (pkg.js) : mise en page éditoriale, révélation en matrice de points
   ========================================================================== */
@font-face { font-family: "EIN Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.es-pkg { position: relative; z-index: 2147481600; background: transparent; color: #eaf6ff;
  padding: 22vh 4vw 10vh; font: 400 clamp(9px, .6vw, 11px)/1.7 "EIN Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase; -webkit-font-smoothing: antialiased; }
.es-pkg *, .es-pkg *::before, .es-pkg *::after { box-sizing: border-box; }
.es-pkg__tete { display: flex; justify-content: space-between; gap: 2vw; padding-bottom: 1.4vh; border-bottom: 1px solid rgba(234,246,255,.28); opacity: .85; }
.es-pkg__titre { margin: 9vh 0 14vh; font: 400 clamp(40px, 6.2vw, 128px)/.9 "Times New Roman", Times, "Liberation Serif", serif;
  letter-spacing: -.01em; color: #fff; transform: scaleY(1.55); transform-origin: left top; filter: blur(.4px); white-space: nowrap; }
.es-pkg__titre span { display: inline-block; }
.es-pkg__grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.6vw; row-gap: 0; align-items: start; }
.es-pkg__f { margin: 0; position: relative; }
.es-pkg__cadre { position: relative; width: 100%; overflow: hidden; background: rgba(4,9,20,.35); }
.es-pkg__cadre img, .es-pkg__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inset(0 0 100% 0); }
.es-pkg__cadre canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.es-pkg figcaption { display: flex; justify-content: space-between; gap: 1vw; margin-top: 1.1vh; opacity: .75; }
.es-pkg__note { margin: 0; opacity: .8; line-height: 1.9; }
/* collage : la scène reste épinglée, les images s'y posent une à une et se chevauchent */
.es-pkg__rail { position: relative; margin: 6vh -4vw 0; }
.es-pkg__scene { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.es-pkg__scene .es-pkg__f { position: absolute; will-change: transform, opacity; opacity: 0; visibility: hidden; transform-origin: 50% 50%;
  box-shadow: 0 18px 50px rgba(2,6,20,.35); }
.es-pkg__m { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 100% 0); }
.es-pkg__m img, .es-pkg__m video { position: absolute; object-fit: cover; display: block; clip-path: none; max-width: none; }
.es-pkg__mot { position: absolute; z-index: 30; opacity: 0; font: 400 clamp(9px, .62vw, 12px)/1.6 "EIN Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .02em; text-transform: none; color: #eef7ff; white-space: pre; pointer-events: none;
  text-shadow: 0 0 14px rgba(3,8,24,.55), 0 0 2px rgba(3,8,24,.4); }
@media (max-width: 860px) { .es-pkg { padding: 12vh 4vw 14vh; } .es-pkg__tete span:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .es-pkg__m { clip-path: none; } }

/* lisibilité sur le dôme de lumière glacée du fond */
.es-pkg__tete, .es-pkg figcaption, .es-pkg__note, .es-pkg__titre { text-shadow: 0 0 14px rgba(3,8,24,.55), 0 0 2px rgba(3,8,24,.4); }
.es-pkg__cadre { background: rgba(4,9,20,.62); }
/* les blocs de code posés sur la lumière glacée du bas : écrits en bleu nuit pour rester lisibles */
.es-pkg__mot--sombre { color: #0a1838; text-shadow: 0 0 12px rgba(230,242,255,.6); }

/* fond vidéo de la section photos : fixé, entre le fond dégradé (galerie) et les sections boîte / photos */
.es-vbg { position: fixed; inset: 0; z-index: 2147481550; pointer-events: none; visibility: hidden; }
.es-vbg__fen { position: absolute; inset: 0; overflow: hidden; clip-path: inset(27vh 33vw 27vh 33vw); background: #c9d8ea; }
.es-vbg__fen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; will-change: transform; }
.es-vbg__fen::after { content: ""; position: absolute; inset: 0; pointer-events: none;      /* léger voile : haut un peu plus sombre pour le menu, bords adoucis */
  background: linear-gradient(to bottom, rgba(4,10,26,.35), rgba(4,10,26,0) 22%), radial-gradient(ellipse 85% 85% at 50% 55%, rgba(0,0,0,0) 60%, rgba(4,10,26,.28) 100%); }
.es-vbg__bord { position: absolute; inset: 27vh 33vw; border: 1px solid rgba(234,246,255,.75); box-shadow: 0 0 24px rgba(200,230,255,.35); pointer-events: none; }

/* la marche en ASCII 3D (marche3d) : scène épinglée, la caméra avance au scroll */
.es-marche { position: relative; z-index: 2147481600; background: transparent; }
.es-marche__rail { position: relative; height: 520vh; }
.es-marche__scene { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.es-marche__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 860px) { .es-marche__rail { height: 440vh; } }

/* transition boîte → vidéo (datamosh / scan 3D cassé), au-dessus de la boîte pendant le passage */
.es-glitch { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147481650; pointer-events: none; visibility: hidden; display: block; }

/* la dernière scène : la course en forêt, titre EIN, menu en bas de page */
.es-final { position: relative; z-index: 2147481700; height: 100vh; background: transparent; }
.es-final__cadre { position: sticky; top: 0; height: 100vh; overflow: hidden; clip-path: inset(100% 0 0 0); background: #0b0f17; color: #fff; }
.es-final__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 100%; will-change: transform; }
.es-final__voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 72%, rgba(0,0,0,.55)); }
.es-final__titre { position: absolute; left: 49%; top: 50%; margin: 0; transform: translate(-50%, -50%);   /* repris tel quel de la scène Framer (cadre 1200 px) */
  filter: blur(calc(2 * 100vw / 1200)); -webkit-filter: blur(calc(2 * 100vw / 1200)); opacity: calc(var(--k, 0) * 1.2 - .2); }
.es-final__titre span { display: block; font: 100 calc(47 * 100vw / 1200)/1 "Times New Roman", Times, "Liberation Serif", serif; color: #fff; white-space: nowrap;
  transform: scale(2.45, 7); transform-origin: center center; }
.es-final__g, .es-final__d { position: absolute; top: 9vh; margin: 0; font: 600 clamp(6px, .42vw, 9px)/1.25 Arial, Helvetica, sans-serif; letter-spacing: .02em; color: #fff; text-transform: uppercase; }
.es-final__g { left: 1.2vw; }
.es-final__d { right: 1.2vw; top: 4.5vh; text-align: right; }
.es-final__d i { display: inline-block; width: 6vw; height: 1px; background: rgba(255,255,255,.8); vertical-align: middle; }
.es-final__menu { position: absolute; left: 50%; bottom: 6vh; width: min(60vw, 1150px); transform: translateX(-50%); padding: 0; background: none; }   /* centré, sans dégradé ; place dessous pour les sous-pages */
/* le menu du site (pied de page, fin.js), en petit et minimaliste ; les sous-pages s'ouvrent vers le haut */
.es-final .fin__menu { display: flex; align-items: center; gap: 1ch; white-space: nowrap; color: #ededea;
  font: 400 clamp(9px, .58vw, 11px)/1 "EIN Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.es-final .fin__menu > i { flex: 1; min-width: 2ch; height: 1em; background: radial-gradient(circle, rgba(237,237,234,.35) .7px, transparent 1px) 0 60% / 5px 5px repeat-x; }
.es-final .fin__titre { color: #ededea; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: none; }
.es-final .fin__menu:has(.est-ouverte) .fin__item:not(.est-ouverte) .fin__titre { color: rgba(237,237,234,.45); }
.es-final .fin__item { position: relative !important; }
.es-final .fin__sous { position: absolute; left: 0; top: 100%; bottom: auto; white-space: nowrap; list-style: none; margin: 0; padding: 10px 0 0; min-width: 28ch; display: none; }
.es-final .fin__item.est-ouverte .fin__sous { display: block; }
.es-final .fin__sous li { min-height: 1.8em; }
.es-final .fin__item--droite .fin__sous { left: auto; right: 0; }
.es-final .fin__sous a { color: rgba(237,237,234,.55); line-height: 1.8; text-decoration: none; }
.es-final .fin__sous a:hover { color: #ededea; }
.es-final__menu, .es-final__menu * { visibility: visible !important; }
@media (max-width: 860px) {
  .es-final .fin__menu { flex-wrap: wrap; row-gap: 12px; white-space: normal; justify-content: center; }
  .es-final .fin__menu > i { flex-basis: 2ch; }
  .es-final .fin__sous { position: absolute; top: 100%; bottom: auto; padding-top: 8px; }
  .es-final__menu { width: 92vw; bottom: 14vh; }
  .es-final__g, .es-final__d { font-size: 7px; }
}
.es-final .fin__menu { text-shadow: 0 0 10px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.35); }   /* lisible sur la neige, sans bande noire */
.es-final .fin__menu, .es-final .fin__menu * { pointer-events: auto !important; }   /* un script du site neutralise les anciens menus (« ancien-menu-143 ») : celui-ci doit rester cliquable */
.es-final .fin__menu a[aria-disabled="true"] { cursor: default; pointer-events: none !important; }
/* téléphone : la boîte n'occupe plus tout l'écran (la vidéo 16/9 en « cover » sur un écran en hauteur la grossissait
   énormément) : la vidéo garde ses proportions, plus petite, et ses bords se fondent dans le fond */
@media (max-width:860px){
  .es-box__vid{inset:auto;left:-45vw;width:190vw;top:46%;height:106.875vw;margin-top:-53.44vw;
    -webkit-mask-image:radial-gradient(ellipse 44% 56% at 50% 48%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 44% 56% at 50% 48%,#000 52%,transparent 100%)}
}