.portrait { overflow: hidden; pointer-events: none; }
.portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .8s cubic-bezier(.4, 0, .2, 1);   /* fondu lent et continu, le pola ne bouge pas */
}
.portrait img.on { opacity: 1; }

/* entrée : les deux polas arrivent chacun de son côté */
html.js body.reveal .portrait { visibility: hidden; }
body.rv-on .portrait { visibility: visible !important; }
.contact .portrait {
  opacity: 0;
  transform: translateX(var(--from, 0));
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1), opacity .9s ease-out;
}
.contact .portrait.p-left { --from: calc(-170 * var(--u)); }
.contact .portrait.p-right { --from: calc(170 * var(--u)); }
body.rv-on .contact .portrait, .contact body.rv-on .portrait { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .contact .portrait { transition: none; transform: none; opacity: 1; }
}

.contact .c-title, .contact .c-text, .contact .c-tel, .contact .c-copy {
  text-align: center; color: var(--ink);
  font-size: max(11px, calc(13 * var(--u))); line-height: calc(16 * var(--u));
}
.contact .c-title { font-weight: 700; }
.contact .c-text { font-weight: 400; }
.contact .c-tel { font-weight: 500; }
.contact .c-copy { font-weight: 400; }
.contact a { transition: color .2s ease; }
.contact a:hover { color: var(--grey); }
/* ombre très légère sur le paragraphe de présentation de la page contact */
.contact .c-text { text-shadow: 0 1px 3px rgba(0, 0, 0, .14); }

/* ==========================================================
   by.ahra — feuille de style
   Canevas Figma : 1728 px de large. Tout est positionné avec
   --u = 100vw / 1728 (donc le site garde exactement les
   compositions du Figma à toutes les largeurs d'écran).
   ========================================================== */
