/* Polices : Cormorant Garamond, Manrope et Parisienne (SIL Open Font License 1.1, licences dans fonts/) */

@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Parisienne';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/parisienne-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Parisienne';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/parisienne-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --black:#15130F; --black-2:#211D17; --ivory:#F5F1E9; --ivory-2:#EDE7DD;
  --bronze:#C9965A; --bronze-text:#7A532B; --walnut:#48382B;
  --burgundy:#5C1F1F; --burgundy-bright:#8E2E29; --cream:#EEE5D5; --cream-2:#E7DCCA; --ink:#201D19; --gray-on-light:#5A5248; --gray-on-dark:#B8AFA2;
  --serif:'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --sans:'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --script:'Parisienne', 'Snell Roundhand', cursive;
  --gutter:clamp(20px, 5vw, 72px);
  --ease:cubic-bezier(.22,.61,.36,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --black:#15130F; --ivory:#F5F1E9; } }
:root[data-theme="dark"]{ --black:#15130F; --ivory:#F5F1E9; }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); background:var(--black); }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--black); color:var(--ivory); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.eyebrow{ font-family:var(--serif); font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; margin:0 0 22px; display:flex; align-items:center; gap:14px; }
h2 .phrase{ display:block; text-wrap:balance; }
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.8; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.005em; }
h2{ font-size:clamp(2.4rem, 4.6vw, 4.2rem); line-height:1; font-weight:400; letter-spacing:-.015em; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }   /* evite un mot seul sur la derniere ligne */
.rule{ width:44px; height:1px; background:var(--bronze); margin:26px 0; }

/* Boutons */
.btn{ --bg:transparent; --fg:var(--ivory); --bd:rgba(245,241,233,.7);
  display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 28px; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd); text-decoration:none; font-weight:600; font-size:.95rem;
  cursor:pointer; font-family:var(--sans); position:relative; overflow:hidden; transition:color .4s var(--ease), border-color .4s var(--ease); isolation:isolate; }
.btn::before{ content:""; position:absolute; inset:0; background:var(--ivory); transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1; border-radius:inherit; }
.btn:hover::before{ transform:none; }
.btn:hover{ color:var(--ink); border-color:var(--ivory); }
.btn .fl{ transition:transform .4s var(--ease); }
.btn:hover .fl{ transform:translateX(4px); }
.btn-solid{ --bg:var(--ivory); --fg:var(--ink); --bd:var(--ivory); }
.btn-solid::before{ background:var(--bronze); }
.btn-solid:hover{ border-color:var(--bronze); }
.btn-action{ --bg:var(--burgundy-bright); --fg:#F5F1E9; --bd:var(--burgundy-bright); }
.btn-action::before{ background:var(--burgundy); }
.btn.btn-action:hover{ color:#F5F1E9; border-color:var(--bronze); }

/* Navigation */
.nav{ position:fixed; left:0; right:0; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px); transition:background .5s var(--ease); }
.nav.solid{ background:rgba(21,19,15,.94); }
.nav-inner{ height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); gap:24px; }
.logo{ font-family:var(--serif); font-size:1.45rem; letter-spacing:.24em; text-decoration:none; white-space:nowrap; }
.nav ul{ list-style:none; display:flex; gap:clamp(18px,2.6vw,40px); margin:0; padding:0; }
.nav ul a{ text-decoration:none; font-size:.9rem; position:relative; padding:10px 0; }
.nav ul a::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:var(--bronze); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav ul a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav .btn{ min-height:44px; padding:0 22px; font-size:.88rem; }
.burger{ display:none; width:48px; height:48px; border-radius:50%; background:none; border:1px solid rgba(245,241,233,.6); color:var(--ivory); cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:18px; height:1.5px; background:currentColor; position:relative; transition:transform .4s var(--ease); }
.burger span::after{ content:""; position:absolute; left:0; top:6px; width:18px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), top .4s var(--ease); }
.burger span{ top:-3px; }
.menu-open .burger span{ transform:translateY(3px) rotate(45deg); }
.menu-open .burger span::after{ top:0; transform:rotate(-90deg); }
.menu-mobile{ position:fixed; inset:0; z-index:35; background:var(--black); display:flex; flex-direction:column; justify-content:center; padding:100px var(--gutter) 48px; visibility:hidden; opacity:0; transition:opacity .5s var(--ease), visibility 0s .5s; }
.menu-open .menu-mobile{ visibility:visible; opacity:1; transition:opacity .5s var(--ease); }
.menu-mobile a{ font-family:var(--serif); font-size:2.6rem; line-height:1.25; text-decoration:none; display:block; transform:translateY(20px); opacity:0; transition:transform .6s var(--ease), opacity .6s var(--ease); }
.menu-open .menu-mobile a{ transform:none; opacity:1; }
.menu-mobile a:nth-child(2){ transition-delay:.05s } .menu-mobile a:nth-child(3){ transition-delay:.1s } .menu-mobile a:nth-child(4){ transition-delay:.15s } .menu-mobile a:nth-child(5){ transition-delay:.2s }
.menu-mobile .btn{ display:inline-flex; justify-content:center; margin-top:40px; align-self:flex-start; font-family:var(--sans); font-size:1rem; line-height:1; }

/* Navigation : partie droite */
.nav-right{ display:flex; align-items:center; gap:12px; }
@media (max-width:640px){
  .nav-inner{ gap:10px; }
  .nav-right{ gap:8px; }
  .logo{ font-size:1.12rem; letter-spacing:.2em; }
  .nav .logo{ min-width:0; overflow:hidden; text-overflow:clip; }
  .burger{ width:44px; height:44px; }
}
@media (max-width:370px){ .logo{ font-size:.98rem; letter-spacing:.14em; } }

/* Intro */
.preload{ position:fixed; inset:0; z-index:100; background:var(--black); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; transition:transform 1.1s cubic-bezier(.76,0,.24,1); }
.preload.end{ transform:translateY(-100%); }
.preload .word{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.6rem); letter-spacing:.42em; padding-left:.42em; color:var(--ivory); display:flex; }
.preload .word span{ opacity:0; transform:translateY(40%); transition:opacity .7s var(--ease), transform .9s var(--ease); display:inline-block; white-space:pre; }
.preload.go .word span{ opacity:1; transform:none; }
.preload .stroke{ width:160px; height:1px; background:rgba(201,150,90,.25); position:relative; overflow:hidden; }
.preload .stroke::after{ content:""; position:absolute; inset:0; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .35s; }
.preload.go .stroke::after{ transform:scaleX(1); }
body.preload-active{ overflow:hidden; }

