:root{
  --ink:#101116;
  --ink-2:#181A22;
  --ink-3:#22242E;
  --blue:#2E4684;
  --blue-deep:#16234A;
  --blue-light:#7E96C5;
  --paper:#ECEDF2;
  --grey:#787C89;
  --grey-dim:#4B4E5A;
  --gap:clamp(20px, 4vw, 48px);
  --maxw:1320px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--blue); color:var(--paper);}
a{color:inherit;}

.mono{font-family:'JetBrains Mono',monospace; letter-spacing:0.02em;}
.display{font-family:'Bebas Neue',sans-serif; letter-spacing:0.01em; line-height:0.92; font-weight:400;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gap); padding-right:var(--gap);}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:3px;
}

/* ============ SPROCKET DIVIDER ============ */
.sprocket-row{
  display:flex;
  justify-content:space-between;
  padding:14px var(--gap);
  max-width:var(--maxw);
  margin:0 auto;
}
.sprocket-row span{width:8px; height:8px; border-radius:2px; background:var(--ink-3); flex:0 0 auto;}
.sprocket-row span.on{background:var(--blue);}

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background-color .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.solid{
  background:rgba(16,17,22,0.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--ink-3);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gap); max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{width:26px; height:auto; display:block;}
.brand-word{font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:0.04em;}
.brand-word b{color:#3858A1; font-weight:400;}

.nav-right{display:flex; align-items:center; gap:clamp(18px,3vw,32px);}

nav.links{display:flex; gap:clamp(18px,3vw,40px); list-style:none; margin:0; padding:0;}
nav.links a{
  text-decoration:none; font-size:13px; letter-spacing:0.08em; color:var(--paper);
  display:flex; gap:8px; align-items:baseline; padding:4px 0; position:relative;
}
nav.links a .idx{font-family:'JetBrains Mono',monospace; color:var(--blue-light); font-size:11px;}
nav.links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--blue-light); transition:right .25s ease;
}
nav.links a:hover::after{right:0;}
nav.links a.current{color:var(--blue-light);}

/* ============ MENU TOGGLE + DROPDOWN PANEL (clapperboard) ============ */
.menu-toggle{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--ink-3);
  color:var(--paper); cursor:pointer; padding:8px 12px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
  transition:border-color .2s ease, color .2s ease;
}
.menu-toggle:hover{border-color:var(--blue-light); color:var(--blue-light);}
.menu-icon{display:flex; flex-direction:column; gap:3px; width:16px;}
.menu-icon span{display:block; height:1.5px; background:currentColor; transition:transform .25s ease, opacity .25s ease;}
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}

