:root{
    --bg: #0a0a0a;
    --bg2: #151515;
    --bg3: #1e1e1e;
    --ink: #f5f4f0;
    --muted: #9c9c9c;
    --accent: #f5f4f0;
    --line: rgba(245,244,240,0.12);
    --display: 'Poppins', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  section[id]{ scroll-margin-top:80px; }

  .grain{ position:fixed; inset:0; z-index:998; pointer-events:none; opacity:.035;
    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"); }

  .scroll-progress{ position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:200; width:0%; transition:width .1s linear; }

    body{ background:var(--bg); color:var(--ink); font-family:var(--body); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
  @media (pointer:coarse){ body{ cursor:auto; } }
  ::selection{ background:var(--accent); color:#0a0a0a; }
  a{ color:inherit; text-decoration:none; }
  img,svg,canvas{ -webkit-user-drag:none; user-select:none; }
  body.locked{ overflow:hidden; }
  .ph{ color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.55; }


  header{ position:fixed; top:0; left:0; right:0; z-index:80; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:30px 5vw 0; transition:opacity .4s ease, transform .4s ease; }
  header.header-hidden{ opacity:0; transform:translateY(-16px); pointer-events:none; }
  .logo-mark{ height:20px; width:auto; display:block; justify-self:start; grid-column:1; }
  .nav-inline{ display:flex; gap:22px; justify-self:center; grid-column:2; }
  .nav-inline a{ font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.8; transition:opacity .25s, color .25s; }
  .nav-inline a:hover{ opacity:1; color:var(--accent); }

  /* ---- HERO / full-bleed looping video ---- */
  .hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
  .hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
  .hero-poster{ width:100%; height:100%; object-fit:cover; filter:grayscale(20%) brightness(.68) contrast(1.05); animation:ken-burns 22s ease-in-out infinite alternate; }
  @keyframes ken-burns{ from{ transform:scale(1); } to{ transform:scale(1.12) translate(-1%, -1%); } }
  .hero-loader{ position:absolute; inset:0; z-index:5; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transition:opacity .8s ease, visibility .8s; }
  .hero.loaded .hero-loader{ opacity:0; visibility:hidden; pointer-events:none; }
  .loader-logo{ height:38px; width:auto; animation:loader-pulse 1.4s ease-in-out infinite; }
  .loader-bar{ width:120px; height:2px; background:var(--line); position:relative; overflow:hidden; }
  .loader-bar::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:40%; background:var(--accent); animation:loader-slide 1.1s ease-in-out infinite; }
  @keyframes loader-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
  @keyframes loader-slide{ from{ transform:translateX(-100%); } to{ transform:translateX(350%); } }
  /* le titre attend que la vidéo soit prête avant de s'animer */
  .hero:not(.loaded) h1.kinetic .line span{ animation-play-state:paused; }
  .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(20%) brightness(.68) contrast(1.05); }
  .hero::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.1) 40%, rgba(10,10,10,.95) 100%); }
  .hero-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 5vw; }
  .hero-tag{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
  .hero-tag::before{ content:''; width:28px; height:1px; background:var(--accent); }
  h1.kinetic{ line-height:0; }
  h1.kinetic .line{ display:block; overflow:hidden; }
  h1.kinetic .line span{ display:inline-block; transform:translateY(105%); animation:line-up .9s cubic-bezier(.16,1,.3,1) forwards; }
  h1.kinetic .line:nth-child(2) span{ animation-delay:.08s; }
  .hero-wordmark{ display:block; width:min(80vw, 780px); height:auto; }
  @keyframes line-up{ to{ transform:translateY(0); } }
  .hero-sub{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); position:relative; z-index:2; }
  .hero-socials{ display:flex; gap:16px; justify-content:center; margin-top:30px; position:relative; z-index:2; }
  .hero-socials a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(245,244,240,.3); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color .3s, transform .3s, background .3s; }
  .hero-socials a svg{ width:18px; height:18px; }
  .hero-socials a:hover{ border-color:var(--accent); background:rgba(245,244,240,.08); transform:translateY(-3px); }

  /* ---- rotating contact card (now lives in its own section) ---- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
  .contact-form-lede{ color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:28px; max-width:420px; }
  .contact-form .field{ margin-bottom:18px; }
  .contact-form label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
  .contact-form input, .contact-form textarea{
    width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--ink);
    padding:12px 14px; font-family:var(--body); font-size:14px; border-radius:4px; outline:none; resize:vertical;
  }
  .contact-form input:focus, .contact-form textarea:focus{ border-color:var(--accent); }
  .btn-send{
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    background:var(--accent); color:var(--bg); border:none; padding:13px 30px; border-radius:4px;
    cursor:pointer; transition:opacity .25s; margin-top:6px;
  }
  .btn-send:hover{ opacity:.85; }
  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } }

  .contact-stage{ position:relative; height:56svh; min-height:380px; }
  .contact-glow{ position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(245,244,240,.10), transparent 70%); left:0; top:0; transform:translate(-50%,-50%); pointer-events:none; z-index:0; opacity:0; transition:opacity .4s ease; }
  .contact-stage:hover .contact-glow{ opacity:1; }
  #stage3d{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; cursor:grab; -webkit-perspective:1400px; perspective:1400px; }
  #stage3d.dragging{ cursor:grabbing; }
  #stage3d{ touch-action:pan-y; }
  .card-wrap{ width:min(52vw, 380px); aspect-ratio:1.68/1; position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; will-change:transform; }
  .card-face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform:translateZ(1px); transform:translateZ(1px); -webkit-transform-style:flat; transform-style:flat; border-radius:10px; background:linear-gradient(155deg, #131315 0%, #1b1b1e 100%); color:var(--ink); box-shadow:0 40px 70px -25px rgba(0,0,0,.7); display:flex; flex-direction:column; justify-content:space-between; padding:22px 24px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
  .card-face.back{ -webkit-transform:rotateY(180deg) translateZ(1px); transform:rotateY(180deg) translateZ(1px); }
    .card-corner{ position:absolute; width:16px; height:16px; z-index:1; }
  .card-corner.tl{ top:12px; left:12px; border-top:1.5px solid rgba(255,255,255,.4); border-left:1.5px solid rgba(255,255,255,.4); }
  .card-corner.tr{ top:12px; right:12px; border-top:1.5px solid rgba(255,255,255,.4); border-right:1.5px solid rgba(255,255,255,.4); }
  .card-corner.bl{ bottom:12px; left:12px; border-bottom:1.5px solid rgba(255,255,255,.4); border-left:1.5px solid rgba(255,255,255,.4); }
  .card-corner.br{ bottom:12px; right:12px; border-bottom:1.5px solid rgba(255,255,255,.4); border-right:1.5px solid rgba(255,255,255,.4); }
  .card-eyebrow{ font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); position:relative; z-index:1; }
  .card-mark{ align-self:center; position:relative; z-index:1; }
  .card-mark img{ height:34px; width:auto; display:block; }
  .card-bottom-row{ display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:1; }
  .card-name{ display:block; font-family:var(--body); font-weight:700; font-size:15px; color:var(--ink); line-height:1.3; }
  .card-role{ display:block; font-family:var(--body); font-weight:400; font-size:11px; color:var(--muted); line-height:1.3; margin-top:1px; }
    .card-details{ display:flex; flex-direction:column; gap:9px; width:100%; position:relative; z-index:1; }
  .card-detail{ display:flex; align-items:center; gap:9px; }
  .card-detail svg{ width:13px; height:13px; stroke:var(--accent); flex-shrink:0; }
  .card-detail span{ font-family:var(--body); font-size:11px; color:var(--ink); opacity:.85; }
  .card-qr-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; z-index:1; }
  .card-qr{ width:114px; background:#fff; border-radius:6px; padding:6px; }
  .card-qr svg{ display:block; width:100%; height:auto; }
  .card-qr-label{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
    .tt-hint{ position:absolute; z-index:2; bottom:6%; left:50%; transform:translate(-50%, 0); display:flex; align-items:center; gap:8px; opacity:.6; animation:hint-pulse 1.8s ease-in-out infinite; }
  .tt-hint svg{ width:26px; height:14px; }
  @keyframes hint-pulse{ 0%,100%{ opacity:.35; transform:translate(-50%,0); } 50%{ opacity:.75; transform:translate(-58%,0); } }
  body.tt-active .tt-hint{ display:none; }

  /* ---- social banner (Instagram / TikTok ticker) ---- */    @keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  .section{ padding:120px 5vw; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:64px; border-bottom:1px solid var(--line); padding-bottom:28px; }
  .section-head .tag{ color:var(--accent); opacity:1; margin-bottom:16px; display:block; }
  .section-head h2{ font-family:var(--display); text-transform:uppercase; font-weight:800; font-style:italic; font-size:clamp(30px, 4.2vw, 54px); color:var(--muted); }
  .section-head p{ max-width:280px; }
  
  .works-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; }
  .work-tile{ position:relative; aspect-ratio:4/3; overflow:hidden; display:block; background:var(--bg2); }
  .work-tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.16,1,.3,1); }
  .work-tile:hover img{ transform:scale(1.06); }
  .work-tile-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(10,10,10,0); transition:background .4s ease; padding:20px; }
  .work-tile:hover .work-tile-overlay{ background:rgba(10,10,10,.45); }
  .work-tile-label{ font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:clamp(22px,3vw,34px); color:var(--ink); opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; text-align:center; }
  .work-tile:hover .work-tile-label{ opacity:1; transform:translateY(0); }
  .work-tile-desc{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted); text-align:center; margin-top:8px; opacity:0; transform:translateY(8px); transition:opacity .4s ease .05s, transform .4s ease .05s; }
  .work-tile:hover .work-tile-desc{ opacity:1; transform:translateY(0); }
  @media (max-width:760px){ .works-grid{ grid-template-columns:1fr; } }

  .mosaic{ column-count:2; column-gap:16px; }
  .frame{ position:relative; overflow:hidden; background:var(--bg2); break-inside:avoid; margin-bottom:16px; display:block; }
  .frame img{ width:100%; height:auto; display:block; transition:transform 1.3s cubic-bezier(.16,1,.3,1); }
  .frame:hover img{ transform:scale(1.05); }
  @media (max-width:760px){ .mosaic{ column-count:1; } }

  .films-section{ background:var(--bg2); }
  .film-nav{ display:flex; gap:10px; margin-bottom:24px; }
  .film-nav button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .3s, background .3s; }
  .film-nav button:hover{ border-color:var(--accent); background:rgba(245,244,240,.08); }
  .film-nav svg{ width:14px; height:14px; stroke:var(--ink); }
  .film-strip{ display:flex; gap:20px; overflow-x:auto; padding-bottom:16px; scrollbar-width:none; scroll-behavior:smooth; }
  .film-strip::-webkit-scrollbar{ display:none; }
  .film-card{ flex:0 0 360px; }
  .film-thumb{ position:relative; height:230px; overflow:hidden; background:#000; }
  .film-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.16,1,.3,1); }
  .film-card:hover .film-thumb img{ transform:scale(1.07); }
  .film-thumb .scrub{ position:absolute; left:0; bottom:0; height:3px; width:0%; background:var(--accent); transition:width 1.2s cubic-bezier(.16,1,.3,1); }
  .film-card:hover .scrub{ width:100%; }
  .play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%; border:1px solid rgba(245,244,240,.7); display:flex; align-items:center; justify-content:center; transition:background .3s, border-color .3s, transform .3s; }
  .play::after{ content:''; border-style:solid; border-width:8px 0 8px 12px; border-color:transparent transparent transparent var(--ink); margin-left:3px; }
  .film-card:hover .play{ background:var(--accent); border-color:var(--accent); transform:scale(1.08); }
  .film-card:hover .play::after{ border-color:transparent transparent transparent #111112; }
  .film-meta{ display:flex; justify-content:space-between; padding:14px 2px 0; }
  .film-title{ font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:16px; margin-top:8px; color:var(--muted); }

  .about{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
  .about-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--bg2); position:relative; perspective:1000px; }
  .about-photo .tilt{ position:relative; width:100%; height:100%; transform-style:preserve-3d; will-change:transform; transition:transform .4s cubic-bezier(.16,1,.3,1); }
  .about-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(45%) contrast(1.05); display:block; }
    .about-photo:hover .afc{ opacity:1; }
  .about-text p{ margin-bottom:14px; max-width:480px; color:var(--muted); line-height:1.7; }
  .about-text strong{ font-family:var(--display); font-weight:800; font-style:italic; color:var(--ink); }

  footer{ padding:70px 5vw 44px; background:var(--bg2); }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
  .foot-credit{ font-family:var(--display); font-weight:800; font-style:italic; font-size:13px; letter-spacing:-.01em; color:var(--muted); }
  .foot-socials{ display:flex; gap:10px; }
  .foot-socials a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(245,244,240,.2); display:flex; align-items:center; justify-content:center; color:var(--ink); opacity:.75; transition:opacity .25s, border-color .25s, transform .25s; }
  .foot-socials a svg{ width:14px; height:14px; }
  .foot-socials a:hover{ opacity:1; border-color:var(--accent); transform:translateY(-2px); }
  .foot-links{ display:flex; gap:10px; }
  .foot-links a{ opacity:.7; transition:opacity .25s, color .25s; padding:6px 12px; display:inline-block; }
  .foot-links a:hover{ opacity:1; color:var(--accent); }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .nav-inline{ display:flex; }
  @media (max-width:860px){
    .nav-inline{ gap:12px; }
    .nav-inline a{ font-size:9.5px; }
    .about{ grid-template-columns:1fr; gap:40px; }
    .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .f1,.f2,.f3,.f4,.f5,.f6,.f7,.f8,.f9{ grid-column:span 2; grid-row:span 2; }
    .section{ padding:90px 6vw; }
  }