/* Hero */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--black); }
.hero-img{ position:absolute; inset:-6% 0 0 0; height:112%; width:100%; object-fit:cover; object-position:60% 88%;
  transform:scale(1.1); transition:transform 2.8s var(--ease); will-change:transform; }
.ready .hero-img{ transform:scale(1.02); }
.hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(21,19,15,.95) 0%, rgba(21,19,15,.8) 30%, rgba(21,19,15,.2) 58%, rgba(21,19,15,0) 100%), linear-gradient(0deg, rgba(21,19,15,.7) 0%, rgba(21,19,15,0) 22%), linear-gradient(180deg, rgba(21,19,15,.6) 0%, rgba(21,19,15,0) 18%); }
.hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(10,9,7,0) 40%, rgba(10,9,7,.55) 100%); }
.hero .grain{ position:absolute; inset:0; z-index:1; pointer-events:none; background:url("../images/texture-hero.webp") repeat; background-size:200px 200px; opacity:.05; }
.hero-content{ position:relative; z-index:2; padding:130px var(--gutter) 110px; max-width:900px; }
.hero h1{ font-size:clamp(2.6rem, 5vw, 4.8rem); line-height:1; font-weight:400; letter-spacing:-.018em; }
.line{ display:block; overflow:hidden; padding-bottom:.08em; }
.line > span{ display:block; transform:translateY(105%); transition:transform 1.2s var(--ease); }
.ready .line > span{ transform:none; }
.ready .line:nth-child(2) > span{ transition-delay:.12s } .ready .line:nth-child(3) > span{ transition-delay:.24s }
.appear{ opacity:0; transform:translateY(16px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.ready .appear{ opacity:1; transform:none; }
.ready .d1{ transition-delay:.55s } .ready .d2{ transition-delay:.75s } .ready .d3{ transition-delay:.95s }
.hero .eyebrow{ color:var(--bronze); }
.hero-text{ font-size:clamp(1rem,1.3vw,1.12rem); max-width:500px; color:#E4DCCF; margin:28px 0 36px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-script{ position:absolute; right:var(--gutter); bottom:clamp(40px,7vh,80px); z-index:2; font-family:var(--script); font-size:clamp(1.5rem,2.4vw,2.2rem); color:#F1E7D6; transform:rotate(-8deg); text-align:right; line-height:1.15; }
.scroll-hint{ position:absolute; left:50%; bottom:28px; z-index:2; width:1px; height:56px; background:rgba(245,241,233,.25); overflow:hidden; }
.scroll-hint::after{ content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:var(--bronze); animation:drip 2.4s var(--ease) infinite; }
@keyframes drip{ to{ top:100%; } }

/* Grain cinema */

/* Sections */
section{ position:relative; }
.light{ background:var(--cream); color:var(--ink); }
.light .eyebrow{ color:var(--bronze-text); }
.dark{ background:var(--black); }
.dark .eyebrow{ color:var(--bronze); }
.block{ padding:clamp(88px,12vw,160px) var(--gutter); }

/* Revelations */
.rv{ transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.anim .rv:not(.seen){ opacity:0; transform:translateY(34px); }
.rv-img{ transition:clip-path 1.4s var(--ease); }
.anim .rv-img:not(.seen){ clip-path:inset(12% 0 0 0); }
.rv-img img{ transition:transform 1.8s var(--ease); }
.anim .rv-img:not(.seen) img{ transform:scale(1.12); }

/* Manifeste */
.manifesto{ padding:clamp(120px,18vw,240px) var(--gutter); }
.manifesto p{ font-family:var(--serif); font-size:clamp(2rem,4.4vw,4.1rem); line-height:1.12; max-width:1120px; margin:0; letter-spacing:-.01em; }
.manifesto .m{ color:rgba(245,241,233,.16); transition:color .5s var(--ease); }
.manifesto .m.on{ color:var(--ivory); }
.manifesto .m.b.on{ color:var(--bronze); }

/* Concept */
.concept{ display:grid; grid-template-columns:6fr 6fr; gap:clamp(40px,7vw,110px); align-items:center; }
.frame{ margin:0; }
.frame-img{ aspect-ratio:16/9; background:var(--walnut); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.frame-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame-empty{ position:relative; margin:0; max-width:260px; text-align:center; color:#EDE3D2; font-size:.9rem; }
.corner{ position:absolute; width:22px; height:22px; border-color:rgba(245,241,233,.75); border-style:solid; border-width:0; z-index:2; }
.c1{ top:14px; left:14px; border-top-width:1px; border-left-width:1px; } .c2{ top:14px; right:14px; border-top-width:1px; border-right-width:1px; }
.c3{ bottom:14px; left:14px; border-bottom-width:1px; border-left-width:1px; } .c4{ bottom:14px; right:14px; border-bottom-width:1px; border-right-width:1px; }
.rec{ position:absolute; top:18px; left:46px; z-index:2; font-size:.7rem; letter-spacing:.14em; color:#F5F1E9; display:flex; align-items:center; gap:7px; }
.rec i{ width:7px; height:7px; border-radius:50%; background:#C8412F; animation:blink 1.6s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.frame figcaption{ margin-top:14px; font-size:.85rem; color:var(--gray-on-light); }
.concept p.aside{ border-left:1px solid var(--bronze); padding-left:18px; font-size:.98rem; margin-top:28px; }
.concept h2{ margin-bottom:34px; }
.concept p.body-text{ font-size:1.05rem; color:var(--gray-on-light); max-width:600px; margin:0 0 18px; }

/* Qui je suis */
.about-inner{ display:grid; grid-template-columns:minmax(240px,380px) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center; }
.about-art{ margin:0; width:100%; }
.about-art img{ display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.about-text h2{ margin-bottom:28px; }
.about-text p{ color:var(--gray-on-dark); max-width:600px; margin:0 0 18px; font-size:1.05rem; }
@media (max-width:820px){ .about-inner{ grid-template-columns:1fr; } .about-art{ max-width:320px; margin:0 auto; } }

/* Image qui s'ouvre */
.opening{ height:180vh; position:relative; background:var(--black); }
.opening .sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; contain:paint; }
.opening .opening-frame{ position:absolute; inset:0; overflow:hidden; transform:scale3d(.55,.55,1); border-radius:16px; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:border-radius .4s var(--ease); }
.opening .opening-frame.full{ border-radius:0; }

/* Navigateurs recents : animation liee au defilement */
@supports (animation-timeline: view()) {
  .opening{ view-timeline: --opening block; }
  .opening .opening-frame{ animation: frameOpen linear both; animation-timeline: --opening; animation-range: cover calc(100svh) exit 0%; }
  @keyframes frameOpen{ 0%{ transform:scale3d(0.5500,0.5500,1); } 10%{ transform:scale3d(0.6355,0.6355,1); } 20%{ transform:scale3d(0.7120,0.7120,1); } 30%{ transform:scale3d(0.7795,0.7795,1); } 40%{ transform:scale3d(0.8380,0.8380,1); } 50%{ transform:scale3d(0.8875,0.8875,1); } 60%{ transform:scale3d(0.9280,0.9280,1); } 70%{ transform:scale3d(0.9595,0.9595,1); } 80%{ transform:scale3d(0.9820,0.9820,1); } 90%{ transform:scale3d(0.9955,0.9955,1); } 100%{ transform:scale3d(1.0000,1.0000,1); } }
}
.opening .opening-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,10,8,.55), rgba(12,10,8,.15) 55%); }
.opening img{ width:100%; height:100%; object-fit:cover; object-position:30% 45%; }
.opening .text{ position:absolute; left:var(--gutter); bottom:clamp(40px,8vh,90px); z-index:2; opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.opening .text.on{ opacity:1; transform:none; }
.opening .text p{ margin:0; font-family:var(--serif); font-size:clamp(2rem,4.2vw,3.8rem); line-height:1.05; text-shadow:0 2px 30px rgba(0,0,0,.4); }

/* Studio */
.studio-head{ display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:end; margin-bottom:56px; }
.studio-head p:not(.eyebrow){ color:var(--gray-on-dark); max-width:440px; margin:0; }
.instruments{ margin-top:clamp(110px,14vw,190px); }
.instruments-head{ display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap; margin-bottom:36px; }
.instruments-head p:not(.eyebrow){ color:var(--gray-on-dark); max-width:520px; margin:0; }

/* Grille d'instruments */
.instruments-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; max-width:980px; }
@media (min-width:1600px){ .instruments-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); max-width:1720px; } }
.instruments-grid li{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s); }
.instruments.seen .instruments-grid li{ opacity:1; transform:none; }
.instruments-grid button{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(245,241,233,.14); border-radius:16px; background:rgba(245,241,233,.025); color:var(--bronze);
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease); -webkit-tap-highlight-color:transparent; }
.instruments-grid svg{ width:56%; height:56%; transition:transform .45s var(--ease); }
.instruments-grid button:hover, .instruments-grid button:focus-visible{ border-color:rgba(201,150,90,.6); background:rgba(201,150,90,.07); color:#F3E6CF; }
.instruments-grid .icon-mask{ width:62%; height:62%; background:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; transition:transform .45s var(--ease); }
.instruments-grid button:hover svg, .instruments-grid button:hover .icon-mask{ transform:translateY(-6px) scale(1.04); }
.instruments-grid button:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.instruments-grid .name{ position:absolute; left:6px; right:6px; bottom:10px; text-align:center; font-size:.72rem; letter-spacing:.04em; line-height:1.2; color:var(--gray-on-dark); opacity:0; transform:translateY(4px); transition:opacity .3s var(--ease), transform .3s var(--ease); pointer-events:none; }
@media (hover:hover){ .instruments-grid button:hover .name, .instruments-grid button:focus-visible .name{ opacity:1; transform:none; } }
.instruments-hint{ display:none; margin:16px 0 0; font-size:.85rem; color:var(--gray-on-dark); }
@media (hover:none){ .instruments-hint{ display:block; } }
@media (max-width:640px){ .instruments-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .instruments-grid button{ border-radius:12px; } }
.instruments-head h3{ font-size:clamp(2rem,3.4vw,3rem); font-weight:400; line-height:1.05; margin-bottom:22px; }
.preview{ position:fixed; left:0; top:0; z-index:30; width:auto; max-width:min(300px, 40vw); max-height:70vh; pointer-events:none; overflow:hidden; opacity:0; transform:scale(.92); transition:opacity .35s var(--ease), transform .45s var(--ease); box-shadow:0 30px 60px rgba(0,0,0,.45); }
.preview.on{ opacity:1; transform:scale(1); }
.preview img{ display:block; width:auto; height:auto; max-width:min(300px, 40vw); max-height:70vh; object-fit:contain; }
@media (hover: none){ .preview{ display:none; } }
.path{ margin-top:clamp(110px,14vw,190px); border-top:1px solid rgba(201,150,90,.3); padding-top:56px; }
.gallery{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:clamp(190px,19vw,300px); gap:14px; }
.tile{ position:relative; overflow:hidden; border:0; padding:0; background:var(--black-2); cursor:zoom-in; text-align:left; color:var(--ivory); font-family:var(--sans); }
.tile.large{ grid-column:span 2; grid-row:span 2; }
.tile.tall{ grid-row:span 2; }
.tile.band{ grid-column:1 / -1; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.tile::before, .gear-tile::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(12,10,8,.18); transition:opacity .8s var(--ease); pointer-events:none; }
.tile:hover::before, .tile:focus-visible::before, .gear-tile:hover::before, .gear-tile:focus-visible::before{ opacity:0; }
.tile .caption, .gear-tile .caption, .gear-tile .loading{ z-index:2; }
.tile::after{ content:"Agrandir"; position:absolute; top:14px; right:14px; font-size:.72rem; letter-spacing:.08em; padding:6px 12px; border:1px solid rgba(245,241,233,.6); border-radius:999px; opacity:0; transform:translateY(-6px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.tile:hover::after, .tile:focus-visible::after{ opacity:1; transform:none; }
.tile:hover img, .tile:focus-visible img{ transform:scale(1.05); }
.tile .caption{ position:absolute; left:0; right:0; bottom:0; padding:40px 18px 14px; background:linear-gradient(0deg, rgba(21,19,15,.9), rgba(21,19,15,0)); }
.tile .caption strong{ display:block; font-family:var(--serif); font-weight:500; font-size:1.25rem; line-height:1.2; }
.tile .caption span{ font-size:.8rem; color:#CFC5B6; }

/* Etapes */
.steps-head{ display:grid; grid-template-columns:4fr 8fr; gap:48px; align-items:end; margin-bottom:64px; }
.steps-head p:not(.eyebrow){ color:var(--gray-on-light); max-width:460px; margin:0; }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:relative; }
.steps::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform 1.8s var(--ease); }
.steps.seen::before{ transform:scaleX(1); }
.step{ padding:36px 28px 8px 0; border-right:1px solid rgba(32,29,25,.12); margin-right:28px; }
.step:last-child{ border-right:0; margin-right:0; }
.step .num{ font-family:var(--serif); font-size:1rem; color:var(--bronze-text); }
.step svg{ width:34px; height:34px; margin:18px 0 20px; color:var(--ink); }
.step h3{ font-size:1.5rem; line-height:1.15; margin-bottom:12px; min-height:2.3em; }
.gear-section{ margin-top:clamp(110px,14vw,190px); }
.gear-head{ margin-bottom:36px; }
.gear-head h3{ font-size:clamp(2rem,3.4vw,3rem); font-weight:400; line-height:1.05; }
.gear-head p:not(.eyebrow){ color:var(--gray-on-dark); max-width:520px; margin:18px 0 0; font-size:1.05rem; }
.gear-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.gear-tile{ all:unset; box-sizing:border-box; display:block; position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; background:var(--black-2); cursor:zoom-in; }
.gear-tile.empty{ cursor:default; background:#1C1813; border:1px solid rgba(201,150,90,.18); }
.gear-tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gear-tile:hover img, .gear-tile:focus-visible img{ transform:scale(1.05); }
.gear-tile:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.gear-tile .loading{ position:absolute; top:16px; left:16px; font-size:.72rem; letter-spacing:.08em; color:#7D7466; }
.gear-tile .caption{ position:absolute; left:0; right:0; bottom:0; padding:48px 16px 16px; background:linear-gradient(0deg, rgba(21,19,15,.9), rgba(21,19,15,0)); display:flex; flex-direction:column; gap:4px; }
.gear-tile .role{ font-family:var(--serif); font-size:.75rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bronze); }
.gear-tile strong{ font-family:var(--serif); font-weight:500; font-size:1.3rem; line-height:1.15; color:var(--ivory); }
.step p.gear{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(32,29,25,.12); font-size:.8rem; color:var(--bronze-text); }
.step p{ margin:0; color:var(--gray-on-light); font-size:.95rem; }

/* Projets */
.projects-head{ display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.projects-head p:not(.eyebrow){ color:var(--gray-on-dark); max-width:440px; margin:18px 0 0; }
.platforms{ display:flex; gap:10px; flex-wrap:wrap; }
.platforms a, .platforms span{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid rgba(201,150,90,.5); border-radius:999px; font-size:.88rem; text-decoration:none; }
.platforms span{ opacity:.55; }
.projects{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.project{ display:flex; flex-direction:column; gap:14px; text-decoration:none; }
.project .cover{ aspect-ratio:16/10; background:var(--black-2); border:1px dashed rgba(201,150,90,.4); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.project .cover .play{ width:58px; height:58px; border-radius:50%; border:1px solid rgba(245,241,233,.6); display:flex; align-items:center; justify-content:center; }

/* Projets : lien vers la suite */
.projects-more{ margin:36px 0 0; color:var(--gray-on-dark); }
.projects-more a{ color:var(--ivory); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--bronze); }
.projects-more a:hover{ color:var(--bronze); }

/* ===== Lecteur video en surimpression ===== */
.project .cover-video{ border:0; background:#000; padding:0; cursor:pointer; font:inherit; color:inherit; }
.project .cover-video img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease), opacity .4s var(--ease); }
.project .cover-video .play{ position:absolute; background:rgba(21,19,15,.35); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.project .cover-video:hover img{ transform:scale(1.03); }
.project .cover-video:hover .play, .project .cover-video:focus-visible .play{ background:var(--burgundy-bright); border-color:var(--burgundy-bright); transform:scale(1.06); }
.project .cover-video:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.project .cover-video .duration{ position:absolute; right:10px; bottom:10px; padding:3px 8px; border-radius:999px; background:rgba(21,19,15,.7); font-size:.75rem; color:var(--ivory); letter-spacing:.04em; }

dialog.vm{ border:0; padding:0; margin:0; width:100vw; height:100vh; height:100dvh; max-width:100vw; max-height:100vh; max-height:100dvh; background:transparent; color:var(--ivory); overflow:hidden; }
dialog.vm::backdrop{ background:rgba(21,19,15,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .3s var(--ease); }
dialog.vm.open::backdrop{ opacity:1; }
.vm-scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:calc(64px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px)); }
.vm-block, .vm-header{ display:contents; }
.vm-frame{ position:relative; flex:none; background:#000; border-radius:10px; overflow:hidden; border:1px solid rgba(245,241,233,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
  opacity:0; transform:translateY(10px) scale(.97); transition:opacity .3s var(--ease), transform .3s var(--ease); }
dialog.vm.open .vm-frame{ opacity:1; transform:none; }
.vm-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.vm-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .4s var(--ease); }
.vm-frame.started .vm-poster{ opacity:0; pointer-events:none; }
.vm-close{ position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:calc(14px + env(safe-area-inset-right,0px)); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(245,241,233,.3); background:rgba(21,19,15,.55); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
dialog.vm.open .vm-close{ opacity:1; }
.vm-close:hover{ border-color:var(--bronze); background:rgba(21,19,15,.8); }
.vm-close:focus-visible, .vm-controls button:focus-visible, .vm-big-play:focus-visible, .vm-controls select:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }
.vm-title{ position:absolute; top:calc(24px + env(safe-area-inset-top,0px)); left:calc(24px + env(safe-area-inset-left,0px)); right:84px; margin:0; font-family:var(--serif); font-size:1.15rem; color:var(--ivory); opacity:0; transition:opacity .3s var(--ease); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
dialog.vm.open .vm-title{ opacity:.85; }
/* grand bouton central */
.vm-big-play{ position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; border:1px solid rgba(245,241,233,.6);
  background:rgba(21,19,15,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--ivory); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  transition:opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.vm-big-play:hover{ background:var(--burgundy-bright); border-color:var(--burgundy-bright); }
.vm-frame.playing .vm-big-play{ opacity:0; pointer-events:none; transform:scale(.9); }
.vm-frame.short.started .vm-big-play{ opacity:0; pointer-events:none; }
.vm-spinner{ position:absolute; left:50%; top:50%; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:2px solid rgba(245,241,233,.2); border-top-color:var(--bronze); opacity:0; pointer-events:none; z-index:2; }
.vm-frame.buffering .vm-spinner{ opacity:1; animation:vmSpin .9s linear infinite; }
.vm-frame.buffering .vm-big-play{ opacity:0; pointer-events:none; }
@keyframes vmSpin{ to{ transform:rotate(360deg); } }
.vm-message{ position:absolute; left:16px; right:16px; bottom:16px; margin:0; text-align:center; font-size:.9rem; color:var(--ivory); text-shadow:0 1px 8px rgba(0,0,0,.8); z-index:2; }
/* barre de commandes */
.vm-controls{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 14px 10px; background:linear-gradient(to top, rgba(21,19,15,.88), rgba(21,19,15,.55) 60%, rgba(21,19,15,0));
  transition:opacity .35s var(--ease), transform .35s var(--ease); }
.vm-frame.idle .vm-controls{ opacity:0; transform:translateY(6px); pointer-events:none; }
.vm-controls{ pointer-events:none; } .vm-controls > *{ pointer-events:auto; }
.vm-frame:not(.started) .vm-controls{ opacity:0; transform:translateY(6px); visibility:hidden; }
.vm-frame.idle{ cursor:none; }
.vm-row{ display:flex; align-items:center; gap:6px; }
.vm-controls button{ flex:none; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:var(--ivory); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.vm-controls button:hover{ background:rgba(245,241,233,.1); color:var(--bronze); }
.vm-time{ flex:none; font-size:.78rem; font-variant-numeric:tabular-nums; color:rgba(245,241,233,.85); letter-spacing:.02em; margin:0 6px; white-space:nowrap; }
.vm-spacer{ flex:1; }
.vm-controls select{ flex:none; width:auto; max-width:90px; height:30px; border-radius:999px; border:1px solid rgba(245,241,233,.25); background:rgba(21,19,15,.6); color:var(--ivory); font:500 .75rem var(--sans); padding:0 10px; cursor:pointer; }
/* curseurs (progression, volume) */
.vm-controls input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; height:22px; margin:0; cursor:pointer; --p:0%; }
.vm-controls input[type=range]::-webkit-slider-runnable-track{ height:3px; border-radius:3px; background:linear-gradient(to right, var(--bronze) var(--p), rgba(245,241,233,.25) var(--p)); }
.vm-controls input[type=range]::-moz-range-track{ height:3px; border-radius:3px; background:rgba(245,241,233,.25); }
.vm-controls input[type=range]::-moz-range-progress{ height:3px; border-radius:3px; background:var(--bronze); }
.vm-controls input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; margin-top:-5px; border-radius:50%; background:var(--ivory); border:0; box-shadow:0 0 0 3px rgba(201,150,90,.35); transition:transform .2s var(--ease); }
.vm-controls input[type=range]::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:var(--ivory); border:0; box-shadow:0 0 0 3px rgba(201,150,90,.35); }
.vm-controls input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.2); }
.vm-controls input[type=range]:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; border-radius:4px; }
.vm-progress{ display:block; width:100%; margin-bottom:2px !important; }
.vm-volume{ width:76px; }
.vm-frame.no-volume .vm-volume, .vm-frame.narrow .vm-volume{ display:none; }
.vm-frame.narrow .vm-time .vm-total{ display:none; }
.vm-frame:fullscreen{ width:100vw !important; height:100vh !important; border-radius:0; border:0; }
.vm-frame:-webkit-full-screen{ width:100vw !important; height:100vh !important; border-radius:0; border:0; }
@media (hover:none){ .vm-controls button{ width:44px; height:44px; } .vm-controls{ padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); } }
@media (max-width:640px), (max-height:520px){
  .vm-scene{ padding:calc(12px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px)); }
  .vm-block{ display:flex; flex-direction:column; gap:14px; max-width:100%; }
  .vm-header{ display:flex; align-items:center; gap:12px; min-width:0; }
  .vm-title{ position:static; flex:1; min-width:0; margin:0; font-size:1.05rem; }
  .vm-close{ position:relative; top:auto; right:auto; flex:none; width:44px; height:44px; border:0; background:transparent; }   /* zone tactile 44 x 44 */
  .vm-close::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(245,241,233,.3); background:rgba(21,19,15,.55); transition:border-color .3s var(--ease), background .3s var(--ease); }   /* cercle visible 28 px */
  .vm-close svg{ position:relative; width:12px; height:12px; }
  .vm-close:hover{ background:transparent; }
  .vm-close:hover::before{ border-color:var(--bronze); background:rgba(21,19,15,.8); }
}
@media (prefers-reduced-motion: reduce){
  .vm-frame{ transform:none !important; transition:opacity .15s linear; }
  dialog.vm::backdrop{ transition:opacity .15s linear; }
  .vm-controls, .vm-big-play, .project .cover-video img{ transition:none; }
  .vm-frame.buffering .vm-spinner{ animation-duration:2.4s; }
}