.menu-backdrop{
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.menu-backdrop.open{opacity:1; pointer-events:auto;}

.menu-panel{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:var(--ink-2); border-bottom:1px solid var(--ink-3);
  transform:scaleY(0); transform-origin:top;
  opacity:0; visibility:hidden;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, visibility 0s linear .38s;
  padding:100px var(--gap) 40px;
}
.menu-panel.open{
  transform:scaleY(1); opacity:1; visibility:visible;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.menu-clap-bar{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--blue-light);
  transform:scaleX(0); transform-origin:left;
}
.menu-panel.open .menu-clap-bar{ animation:clapSweep .5s .05s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes clapSweep{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

.menu-links{max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:0;}
.menu-links a{
  display:flex; align-items:baseline; gap:18px;
  text-decoration:none; color:var(--paper);
  font-family:'Bebas Neue',sans-serif; font-size:clamp(34px,5.5vw,64px);
  text-transform:uppercase;
  padding:14px 0; border-bottom:1px solid var(--ink-3);
  opacity:0; transform:translateY(10px);
}
.menu-panel.open .menu-links a{ animation:menuItemIn .4s ease forwards; }
.menu-panel.open .menu-links a:nth-child(1){ animation-delay:.14s; }
.menu-panel.open .menu-links a:nth-child(2){ animation-delay:.22s; }
@keyframes menuItemIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.menu-links a .idx{font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--blue-light);}
.menu-links a:hover{color:var(--blue-light);}
@media (prefers-reduced-motion: reduce){
  .menu-panel, .menu-links a, .menu-clap-bar{animation:none !important; transition:none !important;}
}

/* ============ HERO (home) ============ */
.hero{
  position:relative; min-height:92svh; display:flex; flex-direction:column;
  justify-content:center; padding-top:0; overflow:hidden;
}
.letterbox{position:absolute; left:0; right:0; height:14vh; background:#000; z-index:5;}
.letterbox.top{top:0;}
.letterbox.bottom{bottom:0;}
.letterbox.top{animation:openBarsTop 1.1s .15s cubic-bezier(.65,0,.35,1) forwards;}
.letterbox.bottom{animation:openBarsBottom 1.1s .15s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes openBarsTop{from{height:14vh;} to{height:0;}}
@keyframes openBarsBottom{from{height:14vh;} to{height:0;}}
@media (prefers-reduced-motion: reduce){ .letterbox{display:none;} }

.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 20% 15%, rgba(46,70,132,0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 85%, rgba(22,35,74,0.4), transparent 60%),
    var(--ink);
  z-index:0;
}
.grain{
  position:absolute; inset:0; opacity:0.05; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--gap); width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.hero-text{max-width:680px; margin-top:56px;}
.eyebrow{
  position:fixed; top:88px; left:var(--gap); z-index:60;
  display:flex; align-items:center; gap:10px; color:var(--blue-light); font-size:12px;
  background:rgba(16,17,22,0.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--ink-3); padding:7px 12px;
}
.eyebrow .rec{width:8px; height:8px; border-radius:50%; background:#E04B4B; flex:0 0 auto;}
@media (prefers-reduced-motion: no-preference){ .eyebrow .rec{animation:pulse 1.6s ease-in-out infinite;} }
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}
@media (max-width:600px){ .eyebrow{top:76px;} }

h1.hero-title{font-size:clamp(34px, 9vw, 128px); line-height:0.95; margin:0 0 24px; text-transform:uppercase;}
h1.hero-title .line1{white-space:nowrap; display:block;}
h1.hero-title .line2{color:var(--blue-light); display:block;}
.hero-sub{max-width:560px; color:var(--grey); font-size:clamp(15px,1.6vw,18px); margin-bottom:40px;}

.cta{
  display:inline-flex; align-items:center; gap:12px; background:var(--blue); color:var(--paper);
  text-decoration:none; padding:16px 28px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--blue); transition:background-color .2s ease, color .2s ease; cursor:pointer;
}
.cta:hover{background:transparent; color:var(--blue-light);}
.cta .play{width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor;}

.tool-badges{
  display:flex; flex-direction:column; align-items:center; gap:18px; flex:0 0 auto;
}
.tool-badges .tb-label{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grey);
  letter-spacing:0.08em; writing-mode:vertical-rl; transform:rotate(180deg); margin-bottom:6px;
}
.tool-badge{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:10px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:19px; color:#fff;
  background:var(--tb-color, var(--blue));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
@media (max-width:860px){
  .hero-content{flex-direction:column; align-items:flex-start;}
  .tool-badges{flex-direction:row; align-items:center;}
  .tool-badges .tb-label{writing-mode:horizontal-tb; transform:none; margin-bottom:0; margin-right:4px;}
  .tool-badge{width:40px; height:40px; font-size:14px; border-radius:7px;}
}

/* ============ PAGE HEADER (travail / à propos) ============ */
.page-hero{
  position:relative;
  padding:170px var(--gap) 60px;
  max-width:var(--maxw);
  margin:0 auto;
  overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 80% 55% at 15% 0%, rgba(46,70,132,0.28), transparent 60%),
    var(--ink);
}
.page-eyebrow{font-family:'JetBrains Mono',monospace; color:var(--blue-light); font-size:13px; display:block; margin-bottom:16px;}
h1.page-title{font-size:clamp(40px,7vw,88px); margin:0 0 18px; text-transform:uppercase;}
.page-meta{color:var(--grey); font-size:15px; max-width:460px;}

/* ============ RENDER BAR (page-load, video-export style) ============ */
.render-bar{max-width:320px; margin-bottom:28px;}
.render-track{position:relative; height:3px; background:var(--ink-3); overflow:hidden; margin-bottom:8px;}
.render-fill{
  position:absolute; top:0; left:0; bottom:0; width:0%;
  background:var(--blue-light);
  animation:renderFill 1.6s .2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes renderFill{ from{width:0%;} to{width:100%;} }
.render-label{position:relative; font-size:11px; letter-spacing:0.06em; height:14px; overflow:hidden;}
.render-label span{position:absolute; left:0; top:0; opacity:0; color:var(--grey);}
.render-label .rl-1{ animation:renderLabel1 1.6s .2s steps(1) forwards; opacity:1; }
.render-label .rl-2{ animation:renderLabel2 .3s 1.8s ease forwards; }
@keyframes renderLabel1{ 0%,88%{opacity:1;} 100%{opacity:0;} }
@keyframes renderLabel2{ from{opacity:0;} to{opacity:1; color:var(--blue-light);} }
@media (prefers-reduced-motion: reduce){
  .render-fill{animation:none; width:100%;}
  .render-label .rl-1{display:none;}
  .render-label .rl-2{opacity:1; animation:none;}
}

/* Photo wipes in like footage loading into frame, on page load (not scroll-dependent) */
.film-in{
  clip-path:inset(0 100% 0 0);
  animation:filmWipeIn .9s .3s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes filmWipeIn{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
@media (prefers-reduced-motion: reduce){
  .film-in{clip-path:none; animation:none;}
}

/* ============ SECTION SHELL ============ */
section{padding:80px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap;}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:0.9fr 1.3fr; gap:var(--gap); align-items:start;}
.about-photo{
  position:relative;
  position:sticky;
  top:110px;
  overflow:hidden;
  border:1px solid var(--ink-3);
  aspect-ratio:3/4;
}
.about-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.about-photo .about-photo-tag{
  position:absolute; bottom:12px; left:12px; z-index:2;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em;
  color:var(--paper); background:rgba(16,17,22,0.6); border:1px solid rgba(236,237,242,0.25);
  padding:3px 7px;
}
.about-right{display:flex; flex-direction:column; min-width:0;}
.about-text{position:relative; padding-left:24px; border-left:2px solid var(--blue);}
.about-text p{font-size:clamp(19px,2.1vw,25px); line-height:1.35; color:var(--paper); font-weight:600; letter-spacing:-0.01em; max-width:640px; margin:0 0 20px;}
.about-text p.dim{color:var(--grey); font-size:15.5px; font-weight:400; line-height:1.7; letter-spacing:0;}

.about-video-slot{
  position:relative;
  margin-top:32px; margin-left:26px;
  aspect-ratio:16/9;
  width:100%;
  max-width:640px;
  border:1px dashed var(--ink-3);
  background:linear-gradient(160deg, #1E3364, #101116 75%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
}
.about-video-slot .noise{
  position:absolute; inset:0; opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.about-video-slot iframe{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; border:0;
}
.about-video-slot .play-btn{
  position:relative; z-index:2; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(236,237,242,0.5); display:flex; align-items:center; justify-content:center;
  background:rgba(46,70,132,0.25);
}
.about-video-slot .play-btn .tri{width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid var(--paper); margin-left:3px;}
.video-slot-label{
  position:absolute; bottom:12px; left:12px; z-index:2;
  color:var(--grey); font-size:10px; letter-spacing:0.08em;
  background:rgba(16,17,22,0.55); border:1px solid rgba(236,237,242,0.2); padding:3px 7px;
}

/* Ambient editing-cursor filler, standalone strip below the tools list */
.scrub-filler{max-width:520px; margin-top:36px; padding-top:24px; border-top:1px solid var(--ink-3);}
.scrub-track{position:relative; height:2px; background:var(--ink-3); margin-bottom:10px; overflow:visible;}
.scrub-head{
  position:absolute; top:50%; left:0%; width:10px; height:10px; border-radius:50%;
  background:var(--blue-light); transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(126,150,197,0.15);
  animation:scrubMove 5s ease-in-out infinite;
}
.scrub-head::before{
  content:''; position:absolute; left:50%; top:-28px; bottom:-28px; width:1px;
  background:var(--blue-light); opacity:0.35; transform:translateX(-50%);
}
@keyframes scrubMove{ 0%,100%{left:0%;} 50%{left:100%;} }
.scrub-tc{color:var(--grey-dim); font-size:11px;}
@media (prefers-reduced-motion: reduce){ .scrub-head{animation:none; left:30%;} }

.tools-simple{margin-top:56px; padding-top:24px; border-top:1px solid var(--ink-3);}
.tools-simple .tools-label{
  display:block; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grey);
  letter-spacing:0.08em; margin-bottom:10px;
}
.tools-simple .tools-list{color:var(--blue-light); font-size:14px; letter-spacing:0.02em;}

@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;}
  .about-photo{max-width:340px; position:static;}
  .about-text{margin-top:24px;}
}

/* ============ WORK — masonry via columns ============ */
.work-grid{column-count:3; column-gap:var(--gap);}
@media (max-width:1000px){ .work-grid{column-count:2;} }
@media (max-width:620px){ .work-grid{column-count:1;} }

.reel{
  break-inside:avoid; margin-bottom:var(--gap); display:block; text-decoration:none; color:inherit;
  border:1px solid var(--ink-3); background:var(--ink-2); overflow:hidden; position:relative;
}
.reel-frame{position:relative; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.reel-frame::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, var(--frame-a,#1E3364), var(--frame-b,#101116) 75%);
  transition:transform .5s ease;
}
.reel:hover .reel-frame::before{transform:scale(1.06);}
.reel-frame video, .reel-frame iframe{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  border:0; background:transparent;
}
.reel-frame .noise{
  position:absolute; inset:0; opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.play-btn{
  position:relative; z-index:2; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(236,237,242,0.5); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.85); transition:opacity .25s ease, transform .25s ease, background-color .25s ease;
}
.reel:hover .play-btn{opacity:1; transform:scale(1); background:rgba(46,70,132,0.35);}
.play-btn .tri{width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid var(--paper); margin-left:3px;}
.ar-badge{
  position:absolute; top:12px; right:12px; z-index:2; font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--paper); background:rgba(16,17,22,0.55); border:1px solid rgba(236,237,242,0.25); padding:3px 7px;
}
.reel-body{padding:18px 20px 20px;}
.reel-cat{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--blue-light); text-transform:uppercase; margin-bottom:8px; display:block;}
.reel-title{font-size:19px; font-weight:600; margin:0 0 8px;}
.reel-desc{color:var(--grey); font-size:13.5px; margin:0;}

.ar-169{aspect-ratio:16/9;}
.ar-916{aspect-ratio:9/16;}
.ar-11{aspect-ratio:1/1;}
.ar-219{aspect-ratio:21/9;}

/* ============ FOOTER / CONTACT (every page, compact) ============ */
.site-footer{
  border-top:1px solid var(--ink-3);
  padding:40px 0 24px;
  margin-top:40px;
}
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gap);
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;
}
.footer-contact{display:flex; flex-direction:column; gap:8px;}
.footer-contact span.mono{color:var(--grey); font-size:11px; letter-spacing:0.08em; margin-bottom:2px;}
.footer-contact a{text-decoration:none; font-size:15px;}
.footer-contact a:hover{color:var(--blue-light);}
.footer-links{display:flex; gap:16px;}
.footer-meta{display:flex; flex-direction:column; gap:6px; align-items:flex-end; color:var(--grey-dim); font-size:11px; text-align:right;}
@media (max-width:600px){ .footer-inner{flex-direction:column; align-items:flex-start;} .footer-meta{align-items:flex-start; text-align:left;} }