/* ================= FX : transitions & effets ================= */
.about-photo img{ filter:none; }

/* rideau de transition entre les pages */
.pt{ position:fixed; inset:0; z-index:9999; background:#0a0a0a; transform:translateY(calc(100% + 24px)); pointer-events:none; display:flex; align-items:center; justify-content:center; transition:transform .7s cubic-bezier(.76,0,.24,1); will-change:transform; }
.pt img{ height:34px; width:auto; opacity:0; transform:translateY(12px); transition:opacity .4s ease .25s, transform .6s cubic-bezier(.16,1,.3,1) .25s; }
.pt.cover{ transform:translateY(0); }
.pt.cover img{ opacity:1; transform:none; }
.pt.leave{ transform:translateY(calc(-100% - 24px)); }
.pt.reset{ transition:none; transform:translateY(calc(100% + 24px)); }
html.pt-in .pt{ transform:translateY(0); transition:none; }
html.pt-in .pt img{ opacity:1; transform:none; transition:none; }

/* titres : révélation mot par mot */
.fx-word{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em; }
.fx-word > span{ display:inline-block; transform:translateY(110%); transition:transform 1s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i) * 70ms); }
.in .fx-word > span, .fx-split.in .fx-word > span{ transform:translateY(0); }

/* hero : parallaxe */
.hero-video{ transform:scale(1.12); will-change:transform; }
.hero-content{ will-change:transform, opacity; }