:root {
  --u: calc(100vw / 1728);
  --ink: #0a0a0a;
  --grey: #6b6b6b;
  --line: #d9d9d9;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #fff; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* pages « un seul écran » : accueil, contact -> tient dans la fenêtre */
body.fit-page { --u: min(calc(100vw / 1728), calc(100svh / 1117)); height: 100svh; overflow: hidden; }

.canvas { position: relative; width: 100%; height: calc(var(--H) * var(--u)); }
.canvas.fit { width: calc(1728 * var(--u)); margin: 0 auto; }
.abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.abs[style*="--w"] { width: calc(var(--w) * var(--u)); }
.abs[style*="--h"] { height: calc(var(--h) * var(--u)); }

/* ---------------------------------------------------------- transitions entre pages
   (équivalent du « Smart animate – ease out – 0,3 s » du prototype Figma : les éléments
   qui portent le même nom sur deux pages glissent de leur place à l'autre) */
@view-transition { navigation: auto; }

/* Ce qui existe sur les deux pages (menu, paragraphe, bandes, photos) glisse
   d'une position à l'autre ; ce qui n'existe que d'un côté s'efface vite, pour
   éviter la surimpression des deux pages pendant le mouvement. */
::view-transition-group(*) {
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
::view-transition-old(*) { animation: vt-out .2s ease-out both; }
::view-transition-new(*) { animation: vt-in .26s .12s ease-out both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.intro {
  font-weight: 500; font-size: max(9.5px, calc(12 * var(--u))); line-height: 1.2;
  text-transform: uppercase; color: #000;
}
.intro.thin { font-weight: 100; font-size: max(8px, calc(10 * var(--u))); }
.rights {
  font-weight: 400; font-size: max(8.5px, calc(10 * var(--u))); line-height: 1.3;
  color: var(--ink); text-align: center;
}
.rights a { transition: color .2s ease; }
.rights a:hover { color: var(--grey); }

/* ---------------------------------------------------------- menu */
.menu { display: contents; }
.mi {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  font-family: var(--sans);
  font-weight: 700;
  font-size: max(9px, calc(10.5 * var(--u)));
  line-height: calc(15.75 * var(--u));
  min-height: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  transition: color .2s ease;
}
.mi.sub { font-weight: 500; font-size: max(9.5px, calc(12 * var(--u))); }
.mi:hover, .mi.current { color: var(--grey); }
/* (COMMERCIAL) déplie (VIDEO) et (PHOTO) juste en dessous */
.mi[data-sub-toggle] { cursor: pointer; }
.subitem {
  opacity: 0; pointer-events: none;
  transform: translate3d(0, calc(15 * var(--u)), 0); filter: blur(2.5px);
  backface-visibility: hidden;
  transition: transform .85s cubic-bezier(.22, 1, .3, 1), opacity .5s ease-out,
              filter .5s ease-out, color .2s ease;
  transition-delay: var(--sd, 0ms);
}
body.sub-on .subitem { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); filter: blur(0); }
body.sub-on .mi[data-sub-toggle] { color: var(--grey); }
/* sur la page Personal, (CONTACT) laisse la place au sous-menu */
.mi.shift { transition: transform .7s cubic-bezier(.16, 1, .3, 1), color .2s ease; }
body.sub-on .mi.shift { transform: translateY(calc(44 * var(--u))); }

.burger { display: none; }
.mi { z-index: 4; }
.mi.soon { cursor: default; }
.mi.soon:hover { color: var(--ink); }

/* ---------------------------------------------------------- entrée de la page d'accueil
   Les textes montent ligne par ligne (mot après mot) derrière un masque, avec un flou
   qui se dissipe. Le logo et le polaroïd suivent. */
html.js body.reveal .intro,
html.js body.reveal .rights,
html.js body.reveal:not(.logo-menu) .mi,
html.js body.reveal .bio p,
html.js body.reveal .logo,
html.js body.reveal .pola,
html.js body.reveal .c-title,
html.js body.reveal .c-text,
html.js body.reveal .c-tel,
html.js body.reveal .c-copy,
html.js body.reveal .back { visibility: hidden; }
body.rv-on .intro, body.rv-on .rights, body.rv-on .bio p, body.rv-on .mi,
body.rv-on .logo, body.rv-on .pola, body.rv-on .c-title, body.rv-on .c-text,
body.rv-on .c-tel, body.rv-on .c-copy, body.rv-on .back { visibility: visible !important; }

.rv-line { display: block; overflow: hidden; }
/* Les mots ne bougent qu'en transform / opacity : la carte graphique s'en charge,
   l'animation reste fluide même avec une centaine de mots à l'écran. */
.rv-w {
  display: inline-block; white-space: pre; opacity: 0;
  transform: translate3d(0, 106%, 0);
  backface-visibility: hidden;
}
body.rv-on .rv-w {
  will-change: transform, opacity;
  animation: rvIn 1.15s cubic-bezier(.22, 1, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
body.rv-done .rv-w { will-change: auto; }
@keyframes rvIn {
  0%   { transform: translate3d(0, 106%, 0); opacity: 0; }
  38%  { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
.rv-fade { opacity: 0; transform: translate3d(0, calc(24 * var(--u)), 0); }
body.rv-on .rv-fade {
  will-change: transform, opacity, filter;
  animation: rvFade 1.35s cubic-bezier(.22, 1, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
body.rv-done .rv-fade { will-change: auto; }
@keyframes rvFade {
  0%   { opacity: 0; transform: translate3d(0, calc(24 * var(--u)), 0); filter: blur(5px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* ----------------------------------------------------------
   Variante « index-logo » : au survol du logo, les sections sortent du logo
   et montent derrière un masque ; elles restent à l'écran, un clic sur le
   logo les renvoie. */
.logo-menu .logo { cursor: pointer; }
.logo-menu .mi:not(.subitem) {
  overflow: hidden;
  padding: .25em .12em .3em;
  margin: -.25em -.12em -.3em;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(.95);
  transition: transform 1.05s cubic-bezier(.22, 1, .3, 1), opacity .55s ease-out, color .2s ease;
  transition-delay: var(--sd, 0ms);
}
.logo-menu .mi:not(.subitem) .mi-in {
  display: inline-block;
  transform: translate3d(0, 116%, 0);
  filter: blur(3px);
  backface-visibility: hidden;
  transition: transform 1.05s cubic-bezier(.22, 1, .3, 1), filter .55s ease-out;
  transition-delay: var(--sd, 0ms);
}
.logo-menu.menu-on .mi:not(.subitem) { opacity: 1; pointer-events: auto; transform: none; }
/* retour depuis une autre page : le menu est déjà sorti, sans rejouer l'animation */
html.menu-restore .logo-menu .mi:not(.subitem) {
  opacity: 1; pointer-events: auto; transform: none; transition: none;
}
html.menu-restore .logo-menu .mi:not(.subitem) .mi-in { transform: none; filter: none; transition: none; }
.logo-menu.menu-on .mi:not(.subitem) .mi-in { transform: translate3d(0, 0, 0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .logo-menu .mi, .logo-menu .mi .mi-in { transition: none; }
}

/* ---------------------------------------------------------- accueil */
.home .logo { display: block; }
.bio p {
  font-size: max(9.5px, calc(12 * var(--u)));
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.bio .b1 { font-weight: 700; }
.bio .b2 { font-weight: 400; }
.bio .b3 { font-weight: 300; }
.bio a { transition: color .2s ease; }
.bio a:hover { color: var(--grey); }

.pola { perspective: calc(1600 * var(--u)); }
/* le pola lui-même : il s'incline doucement vers la souris, l'ombre et le reflet suivent */
.pola-tilt {
  position: absolute; inset: 0;
  background: #f8f8f8;
  border-radius: calc(5 * var(--u));
  --rx: 0deg; --ry: 0deg; --sx: -1px; --sy: 4px; --gx: 50%; --gy: 50%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  box-shadow: var(--sx) var(--sy) 4px rgba(0, 0, 0, .25), calc(var(--sx) * 3) calc(var(--sy) * 4) calc(30 * var(--u)) rgba(0, 0, 0, 0);
  transition: transform .7s cubic-bezier(.22, 1, .3, 1), box-shadow .7s cubic-bezier(.22, 1, .3, 1);
  outline: none;
  cursor: pointer;
}
body.ed .pola-tilt { cursor: default; }
/* clic sur le pola : la photo part vers la gauche, la suivante arrive de la droite
   (« translate » et pas « transform » : le zoom de recadrage reste intact pendant le glissé) */
.pola-photo img.in-r  { opacity: 1; z-index: 2; transition: none; animation: polaSlideIn .64s cubic-bezier(.65, 0, .35, 1) both; }
.pola-photo img.out-r { opacity: 1; z-index: 1; transition: none; animation: polaSlideOut .64s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes polaSlideIn  { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes polaSlideOut { from { translate: 0 0; } to { translate: -100% 0; } }
.pola-tilt.tilting {
  transition: transform .18s ease-out, box-shadow .18s ease-out;
  box-shadow: var(--sx) var(--sy) 6px rgba(0, 0, 0, .22), calc(var(--sx) * 3) calc(var(--sy) * 4) calc(34 * var(--u)) rgba(0, 0, 0, .16);
}
/* le reflet : un dégradé deux fois plus grand que le pola, qui glisse sous un masque
   (déplacement seulement, le dégradé n'est jamais recalculé) */
.pola-sheen {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .5s ease;
}
.pola-sheen::before {
  content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 25%);
  transform: translate(calc((var(--gx) - 50%) * .5), calc((var(--gy) - 50%) * .5));
  transition: transform .18s ease-out;
}
.pola-tilt.tilting .pola-sheen { opacity: 1; }
.pola-tilt:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
@media (prefers-reduced-motion: reduce) { .pola-tilt { transform: none !important; } .pola-photo img.in-r, .pola-photo img.out-r { animation: none; } }

/* entrée du pola de l'accueil : il arrive de la droite, comme les polas de la page contact */
.pola.rv-slide { opacity: 0; transform: translate3d(calc(170 * var(--u)), 0, 0); }
body.rv-on .pola.rv-slide {
  will-change: transform, opacity;
  animation: polaIn 1.15s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
body.rv-done .pola.rv-slide { will-change: auto; }
@keyframes polaIn {
  0%   { opacity: 0; transform: translate3d(calc(170 * var(--u)), 0, 0); }
  78%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.pola-photo {
  position: absolute;
  left: calc(36 * var(--u));
  top: calc(31 * var(--u));
  width: calc(660 * var(--u));
  height: calc(573 * var(--u));
  background: #fff;
  overflow: hidden;
}
.pola-photo img, .card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .3s ease;
}
.pola-photo img.on, .card img.on { opacity: 1; z-index: 2; }
.pola-photo img.prev, .card img.prev { opacity: 1; z-index: 1; transition: none; }   /* reste sous la nouvelle pendant le fondu */
.card .name { z-index: 3; }

/* ---------------------------------------------------------- chargement */
.loader {
  position: fixed; inset: 0; z-index: 90; background: #fff;   /* au-dessus de tout, burger compris */
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-row { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.loader-logo { width: calc(45 * var(--u)); height: auto; }
.loader-bar { position: relative; width: calc(120 * var(--u)); height: max(2px, calc(2 * var(--u))); background: var(--line); }
.loader-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #000; transform: scaleX(0); transform-origin: 0 50%; }
.loader-pct { width: calc(25 * var(--u)); min-width: 3.2ch; text-align: right; font-size: max(12px, calc(16 * var(--u))); font-variant-numeric: tabular-nums; }
body.loading { overflow: hidden; }

/* ---------------------------------------------------------- bandes (commercial / personal / video) */
.card {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: #fff;
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  will-change: transform;
  isolation: isolate;
}
/* l'ombre du survol est un calque derrière la bande dont seule l'opacité change :
   le survol ne demande que du déplacement et du fondu, rien n'est redessiné */
.card:not(.video-card)::before, .ph:not(.empty)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .28);
  opacity: 0; transition: opacity .25s ease-out;
}
.card:hover::before, .card:focus-visible::before, .ph:hover::before, .ph:focus-visible::before { opacity: 1; }
.card:hover, .card:focus-visible {
  transform: translateY(calc(-14 * var(--u)));
  z-index: 3;
}
.video-card:hover, .video-card:focus-visible { box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .28); }
.card .name, .video-card .name {
  position: absolute; left: calc(14 * var(--u)); top: calc(100% + 12 * var(--u));
  font-family: var(--sans); font-weight: 700; font-size: max(8.5px, calc(9 * var(--u)));
  letter-spacing: .03em; color: var(--grey); white-space: nowrap;
  opacity: 0; transition: opacity .25s ease-out;
}
.card:hover .name, .card:focus-visible .name { opacity: 1; }
.video-card { background: #e5e5e5; }
.video-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.video-card { overflow: hidden; }
img.broken { display: none; }
.video-card.nothumb::after { display: none; }
.video-card .vprev { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: #000; }
.video-card .vprev iframe { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 16 / 9; transform: translateX(-50%); border: 0; }
.video-card .vprev.ready { opacity: 1; }
.video-card .name { top: auto; bottom: calc(24 * var(--u)); left: calc(18 * var(--u)); opacity: 1; z-index: 1; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); font-size: max(10px, calc(12 * var(--u))); letter-spacing: 0; }
.video-card:not(:has(img)) .name { color: var(--grey); text-shadow: none; }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 40%); pointer-events: none; }
.video-card:not(:has(img))::after { display: none; }
.vp { position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,.88); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; cursor: zoom-out; }
.vp.open { opacity: 1; visibility: visible; }
.vp .vp-frame { width: min(88vw, calc(78vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.vp iframe { width: 100%; height: 100%; border: 0; display: block; }
.vp .lb-close { position: absolute; top: 24px; right: 32px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.strips { display: contents; }
.mobile-only { display: none; }
.mi-m { display: none; }
.m-br { display: none; }   /* retour à la ligne réservé au téléphone */
/* page credit (frame « Crédit » du Figma) */
.credit-text { font-family: var(--sans); font-weight: 400; font-size: max(11.9px, calc(13.89 * var(--u))); line-height: 1.22; color: var(--ink); white-space: nowrap; }
.credit-text .cr-light { font-weight: 300; }
.credit-text .cr-reg { font-weight: 400; }
.credit-text a { transition: color .2s ease; }
.credit-text a:hover { color: var(--grey); }

/* ---------------------------------------------------------- contact */
.contact .cl {
  text-align: center;
  font-family: var(--sans); font-weight: 400;
  font-size: max(11px, calc(13 * var(--u)));
  line-height: calc(16 * var(--u)); min-height: 16px;
  color: var(--ink); white-space: nowrap;
}
.contact .cl.c3 { font-weight: 500; }
.contact .cl a { transition: color .2s ease; }
.contact .cl a:hover { color: var(--grey); }
.back {
  text-align: center; text-transform: uppercase; font-weight: 700;
  font-size: max(9px, calc(10.5 * var(--u)));
  line-height: calc(15.75 * var(--u));
  transition: color .2s ease;
}
.back:hover { color: var(--grey); }

/* ---------------------------------------------------------- pages projet */
.back-link {   /* même typo que les entrées de menu */
  font-weight: 700; font-size: max(9px, calc(10.5 * var(--u))); letter-spacing: normal;
  line-height: calc(15.75 * var(--u)); text-transform: uppercase; color: var(--ink); white-space: nowrap;
  transition: color .2s ease;
}
.back-link:hover { color: var(--grey); }
.p-title {
  font-weight: 700; font-size: max(22px, calc(34 * var(--u))); line-height: calc(42 * var(--u));
  color: #000; white-space: nowrap;
}
.p-sub {
  font-weight: 400; font-size: max(9.5px, calc(11 * var(--u))); line-height: calc(13 * var(--u));
  color: var(--grey); text-transform: uppercase; white-space: nowrap;
}
.p-desc {
  font-weight: 300; font-size: max(10px, calc(12.5 * var(--u))); line-height: calc(17 * var(--u));
  color: var(--ink); max-width: calc(560 * var(--u));
}
.photos { display: contents; }
.ph {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: #f4f4f4;
  cursor: zoom-in;
  transition: transform .25s ease-out;
  isolation: isolate;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph:hover, .ph:focus-visible {
  transform: translateY(calc(-14 * var(--u)));
  z-index: 3;
}

/* ---------------------------------------------------------- page d'une vidéo */
.vplay {
  display: block; overflow: hidden; background: #0a0a0a;
  transition: transform .25s ease-out, box-shadow .25s ease-out;
}
.vplay img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.vplay:hover, .vplay:focus-visible {
  transform: translateY(calc(-14 * var(--u)));
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .28);
}
.vplay .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-weight: 700; font-size: max(10px, calc(13 * var(--u))); letter-spacing: .08em;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); white-space: nowrap;
}
.vplay.out { background: #e5e5e5; }
.vplay.out .play { color: var(--ink); text-shadow: none; }
.ph.empty {
  background: #e5e5e5; cursor: default;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.ph.empty:hover { transform: none; box-shadow: none; }
.ph.empty span {
  font-size: max(8.5px, calc(9 * var(--u))); font-weight: 700; letter-spacing: .03em;
  color: var(--grey); padding: calc(14 * var(--u));
}

/* ---------------------------------------------------------- page (INDEX) : les polas */
.pl {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  cursor: zoom-in;
  transition: transform .25s ease-out, filter .25s ease-out;
}
.pl img { width: 100%; height: 100%; object-fit: contain; }
.pl:hover, .pl:focus-visible {
  transform: translateY(calc(-14 * var(--u)));
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .28));
  z-index: 3;
}

/* ---------------------------------------------------------- lightbox */
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  cursor: zoom-out;
}
.lb.open { opacity: 1; visibility: visible; }
.lb { touch-action: none; user-select: none; -webkit-user-select: none; }
.lb img { will-change: transform; -webkit-user-drag: none; }
.lb img.pola { background: transparent; box-shadow: none; }
.lb img {
  max-width: 88vw; max-height: 78vh; width: auto; height: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
  background: #fff;
}
.lb .lb-count {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--grey);
}
.lb .lb-close {
  position: absolute; top: 24px; right: 32px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .card, .ph, .pola-photo img, .card img { transition: none; }
}

/* ==========================================================
   Mobile : on garde l'esprit (menu en haut, bandes en grille)
   ========================================================== */
@media (max-width: 820px) {
  :root { --u: 1px; }
  body.fit-page { --u: 1px; height: auto; overflow: auto; }
  .canvas, .canvas.fit { width: 100%; height: auto !important; min-height: 0; padding: 22px 16px 54px; margin: 0; }
  .abs, .abs[style] { position: static !important; left: auto !important; top: auto !important;
    width: auto !important; height: auto !important; }

  /* ---- menu burger, en haut à gauche ---- */
  .canvas, .canvas.fit { padding-top: 62px; }
  /* burger : trois barres verticales décalées, comme les carrousels du composant « STYLE DE MENU » */
  .burger {
    display: block; position: fixed; left: 14px; top: 14px; z-index: 70;
    width: 30px; height: 34px; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .burger span {
    position: absolute; display: block; width: 4.5px; margin: 0; background: var(--ink); border-radius: 0;
    box-shadow: 0 0 3px rgba(255, 255, 255, .5), 0 0 1px rgba(255, 255, 255, .6);   /* reste lisible sur les photos sombres, invisible sur le blanc */
    transition: left .45s cubic-bezier(.22, 1, .3, 1), top .45s cubic-bezier(.22, 1, .3, 1),
                width .45s cubic-bezier(.22, 1, .3, 1), height .45s cubic-bezier(.22, 1, .3, 1),
                transform .45s cubic-bezier(.22, 1, .3, 1), opacity .25s ease;
  }
  .burger span:nth-child(1) { left: 4.75px;  top: 19px;   height: 13px; }
  .burger span:nth-child(2) { left: 12.75px; top: 2px;    height: 24px; }
  .burger span:nth-child(3) { left: 20.75px; top: 13.5px; height: 17.5px; }
  /* ouvert : l'icône reste debout, la barre du milieu descend, celles de gauche et de droite remontent */
  body.nav-on .burger span:nth-child(2) { top: 10px; }
  body.nav-on .burger span:nth-child(1) { top: 6px; }
  body.nav-on .burger span:nth-child(3) { top: 1px; }

  /* le menu s'ouvre dans la page, en haut : il pousse le contenu vers le bas */
  .menu {
    position: static; display: grid; grid-template-rows: 0fr; overflow: hidden;
    margin: 0; padding: 0; background: none;
    transition: grid-template-rows .55s cubic-bezier(.22, 1, .3, 1), margin .55s cubic-bezier(.22, 1, .3, 1);
  }
  .menu > .mi-wrap { min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  body.nav-on .menu { grid-template-rows: 1fr; margin: 0 0 26px; }
  body.nav-on .mi { opacity: 1; transform: none; transition-delay: var(--md, 0ms); }
  /* téléphone : le menu de la page est remplacé par le même menu complet partout */
  .menu .mi, .menu .mi.sub, .menu .subitem { display: none !important; }
  .mi-m {
    display: block; font-family: var(--sans); font-weight: 700; font-size: 10.5px; line-height: 22px;
    text-transform: uppercase; white-space: nowrap;
    color: var(--ink); text-decoration: none;
    opacity: 0; transform: translateY(14px);
    transition: transform .55s cubic-bezier(.22, 1, .3, 1), opacity .35s ease;
  }
  .mi-m-sub { padding-left: 16px; font-weight: 500; font-size: 12px; }
  body.nav-on .mi-m { opacity: 1; transform: none; transition-delay: var(--md, 0ms); }
  body[data-page="home"] .mi-m[data-p="home"], body[data-page="commercial"] .mi-m[data-p="commercial"]:not(.mi-m-sub),
  body[data-page="commercial"] .mi-m-sub[data-p="commercial"], body[data-page="video"] .mi-m[data-p="video"], body[data-page="video"] .mi-m[data-p="commercial"]:not(.mi-m-sub),
  body[data-page="personal"] .mi-m[data-p="personal"], body[data-page="credit"] .mi-m[data-p="credit"],
  body[data-page="contact"] .mi-m[data-p="contact"], body[data-page="index"] .mi-m[data-p="index"] { color: var(--grey); }
  .mobile-only { display: block; }
  .strips.mobile-only { display: flex; }
  .logo-menu .mi, .logo-menu .mi:not(.subitem) {
    overflow: visible; padding: 0; margin: 0;
    pointer-events: auto !important;
    opacity: 0; transform: translateY(14px);
    transition: transform .55s cubic-bezier(.22, 1, .3, 1), opacity .35s ease;
  }
  body.nav-on.logo-menu .mi:not(.subitem) { opacity: 1; transform: none; transition-delay: var(--md, 0ms); }
  /* le texte des entrées est remonté hors du masque de la variante logo */
  .logo-menu .mi:not(.subitem) .mi-in { transform: none !important; filter: none !important; }
  .logo-menu .mi .mi-in { transform: none; filter: none; }

  /* ---- accueil ---- */
  .home { display: flex; flex-direction: column; }
  .home .menu { order: 0; }
  .home .bio { display: none; }   /* téléphone : en-tête retiré, on passe directement au pola */
  .bio p { font-size: 11px; line-height: 1.35; margin-bottom: 10px; }
  .home .pola { order: 2; position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; aspect-ratio: 732 / 735; }
  .home .logo { order: 3; align-self: flex-end; width: min(38vw, 156px) !important; margin: 30px 0 0; }
  .pola-photo { left: 4.9%; top: 4.2%; width: 90.2%; height: 78%; }
  .home .rights { order: 4; margin-top: 26px; font-size: 10px; line-height: 1.5; }
  .intro { font-size: 11px; margin: 0 0 24px; }
  .page-rights { margin: 36px 0 28px; font-size: 10px; line-height: 1.5; }
  .credit-text { margin: 40px 0 0; font-size: 15.9px; line-height: 1.25; white-space: normal; }
  .credit .page-rights { margin-top: 48px; }

  /* ---- contact ---- */
  .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 10px; align-content: start; padding-top: 26px; }
  .contact .menu { grid-column: 1 / -1; }
  .contact .portrait { position: relative !important; left: auto !important; top: auto !important;
    width: auto !important; aspect-ratio: 853 / 948; overflow: hidden; }
  .contact .c-title, .contact .c-text, .contact .c-tel, .contact .c-copy, .contact .back { grid-column: 1 / -1; }
  .contact .c-title { margin-top: 18px; font-size: 12px; line-height: 1.5; }
  .contact .c-text { font-size: 12px; line-height: 1.6; }
  .contact .m-br { display: inline; }
  .contact .c-tel { font-size: 12px; line-height: 1.7; margin-top: 6px; }
  .contact .c-copy { font-size: 11px; line-height: 1.6; }
  .contact .back { margin-top: 26px; font-size: 10.5px; }

  /* ---- bandes commissioned / personal / video ----
     même direction artistique que sur ordinateur : les longs carrousels du Figma
     gardent leurs proportions exactes et défilent horizontalement. */
  /* la composition du Figma reprise telle quelle au format téléphone :
     mêmes bandes, mêmes proportions, serrées en colonnes et lues de haut en bas.
     Les repères --mx/--my/--mw/--mh sont calculés par build_site.py (canevas de 396). */
  :root { --mu: calc((100vw - 32px) / 396); }
  .strips { position: relative; display: block; width: 100%; margin: 6px 0 0;
    height: calc(var(--MH) * var(--mu)); }
  .card { will-change: auto; }
  .card::before, .ph::before { display: none; }
  .card, .card:hover { position: absolute !important;
    left: calc(var(--mx) * var(--mu)) !important; top: calc(var(--my) * var(--mu)) !important;
    width: calc(var(--mw) * var(--mu)) !important; height: calc(var(--mh) * var(--mu)) !important;
    transform: none; box-shadow: none; }
  .card img { object-fit: cover; }
  .card .name { opacity: 1; top: calc(100% + 4px); left: 0; font-size: 8.5px; line-height: 11px; white-space: normal; }
  .strips-video { margin-top: 30px; }
  .video-card .name { top: auto; bottom: 8px; left: 8px; font-size: 9px; }
  .vplay.abs, .vplay.abs[style] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important;
    aspect-ratio: 16 / 9; margin: 0 0 18px; }

  /* ---- pages projet, vidéo et index ---- */
  .project .back-link, .project .p-title, .project .p-sub { display: block; }
  .project .p-title { font-size: 26px; line-height: 32px; margin-top: 10px; }
  .project .p-sub { margin: 4px 0 10px; font-size: 10px; }
  .project .p-desc { display: block; max-width: none !important; margin: 0 0 22px;
    font-size: 11.5px; line-height: 1.5; }
  .project .back-link { font-size: 10px; }
  .photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ph, .ph:hover, .pl, .pl:hover { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; aspect-ratio: calc(var(--w) / var(--h));
    margin: 0; transform: none; box-shadow: none; filter: none; }
  .ph.empty { aspect-ratio: 3 / 2; }
  .pl img { object-fit: contain; }
  .lb img { max-width: 94vw; max-height: 74vh; }
  .lb .lb-close { top: 16px; right: 18px; }
}

/* téléphones étroits */
@media (max-width: 420px) {
  .contact .c-text { font-size: 11.5px; }
}