.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============ EDITOR TIMELINE ============ */
.editor{background:var(--ink-2); border-top:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3); padding:0 0 4px;}
.editor-topbar{display:flex; justify-content:space-between; align-items:center; padding:14px var(--gap); max-width:var(--maxw); margin:0 auto; font-size:11px; color:var(--grey); letter-spacing:0.06em;}
.editor-topbar .editor-tc{color:var(--blue-light); font-size:15px;}
.editor-body{max-width:var(--maxw); margin:0 auto; padding:0 var(--gap) 20px;}
.timeline-ruler{position:relative; height:22px; border-bottom:1px solid var(--ink-3); margin-bottom:2px;}
.timeline-ruler .tick{position:absolute; top:0; bottom:0; display:flex; align-items:flex-end; font-size:9px; color:var(--grey-dim); border-left:1px solid var(--ink-3); padding-left:4px;}
.timeline-tracks{position:relative;}
.track-row{display:flex; align-items:stretch; border-bottom:1px solid var(--ink-3);}
.track-label{flex:0 0 46px; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--grey); background:var(--ink); border-right:1px solid var(--ink-3);}
.track-lane{position:relative; flex:1 1 auto; height:38px; background:repeating-linear-gradient(90deg, transparent, transparent calc(100%/16 - 1px), rgba(236,237,242,0.03) calc(100%/16));}
.clip{position:absolute; top:5px; bottom:5px; border-radius:2px; display:flex; align-items:center; padding:0 8px; font-size:9px; letter-spacing:0.04em; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset 0 0 0 1px rgba(236,237,242,0.08);}
.clip-main{background:linear-gradient(180deg, var(--blue), var(--blue-deep));}
.clip-broll{background:#2C2F3B;}
.waveform-lane{display:flex; align-items:center; gap:2px; padding:0 8px;}
.waveform-lane .bar{flex:0 0 auto; width:2px; background:var(--grey-dim); border-radius:1px;}
.playhead{position:absolute; top:0; bottom:0; width:2px; background:var(--blue-light); z-index:5; cursor:ew-resize; touch-action:none;}
.playhead::before{content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--blue-light);}
.playhead-handle{position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:14px; height:14px;}
@media (max-width:720px){ .editor-body{overflow-x:auto;} .timeline-ruler, .timeline-tracks{min-width:640px;} }