/* Works : apparition en masque */
.works-grid{ perspective:1400px; }
.work-tile.reveal{ opacity:1; transform:translateY(60px) scale(.96); clip-path:inset(100% 0 0 0); transition:clip-path 1.3s cubic-bezier(.77,0,.18,1), transform 1.3s cubic-bezier(.16,1,.3,1); }
.work-tile.reveal img{ transform:scale(1.35); transition:transform 1.8s cubic-bezier(.16,1,.3,1); }
.work-tile.reveal.in{ clip-path:inset(0 0 0 0); transform:none; }
.work-tile.reveal.in img{ transform:scale(1); }
.work-tile.reveal.in.done{ transition:clip-path 0s, transform .35s cubic-bezier(.16,1,.3,1); }
.work-tile.reveal.in.done:hover img{ transform:scale(1.08); transition:transform 1.3s cubic-bezier(.16,1,.3,1); }
.work-tile-label{ letter-spacing:.02em; transition:opacity .4s ease, transform .6s cubic-bezier(.16,1,.3,1), letter-spacing .8s cubic-bezier(.16,1,.3,1); }
.work-tile:hover .work-tile-label{ letter-spacing:.08em; }

/* sections : trait qui se dessine */
.section-head{ border-bottom-color:transparent; position:relative; }
.section-head::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.77,0,.18,1) .2s; }
.section-head.in::after{ transform:scaleX(1); }