.project h3{ font-size:1.4rem; }
.project p{ margin:0; font-size:.9rem; color:var(--gray-on-dark); }

/* Livre d'or */
.guestbook{ background:var(--cream-2); color:var(--ink); }
.guestbook .eyebrow{ color:var(--bronze-text); }
.guestbook-head{ display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:end; margin-bottom:72px; }
.guestbook-head p:not(.eyebrow){ margin:0; color:var(--gray-on-light); max-width:420px; }
.cork{ position:relative; border:14px solid #5E4330; border-radius:3px; padding:clamp(56px,6vw,84px) clamp(28px,4vw,64px) clamp(72px,7vw,100px);
  background-color:#AD7C4C;
  background-image:url("../images/texture-liege.webp"); background-size:256px 256px;
  box-shadow:inset 0 0 50px rgba(40,24,12,.35), 0 24px 50px rgba(32,29,25,.18); }
.pages{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(48px,5vw,76px) clamp(28px,4vw,56px); align-items:start; }
.card{ position:relative; transform:rotate(var(--r,0deg)); transition:transform .7s var(--ease); }
.card:hover, .card:focus-within{ transform:rotate(0deg) translateY(-6px); z-index:2; }
.card:nth-child(3n+2){ margin-top:48px; }
.zoom{ all:unset; box-sizing:border-box; display:block; width:100%; cursor:zoom-in; }
.zoom:focus-visible{ outline:2px solid var(--ivory); outline-offset:4px; }
.pin{ position:absolute; top:-9px; left:50%; width:18px; height:18px; margin-left:-9px; border-radius:50%; z-index:4; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7) 0 2px, var(--pin,#9E3B2C) 3px); box-shadow:2px 4px 5px rgba(20,12,6,.45); }
.polaroid{ display:block; background:#FCFAF6; padding:12px 12px 0; box-shadow:0 18px 36px rgba(40,24,12,.35), 0 2px 5px rgba(40,24,12,.2); }
.polaroid img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.bottom{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 4px 16px; }
.bottom strong{ font-family:var(--script); font-weight:400; font-size:1.6rem; line-height:1.1; color:#2A241E; }
.bottom .date{ font-size:.75rem; color:var(--gray-on-light); }
.bottom .ig{ width:100%; font-size:.82rem; font-weight:600; color:var(--walnut); text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:28px; }
.bottom .ig:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.sheet-photo{ display:block; background:#FBF8F2; padding:12px; box-shadow:0 18px 36px rgba(40,24,12,.3); }
.sheet-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.sheet-photo .bottom{ padding:12px 2px 2px; }
.duo{ margin-bottom:40px; }
.card-word{ display:block; position:relative; aspect-ratio:3/4; background-color:#FBF8F2; background-image:repeating-linear-gradient(to bottom, transparent 0 29px, rgba(72,56,43,.16) 29px 30px); background-position:0 44px; padding:48px 20px 20px 44px; box-shadow:0 18px 36px rgba(40,24,12,.3); box-sizing:border-box; }
.card-word::before{ content:""; position:absolute; top:0; bottom:0; left:30px; width:1px; background:rgba(200,65,47,.35); }
.card-word p{ margin:0; font-family:var(--script); font-size:1.45rem; line-height:30px; color:#2F261E; position:relative; }
.card-word .bottom{ padding:10px 0 0; }
.duo .card-word{ padding-bottom:calc(62% + 64px); }
.duo .card-word p{ overflow-wrap:anywhere; }
.duo .polaroid{ position:absolute; width:62%; right:-18px; bottom:-40px; transform:rotate(6deg); z-index:3; }
.sheet{ position:relative; max-width:380px; margin:0 auto; aspect-ratio:3/4; background-color:#FBF8F2; background-image:repeating-linear-gradient(to bottom, transparent 0 33px, rgba(72,56,43,.14) 33px 34px); background-position:0 70px; transform:rotate(-2.5deg); box-shadow:0 18px 36px rgba(40,24,12,.35); padding:79px 34px 30px 64px; grid-column:1 / -1; }
.sheet::before{ content:""; position:absolute; top:0; bottom:0; left:46px; width:1px; background:rgba(200,65,47,.35); }
.sheet p{ margin:0; font-family:var(--script); font-size:1.7rem; line-height:34px; color:#3A2F25; }
.cork-texture{
  background-color:#AD7C4C;
  background-image:url("../images/texture-liege.webp"); background-size:256px 256px;
}
.guestbook-note{ margin:28px 0 0; color:var(--gray-on-light); font-size:.9rem; max-width:760px; }
.guestbook-all{ margin-top:24px; }
.guestbook-all .count{ font-size:.78rem; min-width:26px; height:26px; padding:0 8px; border-radius:999px; background:var(--ink); color:var(--ivory); display:inline-flex; align-items:center; justify-content:center; transition:background .4s, color .4s; }
.guestbook-all:hover .count{ background:var(--ivory); color:var(--ink); }
dialog.board{ border:0; padding:0; margin:0; width:100vw; height:100vh; height:100dvh; max-width:100vw; max-height:100vh; max-height:100dvh; background:#231a13; color:var(--ivory); overflow:hidden; }
dialog.board[open]{ display:flex; flex-direction:column; animation:boardIn .6s var(--ease); }
@keyframes boardIn{ from{ opacity:0; } }
dialog.board::backdrop{ background:rgba(12,11,9,.85); }
.board-bar{ flex-shrink:0; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutter) 12px; background:#1A130E; position:relative; z-index:5; }
.board-title{ margin:0; font-family:var(--serif); font-size:1.7rem; line-height:1.1; }
.board-count{ margin:2px 0 0; font-size:.8rem; color:#D8C4A8; }
.board-bar .board-close{ position:static; transform:none; flex-shrink:0; }
.board-view img{ -webkit-user-drag:none; user-select:none; }
.board-view{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; flex:1; position:relative; overflow:hidden; touch-action:none; cursor:grab; background:#231a13; outline:none; }
.board-view.dragging, .board-view.dragging *{ cursor:grabbing !important; }
.board-stage{ position:absolute; left:0; top:0; transform-origin:0 0; border:22px solid #5E4330; border-radius:4px; box-shadow:inset 0 0 90px rgba(40,24,12,.45), 0 40px 120px rgba(0,0,0,.6); padding:110px 90px 130px; will-change:transform; }
.board-grid{ display:grid; grid-template-columns:repeat(var(--cols,4), 280px); gap:84px 72px; align-items:start; }
.board-grid .card{ width:280px; margin-top:var(--dy,0px) !important; }
.board-grid .card:hover{ transform:rotate(var(--r,0deg)); }
.label{ position:absolute; top:-46px; left:10px; z-index:5; font-family:var(--script); font-size:1.35rem; color:#2A241E; background:#F3E4B9; padding:4px 14px 6px; transform:rotate(-4deg); box-shadow:0 4px 10px rgba(40,24,12,.3); white-space:nowrap; }
.board-help{ position:absolute; left:var(--gutter); bottom:calc(18px + env(safe-area-inset-bottom,0px)); margin:0; font-size:.78rem; color:#E7D8C2; background:rgba(26,19,14,.72); padding:8px 14px; border-radius:999px; pointer-events:none; transition:opacity .6s; }
.board-help.faded{ opacity:0; }
.board-zoom{ position:absolute; right:var(--gutter); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; gap:6px; background:rgba(26,19,14,.8); padding:6px; border-radius:999px; }
.board-zoom button{ min-width:44px; height:44px; padding:0 14px; border-radius:999px; border:1px solid rgba(245,241,233,.35); background:none; color:var(--ivory); font:600 1rem var(--sans); cursor:pointer; }
.board-zoom #zoom-fit{ font-size:.82rem; }
.board-zoom button:hover{ background:var(--ivory); color:var(--ink); }

/* Soutenir */
.support{ position:relative; overflow:hidden; min-height:640px; display:flex; align-items:center; }
.support-img{ position:absolute; inset:-10% 0; width:100%; height:120%; object-fit:cover; object-position:50% 40%; will-change:transform; }
.support{ background:#3E1215; }
.support::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(62,16,19,.96) 0%, rgba(78,20,23,.88) 45%, rgba(96,26,28,.6) 100%); }
.support-inner{ position:relative; z-index:2; max-width:640px; }
.support p:not(.eyebrow){ color:#DDD3C4; font-size:1.05rem; max-width:540px; margin:22px 0 0; }
.support .s-clef{ margin:36px 0 32px; max-width:560px; padding-left:22px; border-left:1px solid var(--bronze);
  font-family:var(--serif); font-size:clamp(1.3rem,2.1vw,1.75rem); line-height:1.3; letter-spacing:-.01em; color:var(--ivory); }
.support .s-note{ margin:16px 0 0; color:var(--gray-on-dark); font-size:.95rem; }
.support .btn{ margin-top:34px; }
.note{ font-size:.88rem; color:var(--gray-on-dark); margin:16px 0 0; min-height:1.4em; }

/* Contact */
.contact{ display:grid; grid-template-columns:4fr 8fr; gap:clamp(40px,6vw,96px); }
.contact .intro p:not(.eyebrow){ color:var(--gray-on-light); max-width:380px; }
input, select, textarea{ font:inherit; font-size:1rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid rgba(32,29,25,.35); padding:10px 0 12px; border-radius:0; transition:border-color .3s; width:100%; }
select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
textarea{ resize:vertical; min-height:130px; }
input:focus, select:focus, textarea:focus{ outline:none; border-bottom-color:var(--walnut); box-shadow:0 1px 0 var(--walnut); }
.dm-heading{ font-family:var(--serif); font-size:1.6rem; margin:0 0 8px; }
.dm-list{ list-style:none; margin:0 0 40px; padding:0; border-top:1px solid rgba(32,29,25,.15); }
.dm-list li{ display:flex; gap:20px; align-items:baseline; padding:16px 0; border-bottom:1px solid rgba(32,29,25,.15); font-size:1.05rem; }
.dm-list span{ font-family:var(--serif); color:var(--bronze-text); width:28px; flex-shrink:0; }
.dm-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-outline{ --fg:var(--ink); --bd:var(--ink); }
.btn-outline::before{ background:var(--ink); }
.btn-outline:hover{ color:var(--ivory); border-color:var(--ink); }
.dm-note{ font-size:.9rem; color:var(--gray-on-light); margin:16px 0 0; min-height:1.4em; }
.dm-template{ margin-top:8px; background:var(--ivory-2); border:1px solid rgba(32,29,25,.15); padding:14px; font-size:.95rem; }

/* Pied */
footer{ background:var(--black); padding:48px var(--gutter) calc(112px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; border-top:1px solid rgba(201,150,90,.2); }
footer nav{ display:flex; gap:26px; flex-wrap:wrap; font-size:.88rem; }
footer nav a{ text-decoration:none; }
footer .sig{ font-family:var(--script); font-size:1.4rem; color:var(--bronze); margin:0; }

/* Pied signature */
.signature{ background:var(--black); overflow:hidden; padding-top:40px; }
.signature div{ font-family:var(--serif); font-size:15.5vw; line-height:.8; letter-spacing:-.02em; white-space:nowrap; color:transparent; -webkit-text-stroke:1px rgba(201,150,90,.45); text-align:center; transform:translateY(8%); }

/* Mentions legales */
.footer-legal{ width:100%; margin:0; }
.footer-legal button{ all:unset; cursor:pointer; font-size:.8rem; color:var(--gray-on-dark); text-decoration:underline; text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center; }
.footer-legal button:hover{ color:var(--ivory); }
.footer-legal button:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
dialog.legal{ border:0; padding:0; width:min(760px, 100vw); max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; margin:0 0 0 auto; background:var(--ivory); color:var(--ink); }
dialog.legal[open]{ animation:legalIn .5s var(--ease); }
@keyframes legalIn{ from{ transform:translateX(40px); opacity:0; } }
dialog.legal::backdrop{ background:rgba(12,11,9,.7); }
.legal-inner{ position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain; padding:calc(64px + env(safe-area-inset-top,0px)) clamp(24px,6vw,64px) calc(64px + env(safe-area-inset-bottom,0px)); box-sizing:border-box; }
.legal-inner h2{ font-size:clamp(2rem,4vw,2.8rem); margin:0 0 24px; }
.legal-inner h2 ~ h2{ margin-top:56px; padding-top:40px; border-top:1px solid rgba(32,29,25,.15); }
.legal-inner h3{ font-family:var(--serif); font-size:1.35rem; font-weight:500; margin:28px 0 8px; }
.legal-inner p{ margin:0 0 12px; color:var(--gray-on-light); font-size:.95rem; }
.legal-inner a{ color:var(--walnut); }
.legal-inner .todo{ border-left:2px solid var(--bronze); padding-left:14px; font-size:.88rem; display:block; }
.legal-inner .updated{ margin-top:40px; font-size:.8rem; }
.legal-inner .legal-close{ top:calc(16px + env(safe-area-inset-top,0px)); right:16px; color:var(--ink); background:var(--ivory-2); border-color:rgba(32,29,25,.3); }

/* Visionneuse */
dialog.viewer{ border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; max-height:100dvh; width:100vw; height:100vh; height:100dvh; color:var(--ivory); }
dialog.viewer::backdrop{ background:rgba(12,11,9,.94); }
.viewer-inner{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:70px 72px; }
.viewer img{ max-width:100%; max-height:100%; object-fit:contain; }
.viewer .v-caption{ position:absolute; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom,0px)); text-align:center; font-family:var(--serif); font-size:1.2rem; }
.v-btn{ position:absolute; width:52px; height:52px; border-radius:50%; border:1px solid rgba(245,241,233,.5); background:rgba(21,19,15,.6); color:var(--ivory); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.v-close{ top:calc(16px + env(safe-area-inset-top,0px)); right:16px; } .v-prev{ left:12px; top:50%; transform:translateY(-50%); } .v-next{ right:12px; top:50%; transform:translateY(-50%); }

/* ===== Espoir : la melodie flottante ===== */
.mel-float{ position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:26;
  transform:translateX(-50%); display:flex; align-items:center; gap:0;
  padding:9px 20px; border-radius:999px; background:rgba(16,14,11,.9); border:1px solid rgba(201,150,90,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
.mel-float.seen{ opacity:1; }
.mel-float.ready-melody{ border-color:rgba(201,150,90,.6); box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(201,150,90,.18); cursor:pointer; pointer-events:auto; }
.mel-float:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }
.menu-open .mel-float{ opacity:0 !important; pointer-events:none; }
.mel-clef-svg{ display:block; height:38px; width:auto; overflow:visible; flex:0 0 auto; }
.mel-window{ position:relative; overflow:hidden; width:min(300px, 56vw); height:38px; flex:0 0 auto;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 88%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 88%, transparent 100%); }
.mel-rail{ position:absolute; left:0; top:0; height:38px; will-change:transform; }
.mel-svg{ display:block; height:38px; width:auto; overflow:visible; }
.mel-ln{ stroke:rgba(245,241,233,.26); stroke-width:1; }
.mel-gl{ fill:none; stroke:var(--ivory); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.mel-filled{ fill:var(--ivory); }
.mel-stroke{ stroke:var(--ivory); stroke-width:1.6; fill:none; }
.mel-tie{ stroke:var(--ivory); stroke-width:4.8; }
.mel-hollow{ fill:none; stroke:var(--ivory); stroke-width:2.4; }
.mel-rest{ fill:none; stroke:var(--ivory); stroke-width:2.4; stroke-linecap:round; }
.mel-note.sounding .mel-rest{ stroke:var(--bronze); }
.mel-bar{ stroke:rgba(245,241,233,.35); stroke-width:1.4; }
.mel-note.sounding .mel-hollow{ stroke:var(--bronze); }
.mel-note,.mel-tie-group{ opacity:0; transition:opacity .5s var(--ease); }
.mel-note.on,.mel-tie-group.on{ opacity:1; }
.mel-note.sounding .mel-filled{ fill:var(--bronze); }
.mel-note.sounding .mel-stroke,.mel-note.sounding .mel-tie{ stroke:var(--bronze); }
.mel-name{ font-size:1.05rem; line-height:1; white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0; padding-left:0; transition:max-width .7s var(--ease), opacity .5s var(--ease); }
.mel-float.ready-melody .mel-name{ max-width:40px; opacity:1; padding-left:12px; }
@media (max-width:560px){ .mel-float{ padding:7px 12px; } .mel-window,.mel-rail,.mel-svg,.mel-clef-svg{ height:30px; } .mel-name{ font-size:.95rem; } }
@media (prefers-reduced-motion: reduce){ .mel-note,.mel-tie-group{ opacity:1; } }

/* Responsive */
@media (max-width: 1020px){
  .nav ul, .nav-right > .btn{ display:none; }
  .burger{ display:inline-flex; }
  .concept, .contact, .steps-head, .studio-head{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:12px; }
  .step:nth-child(2){ border-right:0; margin-right:0; }
  .projects{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guestbook-head{ grid-template-columns:1fr; } .gear-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } .pages{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sheet{ max-width:340px; }
}
@media (max-width: 640px){
  .hero{ align-items:flex-end; }
  .hero-img{ object-position:40% 50%; }
  .hero::after{ background:linear-gradient(0deg, rgba(21,19,15,.96) 0%, rgba(21,19,15,.82) 42%, rgba(21,19,15,.2) 75%), linear-gradient(180deg, rgba(21,19,15,.75) 0%, rgba(21,19,15,0) 20%); }
  .hero-content{ padding:120px var(--gutter) 64px; }
  .hero h1{ font-size:2.3rem; }
  .hero-actions .btn{ flex:1 1 100%; justify-content:center; }
  .hero-script, .scroll-hint{ display:none; }
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:150px; gap:10px; }
  .tile.large{ grid-column:span 2; grid-row:span 2; }
  .tile .caption{ padding:30px 12px 10px; } .tile .caption strong{ font-size:1.05rem; } .tile .caption span{ display:none; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:0; margin-right:0; border-bottom:1px solid rgba(32,29,25,.12); padding:28px 0; display:grid; grid-template-columns:52px 1fr; column-gap:14px; }
  .step .num{ grid-column:1; } .step svg{ grid-column:1; grid-row:2 / span 2; margin:6px 0 0; }
  .step h3, .step p{ grid-column:2; } .step h3{ grid-row:1 / span 2; align-self:end; min-height:0; }
  .projects{ grid-template-columns:1fr; }
  .cork{ border-width:10px; padding:48px 18px 64px; }
  .pages .card:nth-child(n+4){ display:none; }
  .mobile-only{ display:inline-flex; }
  .guestbook-all{ width:100%; justify-content:center; }
  .board-help{ display:none; }
  .pages{ grid-template-columns:1fr; gap:64px; } .card{ width:84%; max-width:320px; margin:0 auto !important; }
  .gear-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .gear-list li:first-child{ grid-column:1 / -1; } .gear-list li:first-child .gear-tile{ aspect-ratio:16/9; }
  .dm-actions .btn{ width:100%; justify-content:center; }
  .viewer-inner{ padding:70px 8px; }
  .v-prev, .v-next{ top:auto; bottom:calc(12px + env(safe-area-inset-bottom,0px)); transform:none; }
}
@media (max-width: 640px){ .opening{ height:150vh; } .opening img{ object-position:40% 45%; } }
@media (prefers-reduced-motion: reduce){
  .preload{ display:none; } .opening{ height:auto; } .opening .sticky{ position:relative; height:70vh; } .opening .opening-frame{ transform:none !important; border-radius:0 !important; } .opening img{ transform:none !important; } .opening .text{ opacity:1; transform:none; } .manifesto .m{ color:var(--ivory); }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation:none !important; transition-delay:0s !important; }
  .hero-img, .support-img{ transform:none !important; }
  .line > span, .appear, .rv{ transform:none !important; opacity:1 !important; }
  .rv-img{ clip-path:none !important; } .rec i{ animation:none; } .instruments-grid li{ opacity:1 !important; transform:none !important; } .rv-img img{ transform:none !important; }
}

/* Ecrans tres larges (21:9...) : on garde le cadrage d'un ecran classique au lieu d'agrandir les photos */
@media (min-aspect-ratio: 2/1){
  .hero-img{ left:auto; right:0; width:auto; max-width:none; aspect-ratio:16/10;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%); mask-image:linear-gradient(90deg, transparent, #000 30%); }
  .support-img{ left:auto; right:0; width:auto; max-width:none; aspect-ratio:16/10;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%); mask-image:linear-gradient(90deg, transparent, #000 30%); }
  .opening .opening-frame{ left:50%; right:auto; width:calc(100vh * 16 / 10); margin-left:calc(100vh * -8 / 10); }
}