/* ============ PAGE TRANSITIONS (montage-inspired) ============ */
#pageTransition{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
#pageTransition .ov-panel{
  position:absolute; inset:0; background:var(--blue);
}
#pageTransition .ov-label{
  position:relative; z-index:2; font-family:'JetBrains Mono',monospace;
  font-size:13px; letter-spacing:0.12em; color:var(--paper); opacity:0;
}

/* WIPE — used for TRAVAIL */
#pageTransition.wipe-cover .ov-panel{
  clip-path:inset(0 100% 0 0);
  animation:wipeCover .42s cubic-bezier(.65,0,.35,1) forwards;
}
#pageTransition.wipe-cover .ov-label{ animation:labelIn .2s .18s ease forwards; }
@keyframes wipeCover{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
#pageTransition.wipe-reveal .ov-panel{
  clip-path:inset(0 0 0 0);
  animation:wipeReveal .48s .05s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes wipeReveal{ from{clip-path:inset(0 0 0 0);} to{clip-path:inset(0 0 0 100%);} }

/* DISSOLVE — used for À PROPOS */
#pageTransition.dissolve-cover .ov-panel{
  background:var(--ink); opacity:0;
  animation:fadeIn .38s ease forwards;
}
#pageTransition.dissolve-cover .ov-label{ animation:labelIn .2s .16s ease forwards; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
#pageTransition.dissolve-reveal .ov-panel{
  background:var(--ink); opacity:1;
  animation:fadeOut .5s .05s ease forwards;
}
@keyframes fadeOut{ from{opacity:1;} to{opacity:0;} }

/* CUT — used for retour ACCUEIL */
#pageTransition.cut-cover .ov-panel{ background:#000; opacity:0; animation:cutFlash .14s linear forwards; }
@keyframes cutFlash{ from{opacity:0;} to{opacity:1;} }
#pageTransition.cut-reveal .ov-panel{ background:#000; opacity:1; animation:cutFlashOut .22s linear forwards; }
@keyframes cutFlashOut{ from{opacity:1;} to{opacity:0;} }

@keyframes labelIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

@media (prefers-reduced-motion: reduce){
  #pageTransition{display:none !important;}
}