/* photo À propos : révélation + parallaxe */
.about-photo.reveal{ opacity:1; clip-path:inset(0 100% 0 0); transform:none; transition:clip-path 1.4s cubic-bezier(.77,0,.18,1); }
.about-photo.reveal.in{ clip-path:inset(0 0 0 0); }
.about-photo img{ transform:scale(1.18) translateY(var(--py,0px)); will-change:transform; }
.about-text p{ transition-delay:.1s; }

/* galeries : apparition en masque + survol */
.mosaic .frame{ cursor:zoom-in; clip-path:inset(0 0 100% 0); opacity:1; transform:none; transition:clip-path 1.2s cubic-bezier(.77,0,.18,1); }
.mosaic .frame.reveal{ opacity:1; transform:none; }
.mosaic .frame img{ transform:scale(1.25); transition:transform 1.6s cubic-bezier(.16,1,.3,1); }
.mosaic .frame.in{ clip-path:inset(0 0 0 0); }
.mosaic .frame.in img{ transform:scale(1); }
.mosaic .frame.in:hover img{ transform:scale(1.05); transition:transform 1.3s cubic-bezier(.16,1,.3,1); }

/* visualiseur plein écran */
.lb{ position:fixed; inset:0; z-index:9000; background:rgba(8,8,8,.96); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s; }
.lb.open{ opacity:1; visibility:visible; }
.lb-stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:56px 72px; overflow:hidden; }
.lb img{ max-width:100%; max-height:100%; object-fit:contain; transform:scale(.92); opacity:0; transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .5s ease; user-select:none; -webkit-user-drag:none; }
.lb.open img.on{ transform:scale(1); opacity:1; }
.lb img.out-l{ transform:translateX(-60px) scale(.98); opacity:0; }
.lb img.out-r{ transform:translateX(60px) scale(.98); opacity:0; }
.lb button{ position:absolute; background:none; border:0; color:var(--ink); cursor:pointer; width:52px; height:52px; display:flex; align-items:center; justify-content:center; opacity:.7; transition:opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.lb button:hover{ opacity:1; }
.lb button svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lb-close{ top:16px; right:16px; } .lb-close:hover{ transform:rotate(90deg); }
.lb-prev{ left:12px; top:50%; margin-top:-26px; } .lb-prev:hover{ transform:translateX(-4px); }
.lb-next{ right:12px; top:50%; margin-top:-26px; } .lb-next:hover{ transform:translateX(4px); }
.lb-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted); }
@media (max-width:760px){ .lb-stage{ padding:56px 8px; } .lb-prev,.lb-next{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .pt, .fx-word > span, .work-tile.reveal, .mosaic .frame, .about-photo.reveal, .mosaic .frame img, .work-tile.reveal img{ transition:none !important; }
  .fx-word > span{ transform:none; }
  .hero-video{ transform:none; }
}


/* ===== téléphone & tablette ===== */
@media (max-width:860px){
  .contact-stage{ height:auto; min-height:0; padding:34px 0 20px; }
  #stage3d{ position:relative; inset:auto; height:auto; padding:10px 0 24px; }
  .card-wrap{ width:min(88vw, 400px); }
}
@media (max-width:520px){
  .card-wrap{ width:min(92vw, 360px); }
}
/* écrans tactiles : pas de survol, donc le nom du Works reste visible */
@media (hover:none){
  .work-tile-overlay{ background:linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,.7) 100%); justify-content:flex-end; align-items:flex-start; }
  .work-tile-label{ opacity:1; transform:none; font-size:clamp(20px,5vw,28px); }
  .work-tile-desc{ opacity:1; transform:none; text-align:left; }
  .mosaic .frame{ cursor:pointer; }
}
@media (max-width:380px){ .card-qr{ width:96px; } .card-wrap{ width:94vw; } }

/* carte : métier bien visible, nom discret dessous */
.card-role{ font-family:var(--body); font-weight:700; font-size:15px; color:var(--ink); line-height:1.3; margin-top:0; }
.card-name{ font-family:var(--body); font-weight:400; font-size:10.5px; letter-spacing:.04em; color:var(--muted); opacity:.65; line-height:1.3; margin-top:3px; }

/* carte : le logo MBZ prend le dessus, le métier passe en second */
.card-mark img{ height:62px; }
.card-role{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.card-name{ font-size:10px; opacity:.55; }
@media (max-width:520px){ .card-mark img{ height:50px; } }

/* ---- videos inside a Works ---- */
.frame.is-video{ cursor:pointer; }
.frame.is-video img{ object-fit:cover; }
.frame.is-video .video-blank{ width:100%; background:linear-gradient(135deg,#1a1a1a,#0e0e0e); }
.frame .play{ position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%; background:rgba(10,10,10,.55); border:1.5px solid rgba(255,255,255,.75); backdrop-filter:blur(4px); transition:transform .4s cubic-bezier(.16,1,.3,1), background .3s; pointer-events:none; }
.frame .play::after{ content:""; position:absolute; left:27px; top:21px; border-style:solid; border-width:13px 0 13px 21px; border-color:transparent transparent transparent #fff; }
.mosaic .frame.is-video:hover .play, .frame.is-video:focus-visible .play{ transform:scale(1.12); background:rgba(10,10,10,.75); }
.frame.is-video:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.lb-video{ width:min(100%, calc((100vh - 130px) * var(--ar, 1.7778))); max-height:100%; background:#000; }
.lb-video[hidden]{ display:none; }
.lb-video iframe, .lb-video video{ width:100%; height:100%; border:0; display:block; background:#000; }
@media (max-width:760px){ .frame .play{ width:54px; height:54px; margin:-27px 0 0 -27px; } .frame .play::after{ left:21px; top:16px; border-width:11px 0 11px 17px; } }

/* Mentions légales */
.legal{max-width:720px;margin:0 auto;padding:140px 24px 60px;color:#e8e8e8;font-family:'Inter',sans-serif;line-height:1.65}
.legal h1{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(2rem,6vw,3rem);letter-spacing:.02em;margin:0 0 28px}
.legal h2{font-family:'Oswald',sans-serif;font-weight:500;font-size:1.15rem;text-transform:uppercase;letter-spacing:.08em;margin:30px 0 8px}
.legal a{color:inherit;text-decoration:underline}
.foot-credit a{color:inherit;opacity:.7;margin-left:6px}

/* Formulaire de contact : anti-spam caché + message d'état */
.cf-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-status{min-height:1.4em;margin:12px 0 0;font-size:.95rem;opacity:.85}
.cf-status.ok{color:#8fd19e;opacity:1}
.cf-status.err{color:#ff9b9b;opacity:1}
.btn-send:disabled{opacity:.55;cursor:wait}

/* vidéo d'accueil : jamais de bouton lecture / pause du téléphone par-dessus le logo */
.hero-video{ pointer-events:none; -webkit-user-select:none; user-select:none; background:#0a0a0a; }
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-enclosure{ display:none !important; opacity:0 !important; -webkit-appearance:none; }

/* carte de visite : sur iPhone / Safari, les enfants d'une face doivent aussi être masqués de dos */
.card-face *{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.card-face .card-mark img{ -webkit-transform:translateZ(0); transform:translateZ(0); }