/* HARMATTAN V8.0 — recentrage de marque : Ash Belgeri / HARMATTAN, signe, le souffle et la machine */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}
:root {
  --ink: #080b0f;
  --ink-2: #0d131a;
  --blue: #183049;
  --blue-light: #7894a7;
  --copper: #bf7334;
  --amber: #dda458;
  --sand: #d5c8b6;
  --paper: #f3eee7;
  --white: #fbf8f2;
  --line: rgba(251, 248, 242, .14);
  --line-strong: rgba(251, 248, 242, .35);
  --glass: rgba(8, 11, 15, .78);
  --max: 1180px;
  --header-h: 72px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Archivo", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;min-width:280px;overflow-x:hidden;color:var(--white);font-family:var(--sans);font-weight:400;line-height:1.62;background:radial-gradient(circle at 78% 0,rgba(191,115,52,.10),transparent 32rem),radial-gradient(circle at 0 40%,rgba(24,48,73,.35),transparent 38rem),var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
::selection{background:rgba(191,115,52,.55);color:var(--white)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:16px;top:10px;z-index:999;transform:translateY(-160%);padding:10px 14px;background:var(--white);color:var(--ink);font-weight:800}.skip-link:focus{transform:none}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.eyebrow{margin:0 0 16px;color:var(--amber);font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.section{position:relative;padding:clamp(78px,10vw,132px) 0;border-top:1px solid var(--line)}
.section-head{max-width:900px;margin-bottom:clamp(38px,6vw,70px)}
h1,h2,h3{text-wrap:balance}
.section-head h2,.source-copy h2,.contact-copy h2,.page-hero h1{margin:0;font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:-.02em}
.section-head h2,.source-copy h2,.contact-copy h2{font-size:clamp(2.1rem,5.2vw,4.4rem)}
.section-lead{max-width:720px;margin:24px 0 0;color:rgba(251,248,242,.75);font-size:clamp(1rem,1.6vw,1.18rem)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 24px;border:1px solid var(--line-strong);font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .25s var(--ease),background .25s ease,border-color .25s ease,color .25s ease}
.button:hover,.button:focus-visible{transform:translateY(-2px);border-color:var(--copper)}.button--primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}.button--primary:hover,.button--primary:focus-visible{background:var(--white);border-color:var(--white)}.button--ghost{background:rgba(8,11,15,.35)}.button--line{background:transparent}.button[disabled]{opacity:.55;cursor:wait;transform:none}
.button__glyph{display:inline-block;width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor}
/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);display:flex;align-items:center;border-bottom:1px solid transparent;transition:height .28s ease,background .28s ease,border-color .28s ease}.site-header::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,10,.88),rgba(4,7,10,0));pointer-events:none}.site-header.is-scrolled{height:60px;background:rgba(8,11,15,.92);border-color:var(--line);backdrop-filter:blur(16px)}.site-header.is-scrolled::before{opacity:0}.site-header__inner{position:relative;z-index:1;width:min(calc(100% - 40px),var(--max));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.site-brand{transition:opacity .35s ease;font-family:var(--display);font-size:.85rem;font-weight:800;letter-spacing:.30em;white-space:nowrap}.site-nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,32px)}.site-nav a{position:relative;color:rgba(251,248,242,.75);font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.site-nav a:not(.site-nav__contact)::after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--copper);transition:right .22s var(--ease)}.site-nav a:hover,.site-nav a:focus-visible{color:var(--white)}.site-nav a:hover::after,.site-nav a:focus-visible::after{right:0}.site-nav__contact{padding:10px 14px;border:1px solid rgba(191,115,52,.68);color:var(--amber)!important}.site-nav__contact:hover{background:rgba(191,115,52,.14)}.site-nav__lang{color:var(--sand)!important}
/* Home hero */
.hero{position:relative;isolation:isolate;min-height:760px;height:min(100svh,980px);overflow:hidden;display:grid;align-items:end;background:var(--ink)}.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%}.hero__poster{z-index:-5;opacity:1;transition:opacity .6s ease,visibility 0s linear 0s}.hero__poster img{width:100%;height:100%;object-fit:cover;object-position:center}.hero__video{z-index:-4;opacity:0;object-fit:cover;object-position:center;transition:opacity .38s ease;background:var(--ink);will-change:opacity}.hero__video.is-ready{opacity:1}.hero.video-settled .hero__poster{opacity:0;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s}.hero__shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,8,11,.96) 0%,rgba(5,8,11,.80) 40%,rgba(5,8,11,.32) 74%,rgba(5,8,11,.48) 100%),linear-gradient(180deg,rgba(5,8,11,.28),rgba(5,8,11,.10) 42%,rgba(5,8,11,.92) 100%)}.hero__motion-line{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue-light),var(--copper),transparent);transform-origin:left;animation:lineBreath 7s ease-in-out infinite}.hero__content{width:min(calc(100% - 64px),var(--max));margin:0 auto;padding:calc(var(--header-h) + 40px) 0 clamp(48px,7vh,80px)}.hero__kicker{margin:0 0 18px;color:var(--sand);font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}.hero__title{margin:0;width:min(78vw,680px)}.logo-hero{width:100%;overflow:visible}.logo-hero path{stroke-dasharray:180;stroke-dashoffset:180;animation:drawLogo 1.05s var(--ease) forwards;animation-delay:calc(.09s * var(--i,0) + .12s)}.logo-hero .lettre-or path{stroke-dasharray:180;stroke-dashoffset:180;animation:drawLogo 1.25s var(--ease) forwards,barBreath 4.5s ease-in-out 2s infinite;animation-delay:1.05s,2.4s}.hero__claim{margin:clamp(18px,3.2vw,30px) 0 0;display:grid;gap:0;font-family:var(--display);font-size:clamp(2rem,4.6vw,4.4rem);font-weight:800;letter-spacing:-.02em;line-height:1;text-transform:none}.hero__claim strong{color:var(--amber);font-weight:800}.hero__descriptor{max-width:700px;margin:24px 0 0;color:rgba(251,248,242,.90);font-size:clamp(1.02rem,1.7vw,1.24rem)}.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.hero__meta{display:flex;flex-wrap:wrap;gap:13px 24px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:rgba(251,248,242,.60);font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}.hero__meta strong{color:var(--white);font-weight:600}
@keyframes drawLogo{to{stroke-dashoffset:0}}@keyframes barBreath{0%,100%{filter:drop-shadow(0 0 0 rgba(221,164,88,0))}50%{filter:drop-shadow(0 0 8px rgba(221,164,88,.55))}}@keyframes lineBreath{0%,100%{opacity:.28;transform:scaleX(.65)}50%{opacity:.9;transform:scaleX(1)}}
/* Audio dock */
.audio-dock{position:fixed;z-index:120;left:0;right:0;bottom:0;transform:translateY(110%);display:flex;align-items:center;gap:16px;padding:12px clamp(16px,4vw,40px) max(12px,env(safe-area-inset-bottom));background:rgba(6,9,12,.94);border-top:1px solid var(--line);backdrop-filter:blur(18px);transition:transform .4s var(--ease)}.audio-dock.is-open{transform:none}
.audio-dock__play{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--amber);border-radius:50%;background:transparent;color:var(--amber);cursor:pointer;transition:background .2s ease,color .2s ease}.audio-dock__play:hover{background:var(--amber);color:var(--ink)}
.audio-dock__play .icon-pause{display:none}.audio-dock.is-playing .icon-play{display:none}.audio-dock.is-playing .icon-pause{display:block}
.audio-dock__meta{min-width:0}.audio-dock__title{margin:0;font-family:var(--display);font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-dock__sub{margin:0;color:rgba(251,248,242,.55);font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.audio-dock__bar{flex:1;height:34px;display:flex;align-items:center;cursor:pointer}.audio-dock__track{position:relative;width:100%;height:3px;background:rgba(251,248,242,.18)}.audio-dock__progress{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--copper),var(--amber))}
.audio-dock__time{flex:none;color:rgba(251,248,242,.55);font-family:var(--mono);font-size:.64rem;letter-spacing:.08em}
.audio-dock__close{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:rgba(251,248,242,.5);font-size:1.1rem;line-height:1;cursor:pointer}.audio-dock__close:hover{color:var(--white)}
/* Photo band */
.photo-band{position:relative;isolation:isolate;height:clamp(340px,55vw,560px);overflow:hidden}.photo-band img{width:100%;height:100%;object-fit:cover}.photo-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px clamp(20px,5vw,60px) 26px;background:linear-gradient(180deg,transparent,rgba(5,8,11,.85));color:var(--sand);font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
/* Proof / videos */
.proof-section{background:linear-gradient(180deg,var(--ink),var(--ink-2))}.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.proof-card{border:1px solid var(--line);background:rgba(255,255,255,.02)}.proof-card__media{aspect-ratio:16/9;background:#000}.proof-card video{width:100%;height:100%;object-fit:cover}.proof-card__copy{padding:24px}.proof-card h3{margin:0 0 8px;font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;line-height:1.1}.proof-card p{margin:0;color:rgba(251,248,242,.66)}
/* Experience */
.live-intro{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:clamp(40px,7vw,90px);align-items:start}.live-copy p{max-width:680px;margin:0 0 18px;color:rgba(251,248,242,.78);font-size:clamp(1.02rem,1.6vw,1.18rem)}.live-copy__strong{color:var(--white)!important;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.3rem)!important;font-weight:700;line-height:1.14}
.instrument-stack{display:grid;gap:0;border-top:1px solid var(--line)}.instrument-card{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:baseline;padding:26px 4px;border-bottom:1px solid var(--line)}.instrument-card>span{color:var(--copper);font-family:var(--display);font-size:2rem;font-weight:800;line-height:1}.instrument-card h3{margin:0 0 6px;font-family:var(--display);font-size:1.35rem;font-weight:700}.instrument-card h3 em{font-style:normal;color:var(--amber);font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-left:10px;vertical-align:middle}.instrument-card p{margin:0;color:rgba(251,248,242,.62)}
/* Offers */
.offers-section{background:linear-gradient(180deg,var(--ink-2),var(--ink))}.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.offer-card{position:relative;min-height:390px;padding:32px;display:flex;flex-direction:column;border:1px solid var(--line);background:linear-gradient(145deg,rgba(24,48,73,.22),rgba(255,255,255,.015));overflow:hidden;transition:border-color .3s ease,transform .3s var(--ease)}.offer-card:hover{border-color:rgba(191,115,52,.55);transform:translateY(-4px)}.offer-card::before{content:"";position:absolute;inset:auto -20% -30% 15%;height:58%;background:radial-gradient(circle,rgba(191,115,52,.18),transparent 66%);pointer-events:none}.offer-card__num{position:relative;color:var(--amber);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em}.offer-card h3{position:relative;margin:24px 0 12px;font-family:var(--display);font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:800;line-height:1.02}.offer-card>p{position:relative;margin:0;color:rgba(251,248,242,.70)}.offer-card ul{position:relative;margin:24px 0 30px;padding:0;list-style:none;color:var(--sand)}.offer-card li{padding:9px 0;border-top:1px solid var(--line);font-size:.89rem}.offer-card .button{position:relative;margin-top:auto;align-self:flex-start}
/* Artist */
.artist-section{overflow:hidden}.artist-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);gap:clamp(40px,7vw,100px);align-items:center}.artist-copy p{max-width:640px;margin:22px 0 0;color:rgba(251,248,242,.78);font-size:clamp(1.02rem,1.6vw,1.18rem)}.artist-copy h2{margin:0;font-family:var(--display);font-size:clamp(2.4rem,5.4vw,4.6rem);font-weight:800;line-height:.98;letter-spacing:-.02em}
.artist-photo{position:relative}.artist-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.88) contrast(1.04)}.artist-photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid rgba(191,115,52,.5);pointer-events:none;z-index:-1}
.artist-photo figcaption{margin-top:14px;color:rgba(251,248,242,.5);font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
/* Original work */
.original-section{overflow:hidden}.original-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(40px,8vw,110px);align-items:center}.original-copy h2{margin:0;font-family:var(--display);font-size:clamp(2.2rem,5.4vw,4.6rem);font-weight:800;line-height:.98}.original-copy p{max-width:660px;margin:24px 0 0;color:rgba(251,248,242,.73);font-size:clamp(1.02rem,1.6vw,1.18rem)}.original-signature{padding:34px;border-left:2px solid var(--copper);background:rgba(255,255,255,.025)}.original-signature p{margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:700;line-height:1.18}.original-signature small{display:block;margin-top:18px;color:var(--sand);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
/* Production */
.production-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.production-item{padding:26px 22px;border-top:1px solid var(--copper);background:rgba(255,255,255,.02)}.production-item h3{margin:0 0 12px;font-family:var(--display);font-size:1.3rem;font-weight:700}.production-item p{margin:0;color:rgba(251,248,242,.65);font-size:.93rem}
/* Contact */
.contact-section{background:linear-gradient(135deg,rgba(24,48,73,.36),rgba(8,11,15,.96) 56%)}.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);gap:clamp(48px,8vw,100px);align-items:start}.contact-copy p{color:rgba(251,248,242,.72)}.contact-direct{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}.contact-direct span,.production-credit{display:block;color:var(--amber);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}.contact-direct a{display:block;margin-top:8px;font-family:var(--display);font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:700}.contact-direct a:hover{color:var(--amber)}.production-credit{margin-top:26px;color:var(--sand)}
.contact-docs{margin-top:26px;display:flex;flex-direction:column;gap:8px}.contact-docs a{display:inline-flex;align-items:center;gap:10px;color:var(--sand);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.contact-docs a::before{content:"↳";color:var(--copper)}.contact-docs a:hover{color:var(--white)}
.contact-form{display:grid;gap:13px;padding:clamp(24px,4vw,42px);border:1px solid var(--line);background:rgba(8,11,15,.62);backdrop-filter:blur(12px)}.contact-form label{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sand)}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid rgba(251,248,242,.24);border-radius:0;background:rgba(255,255,255,.035);color:var(--white);padding:13px 14px;outline:none}.contact-form select option{color:#111}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--copper);box-shadow:0 0 0 2px rgba(191,115,52,.14)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-status{min-height:1.5em;margin:0;color:var(--sand)}.form-status.is-error{color:#ffb0a4}.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
/* Footer */
.site-footer{padding:46px 0;border-top:1px solid var(--line);background:#05070a}.site-footer__inner{display:grid;grid-template-columns:1.2fr 1fr auto;gap:28px;align-items:end;color:rgba(251,248,242,.55);font-size:.78rem}.site-footer__brand{margin:0 0 6px;color:var(--white);font-family:var(--display);font-size:1.2rem;font-weight:800;letter-spacing:.22em}.site-footer__inner p{margin:0}.site-footer__links{display:flex;flex-wrap:wrap;gap:12px 18px}.site-footer__links a:hover{color:var(--white)}
.site-footer__social{display:flex;gap:14px;margin-top:10px}.site-footer__social a{color:rgba(251,248,242,.55);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}.site-footer__social a:hover{color:var(--amber)}
/* Subpage hero */
.page-hero{position:relative;isolation:isolate;min-height:640px;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;max-width:100%;overflow:hidden;background:var(--ink)}.page-hero__bg{position:absolute;inset:0;z-index:-4;opacity:1;transition:opacity .6s ease,visibility 0s linear 0s}.page-hero__bg img,.page-hero__bg video{width:100%;height:100%;object-fit:cover}.page-hero .hero__video{z-index:-3}.page-hero.video-settled .page-hero__bg{opacity:0;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s}.page-hero__shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,8,11,.96),rgba(5,8,11,.66) 52%,rgba(5,8,11,.42)),linear-gradient(180deg,rgba(5,8,11,.25),rgba(5,8,11,.9))}.page-hero__content{width:calc(100% - 40px);max-width:var(--max);min-width:0;margin:auto;padding:calc(var(--header-h) + 70px) 0 64px}.page-hero__content>*{min-width:0;max-width:100%}.page-hero h1{width:100%;max-width:980px;font-size:clamp(2.8rem,7.4vw,6.4rem);letter-spacing:-.02em}.page-hero__claim{width:100%;max-width:880px;margin:20px 0 0;font-family:var(--display);font-size:clamp(1.4rem,2.8vw,2.5rem);font-weight:700;line-height:1.1;overflow-wrap:break-word}.page-hero__lead{width:100%;max-width:760px;margin:20px 0 0;color:rgba(251,248,242,.78);font-size:clamp(1.03rem,1.8vw,1.24rem);overflow-wrap:break-word}.page-hero__actions{width:100%;display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.detail-card{padding:28px;border:1px solid var(--line);background:rgba(255,255,255,.02)}.detail-card h3{margin:0 0 12px;font-family:var(--display);font-size:1.55rem;font-weight:700}.detail-card p{margin:0;color:rgba(251,248,242,.68)}.detail-card ul{padding-left:18px;color:var(--sand)}.detail-card .eyebrow{margin-bottom:10px}
.split-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:clamp(42px,8vw,100px);align-items:start}.split-layout h2{margin:0;font-family:var(--display);font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800;line-height:.98}.quote-panel{padding:34px;border-left:2px solid var(--copper);background:rgba(255,255,255,.025)}.quote-panel p{margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:700;line-height:1.16}.quote-panel small{display:block;margin-top:18px;color:var(--sand);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
/* Reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .62s var(--ease),transform .62s var(--ease)}.js .reveal.is-visible{opacity:1;transform:none}
@media(max-width:960px){.live-intro,.original-grid,.contact-grid,.split-layout,.artist-grid{grid-template-columns:1fr}.artist-photo{max-width:420px}.offer-grid{grid-template-columns:1fr}.offer-card{min-height:auto}.production-grid{grid-template-columns:repeat(2,1fr)}.proof-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.site-footer__inner{grid-template-columns:1fr 1fr}.site-footer__inner>p:last-child{grid-column:1/-1}.hero__title{width:min(92vw,640px)}}
@media(max-width:720px){:root{--header-h:60px}.container,.site-header__inner,.page-hero__content{width:min(calc(100% - 28px),var(--max))}.site-nav__desktop{display:none}.site-nav{gap:14px}.site-nav a{font-size:.6rem}.site-nav__contact{padding:8px 10px}.hero{min-height:720px;height:100svh;align-items:end}.hero__poster img,.hero__video{object-position:54% center}.hero__shade{background:linear-gradient(180deg,rgba(5,8,11,.50) 0%,rgba(5,8,11,.42) 28%,rgba(5,8,11,.85) 60%,rgba(5,8,11,.98) 100%)}.hero__content{display:flex;flex-direction:column;height:100%;width:calc(100% - 28px);padding:calc(var(--header-h) + 10px) 0 max(32px,env(safe-area-inset-bottom))}.hero__title{order:-1;width:100%;margin:0 0 8px}.hero__kicker{margin-top:auto;margin-bottom:12px}.site-header:not(.is-scrolled):has(+ main .logo-hero) .site-brand{opacity:0}.hero__claim{font-size:clamp(1.7rem,8.4vw,2.6rem);line-height:1.04}.hero__descriptor{font-size:1rem}.hero__actions{display:grid;grid-template-columns:1fr}.hero__actions .button{width:100%}.hero__meta{font-size:.58rem;gap:8px 16px}.section{padding:76px 0}.section-head h2,.source-copy h2,.contact-copy h2{font-size:clamp(1.9rem,8.4vw,3rem)}.live-intro{grid-template-columns:1fr}.instrument-card{grid-template-columns:56px 1fr;padding:20px 2px}.instrument-card>span{font-size:1.5rem}.production-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.site-footer__inner{grid-template-columns:1fr}.site-footer__inner>p:last-child{grid-column:auto}.page-hero{min-width:0;min-height:620px}.page-hero__content{width:calc(100% - 28px);max-width:calc(100vw - 28px)}.page-hero h1{font-size:clamp(2.1rem,9.6vw,3.6rem);line-height:.96;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere;word-break:normal}.page-hero__claim{font-size:clamp(1.25rem,5.8vw,1.9rem);line-height:1.14;text-wrap:balance;overflow-wrap:anywhere}.page-hero__lead{font-size:1rem;line-height:1.55;overflow-wrap:anywhere}.page-hero__actions .button{min-width:0}.audio-dock{gap:10px}.audio-dock__time{display:none}.audio-dock__sub{display:none}.photo-band{height:clamp(260px,70vw,420px)}}
@media(max-width:380px){.page-hero__actions{display:grid;grid-template-columns:1fr}.page-hero__actions .button{width:100%}}
@media(max-width:360px){.site-brand{font-size:.74rem;letter-spacing:.23em}.site-nav__contact{display:none}.hero__claim{font-size:1.6rem}.button{font-size:.62rem;padding-inline:14px}.contact-direct a{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.logo-hero path{animation:none!important;stroke-dashoffset:0!important}.hero__motion-line{animation:none}.js .reveal{opacity:1;transform:none;transition:none}.button{transition:none}.audio-dock{transition:none}}

/* --- HARMATTAN v7.2 : bloc preuve YouTube + signature hero --- */
.proof-embed{position:relative;width:min(100%,980px);margin:0 auto;aspect-ratio:16/9;border:1px solid var(--line);background:#000;overflow:hidden}
.proof-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.proof-note{margin:20px auto 0;max-width:640px;text-align:center;color:rgba(251,248,242,.62);font-size:.95rem;line-height:1.55}
.hero__signature{margin:1rem 0 0;font-family:var(--display,inherit);letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;color:rgba(251,248,242,.78)}
@media(max-width:720px){.hero__signature{font-size:.78rem;letter-spacing:.1em}.proof-note{font-size:.88rem}}

/* --- Page mentions legales --- */
.legal-page{max-width:760px}
.legal-page h1{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:0 0 .6rem}
.legal-page h2{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:700;margin:2.6rem 0 .7rem;color:var(--gold,#C8912E)}
.legal-page p{margin:0 0 1rem;line-height:1.7;color:rgba(251,248,242,.78)}
.legal-page strong{color:rgba(251,248,242,.96)}
.legal-page a{color:var(--gold,#C8912E)}
@media(max-width:720px){.legal-page h2{margin-top:2rem}}

/* V7.3 — bloc d'écoute (Mirage) */
.listen{display:flex;align-items:center;gap:18px;width:min(100%,640px);margin:28px auto 0;padding:16px 20px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.listen__play{flex:none;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--amber);border-radius:50%;background:transparent;color:var(--amber);cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.listen__play svg{width:22px;height:22px}.listen__play .icon-pause{display:none}.listen__play[aria-pressed="true"] .icon-play{display:none}.listen__play[aria-pressed="true"] .icon-pause{display:block}
.listen__play:hover,.listen__play:focus-visible{background:var(--amber);color:var(--ink);transform:translateY(-1px)}
.listen__meta{min-width:0}.listen__meta p{margin:0}.listen__eyebrow{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.62rem;letter-spacing:.18em;color:var(--amber)}
.listen__title{font-weight:600;font-size:1.05rem;line-height:1.25;margin-top:2px!important}.listen__sub{font-size:.85rem;color:rgba(251,248,242,.62);line-height:1.45}
.section .listen{margin-bottom:36px}
@media(max-width:720px){.listen{gap:14px;padding:14px 16px}.listen__play{width:46px;height:46px}}

/* V7.3 — façade vidéo (poster local, iframe YouTube chargée au clic) */
.proof-embed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.proof-embed__play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-content:center;gap:12px;justify-items:center;border:0;background:linear-gradient(180deg,rgba(5,8,11,.10),rgba(5,8,11,.45));color:var(--white);cursor:pointer;transition:background .25s ease}
.proof-embed__play svg{width:84px;height:84px;padding:22px;box-sizing:border-box;border:1px solid var(--amber);border-radius:50%;color:var(--amber);background:rgba(6,9,12,.55);transition:background .2s ease,color .2s ease,transform .2s ease}
.proof-embed__play span{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.proof-embed__play:hover svg,.proof-embed__play:focus-visible svg{background:var(--amber);color:var(--ink);transform:scale(1.06)}
.proof-embed__play:hover,.proof-embed__play:focus-visible{background:linear-gradient(180deg,rgba(5,8,11,.05),rgba(5,8,11,.35))}
.proof-embed noscript a{position:absolute;left:16px;bottom:16px;color:var(--amber)}
@media(max-width:720px){.proof-embed__play svg{width:64px;height:64px;padding:17px}}
/* ===== V7.4 — ÉNERGIE & LUMIÈRE ===== */
body{background:radial-gradient(circle at 80% -6%,rgba(221,164,88,.16),transparent 36rem),radial-gradient(circle at -6% 40%,rgba(24,48,73,.5),transparent 40rem),radial-gradient(circle at 106% 90%,rgba(191,115,52,.12),transparent 34rem),var(--ink)}
.hero__claim{font-size:clamp(2.3rem,5.4vw,5.2rem)}
.hero__claim strong{background:linear-gradient(92deg,#f0c078,var(--amber) 55%,var(--copper));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(221,164,88,.3))}
.hero__signature{color:var(--amber);font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.22em}
.hero__motion-line{height:3px}
@keyframes hPulse{0%,100%{box-shadow:0 0 0 0 rgba(221,164,88,.45)}50%{box-shadow:0 0 0 12px rgba(221,164,88,0)}}
.listen__play,.audio-dock__play{animation:hPulse .984s ease-in-out infinite}
.listen__play:hover,.listen__play:focus-visible{background:var(--amber);color:var(--ink)}
.listen{border-color:rgba(221,164,88,.5);background:linear-gradient(135deg,rgba(221,164,88,.10),rgba(255,255,255,.02) 60%);box-shadow:0 0 44px rgba(221,164,88,.08)}
.listen__eq{display:flex;align-items:flex-end;gap:3px;height:26px;margin-left:auto}
.listen__eq span{width:4px;height:30%;background:var(--amber);opacity:.45;border-radius:1px;transition:opacity .3s ease}
.listen:has(.listen__play[aria-pressed="true"]) .listen__eq span{opacity:1;animation:hEq .49s ease-in-out infinite alternate}
.listen:has(.listen__play[aria-pressed="true"]) .listen__eq span:nth-child(2){animation-delay:.11s}
.listen:has(.listen__play[aria-pressed="true"]) .listen__eq span:nth-child(3){animation-delay:.22s}
.listen:has(.listen__play[aria-pressed="true"]) .listen__eq span:nth-child(4){animation-delay:.07s}
.listen:has(.listen__play[aria-pressed="true"]) .listen__eq span:nth-child(5){animation-delay:.16s}
@keyframes hEq{from{height:16%}to{height:100%}}
.button--primary{background:linear-gradient(92deg,#e8b46a,var(--amber));border-color:transparent;box-shadow:0 4px 22px rgba(221,164,88,.28)}
.button--primary:hover,.button--primary:focus-visible{background:var(--white);box-shadow:0 6px 34px rgba(221,164,88,.5)}
.proof-embed{border-color:rgba(221,164,88,.4);box-shadow:0 0 60px rgba(221,164,88,.07)}
.proof-embed__play:hover,.proof-embed__play:focus-visible{background:linear-gradient(180deg,rgba(5,8,11,.05),rgba(191,115,52,.35))}
.offer-card:hover{border-color:rgba(221,164,88,.6);box-shadow:0 14px 46px rgba(221,164,88,.10)}
.instrument-card>span{color:var(--amber);text-shadow:0 0 18px rgba(221,164,88,.35)}
.audio-dock.is-playing .audio-dock__play{background:var(--amber);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.listen__play,.audio-dock__play{animation:none}.listen__eq span{animation:none!important}}

/* ===== V8.0 — recentrage de marque ===== */
:root{--copper-hot:#e8863a}
.hero-field{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--ink)}
.hero-field__glow{position:absolute;left:-10%;top:10%;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,134,58,.28),rgba(191,115,52,.10) 45%,transparent 72%);filter:blur(10px);animation:glowBreath 9s ease-in-out infinite}
.hero-field__cold{position:absolute;right:-20%;bottom:-30%;width:80vw;height:80vw;max-width:1100px;max-height:1100px;border-radius:50%;background:radial-gradient(closest-side,rgba(24,48,73,.75),rgba(24,48,73,.25) 50%,transparent 72%)}
.hero-field__grain{position:absolute;inset:0;opacity:.14;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
@keyframes glowBreath{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.hero{align-items:center}
.hero__content{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,34%);gap:clamp(24px,5vw,72px);align-items:center;padding:calc(var(--header-h) + 48px) 0 clamp(48px,7vh,80px)}
.hero__text{min-width:0}
.hero__artist{margin:0 0 10px;color:var(--amber);font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.hero__title{width:auto;font-family:var(--display);font-size:clamp(3rem,7vw,6.6rem);font-weight:800;letter-spacing:-.035em;line-height:.92;color:var(--white)}
.hero__claim{margin-top:clamp(16px,2.6vw,26px);font-size:clamp(1.4rem,2.5vw,2.3rem);max-width:560px}
.hero__claim span{color:var(--white)}.hero__claim strong{color:var(--copper-hot)}
.hero__mark{justify-self:end;width:min(100%,360px)}
.sign{width:100%;height:auto;fill:var(--copper-hot)}
.sign path{transform-box:fill-box;transform-origin:50% 100%}
.hero__mark .sign path{animation:wind 1.6s var(--ease) .3s 1 both}
.hero__mark .sign .sign__m{animation-delay:.42s}.hero__mark .sign .sign__r{animation-delay:.54s}
@keyframes wind{0%{transform:skewX(0) scaleY(.92);opacity:0}35%{transform:skewX(-9deg) scaleY(1);opacity:1}70%{transform:skewX(3deg)}100%{transform:skewX(0)}}
.hero__mark .sign:hover path{animation:windLoop 2.4s ease-in-out infinite}
@keyframes windLoop{0%,100%{transform:skewX(0)}50%{transform:skewX(-6deg)}}
.hero__meta{border-top-color:var(--line)}
@media (max-width:767px){
 .hero{height:auto;min-height:0;overflow:visible}
 .hero__content{display:grid;grid-template-columns:1fr;height:auto;gap:0;padding:calc(var(--header-h) + 14px) 0 28px}
 .hero__content{position:relative}
 .hero__text{display:block}
 .hero__kicker{margin:0 0 6px;padding-right:96px}
 .hero__artist{margin:0 0 6px;font-size:.7rem;padding-right:96px}
 .hero__title{order:0;width:auto;margin:2px 0 0;font-size:clamp(2.3rem,12vw,3.6rem)}
 .hero__claim{margin-top:12px;font-size:clamp(1.25rem,6vw,1.8rem);max-width:none}
 .hero__descriptor{margin-top:12px;font-size:.98rem;line-height:1.5}
 .hero__signature{margin-top:12px;font-size:.66rem}
 .hero__actions{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .hero__actions .button{padding-left:10px;padding-right:10px;text-align:center;justify-content:center}
 .hero__meta{margin-top:20px;padding-top:14px;font-size:.56rem;gap:6px 14px}
 .hero__mark{position:absolute;right:0;top:calc(var(--header-h) + 10px);width:76px;order:0;justify-self:auto}
}
@media (max-width:360px){.hero__title{font-size:2.15rem}.hero__actions{grid-template-columns:1fr}}
/* menu mobile (construit par le JS) */
.site-nav__burger{display:none;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--white);cursor:pointer;align-items:center;justify-content:center}
.site-nav__burger .sign{width:16px;height:16px;fill:var(--white)}
.site-nav__burger[aria-expanded="true"] .sign{fill:var(--copper-hot)}
.mobile-menu{position:fixed;left:0;right:0;top:var(--header-h);z-index:99;display:none;flex-direction:column;padding:10px 14px 18px;background:rgba(8,11,15,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.site-header.is-scrolled ~ .mobile-menu,.site-header.is-scrolled .mobile-menu{top:60px}
.mobile-menu.is-open{display:flex}
.mobile-menu a{padding:14px 6px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--white)}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a.mobile-menu__contact{margin-top:10px;border:1px solid rgba(191,115,52,.68);text-align:center;color:var(--amber)}
@media (max-width:720px){.site-nav__burger{display:inline-flex}.site-nav__contact{display:none}.site-nav{gap:10px}}
@media (prefers-reduced-motion:reduce){.hero__mark .sign path,.hero-field__glow{animation:none!important}}
/* page heroes (Live / Sunset / Sync) */
.page-hero{min-height:560px}
.page-hero .hero-field{z-index:-3}
.page-hero__mark{position:absolute;right:clamp(16px,6vw,96px);top:calc(var(--header-h) + 40px);width:clamp(72px,10vw,140px);opacity:.9;z-index:-1}
@media (max-width:767px){.page-hero__mark{width:56px;top:calc(var(--header-h) + 18px);right:16px}}
/* header brand with sign */
.site-brand{display:inline-flex;align-items:center;gap:10px}
.site-brand .sign{width:16px;height:16px;flex:none}
/* mark band (replaces the photo band) */
.mark-band{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,9vw,120px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(24,48,73,.35),transparent 55%),var(--ink-2)}
.mark-band__inner{width:min(calc(100% - 40px),var(--max));margin:0 auto;display:grid;grid-template-columns:clamp(72px,12vw,150px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.mark-band__claim{margin:0;font-family:var(--display);font-size:clamp(1.9rem,5.2vw,4.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--white)}
.mark-band__claim em{font-style:normal;color:var(--copper-hot)}
.mark-band__sub{margin:18px 0 0;color:var(--sand);font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:767px){.mark-band__inner{grid-template-columns:1fr}.mark-band__inner .sign{width:64px}}
/* footer */
.site-footer__brand{display:flex;align-items:center;gap:10px}.site-footer__brand .sign{width:14px;height:14px}
.site-footer__artist{display:block;margin:0 0 4px;color:var(--amber);font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase}

/* ===================== V8.2 — HERO : CADRAGE, RESPIRATION, DYNAMIQUE ===================== */
/* Marges réelles, groupes séparés, signe en filigrane, boutons compacts. */

.hero__claim strong{
  background:linear-gradient(96deg,#f3c489 0%,var(--amber) 42%,var(--copper-hot,#e8863a) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(232,134,58,.22));
}

@media(min-width:721px){
  .hero__content{grid-template-columns:minmax(0,1fr) minmax(200px,30%);gap:clamp(32px,6vw,88px)}
  .hero__mark{opacity:.94}
  .hero__kicker{margin:0 0 14px;letter-spacing:.26em}
  .hero__artist{margin:0 0 14px;letter-spacing:.34em}
  .hero__claim{margin-top:clamp(26px,3vw,38px)}
  .hero__signature{margin-top:18px}
  .hero__actions{margin-top:clamp(34px,4vw,46px)}
  .hero__meta{margin-top:clamp(40px,5vw,58px);padding-top:22px}
}

@media(max-width:720px){
  /* 1. de vraies marges : 30px au lieu de 14 */
  .hero{min-height:640px;height:auto}
  .hero__content{
    display:flex;flex-direction:column;
    width:calc(100% - 60px);margin:0 auto;height:auto;
    padding:calc(var(--header-h) + 54px) 0 52px;
  }

  /* 2. le signe passe en filigrane : il donne de la profondeur, il n'encombre plus */
  .hero__mark{
    position:absolute;right:-14%;top:auto;bottom:6%;
    width:78%;max-width:340px;opacity:.09;pointer-events:none;z-index:-1;
  }

  /* 3. groupes espacés — identité / accroche / action / info */
  .hero__kicker{margin:0 0 10px;font-size:.6rem;letter-spacing:.24em;color:rgba(213,200,182,.82)}
  .hero__artist{margin:0 0 16px;font-size:.62rem;letter-spacing:.32em;padding-right:0}
  .hero__title{order:initial;margin:0;width:100%}
  .hero__title,.hero h1{font-size:clamp(2.6rem,13vw,3.6rem);line-height:.94;letter-spacing:-.035em}
  .hero__claim{margin-top:30px;font-size:clamp(1.5rem,6.6vw,2.05rem);line-height:1.12;letter-spacing:-.015em}
  .hero__signature{margin-top:16px;font-size:.64rem;letter-spacing:.2em;color:var(--amber)}

  /* 4. boutons compacts côte à côte : plus de gros pavés empilés */
  .hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
  .hero__actions .button{width:auto;min-height:46px;padding:0 20px;font-size:.64rem;letter-spacing:.12em}

  /* 5. la ligne d'info respire, sans trait qui coupe */
  .hero__meta{
    margin-top:44px;padding-top:0;border-top:0;
    font-size:.56rem;letter-spacing:.14em;color:rgba(251,248,242,.48);
  }
}

@media(max-width:380px){
  .hero__content{width:calc(100% - 44px)}
  .hero__actions .button{padding:0 16px;font-size:.6rem}
}

/* ---- V8.2 correctifs de cadrage ---- */
.hero__claim span,.hero__claim strong{text-wrap:balance}

@media(min-width:721px){
  /* le signe accompagne le titre, il ne le concurrence plus */
  .hero__content{grid-template-columns:minmax(0,1fr) minmax(170px,25%)}
  .hero__mark{width:min(100%,242px);opacity:.9}
  .hero__meta{border-top-color:rgba(251,248,242,.09)}
}

@media(max-width:720px){
  /* filigrane plus discret, davantage en fuite vers la droite */
  .hero__mark{right:-24%;bottom:9%;width:86%;max-width:380px;opacity:.055}
  .hero__claim{font-size:clamp(1.42rem,6.2vw,1.95rem)}
}


/* ===================== V8.2.1 — DESKTOP : COMPOSITION, PROFONDEUR ===================== */
@media(min-width:721px){
  /* le signe ( | ) cesse d'être un logo posé : il devient l'architecture du fond */
  .hero__content{grid-template-columns:minmax(0,1fr);gap:0}
  .hero__mark{
    position:absolute;right:-6%;top:50%;transform:translateY(-50%);
    width:min(52vw,620px);justify-self:auto;
    opacity:.075;z-index:-1;pointer-events:none;
  }
  .hero__text{max-width:min(62vw,760px)}
  .hero__claim{max-width:none}
  .hero__meta{max-width:640px}

  /* halo chaud recentré derrière le bloc texte */
  .hero-field__glow{left:-14%;top:4%;width:76vw;height:76vw}

  /* indice de défilement : la page dit qu'elle continue */
  .hero__scroll{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:9px;
    font-family:var(--mono);font-size:.54rem;font-weight:500;letter-spacing:.28em;
    text-transform:uppercase;color:rgba(251,248,242,.34);pointer-events:none;
  }
  .hero__scroll::after{
    content:"";width:1px;height:38px;
    background:linear-gradient(180deg,rgba(221,164,88,.75),transparent);
    animation:scrollPulse 2.6s ease-in-out infinite;
  }
}
@media(max-width:720px){ .hero__scroll{display:none} }
@keyframes scrollPulse{
  0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}
  50%{opacity:1;transform:scaleY(1);transform-origin:top}
}
@media (prefers-reduced-motion:reduce){.hero__scroll::after{animation:none}}

/* respiration verticale desktop : le bloc se pose au tiers haut, pas au centre mou */
@media(min-width:900px){
  .hero{align-items:center}
  .hero__content{padding:calc(var(--header-h) + 56px) 0 clamp(72px,10vh,120px)}
  .hero__title,.hero h1{font-size:clamp(4rem,8.2vw,7.4rem);letter-spacing:-.04em}
  .hero__claim{font-size:clamp(1.8rem,3.1vw,2.9rem);line-height:1.04}
}

/* ---- V8.2.1 correctifs ---- */
@media(min-width:900px){
  .hero__signature{margin-top:26px}
  .hero__actions{margin-top:clamp(40px,4.4vw,54px)}
}
@media(max-width:720px){
  .hero__mark{right:-34%;bottom:12%;opacity:.038}
  .hero__content{padding-bottom:40px}
}


/* =====================================================================
   V8.3 — CRÉPUSCULE MINÉRAL
   Le site jouait en acier et en console. Il joue maintenant en terre,
   en poussière et en fin de jour. Ni forêt, ni usine : vent de sable.
   ===================================================================== */

:root{
  /* les noirs cessent d'être bleus : R >= B */
  --ink:#0a0806;
  --ink-2:#120d09;
  --glass:rgba(10,8,6,.80);

  /* l'acier #183049 devient un indigo chaud de fin de jour */
  --dusk:#2a2036;
  --dusk-deep:#1a1420;
  --blue:#2a2036;
  --blue-light:#a98a76;

  /* filets : ils ne coupent plus, ils s'éteignent */
  --line:rgba(213,200,182,.12);
  --line-strong:rgba(213,200,182,.30);

  --radius:3px;
}

/* fond général : on retire le halo acier, on pose la chaleur rasante */
body{
  background:
    radial-gradient(circle at 80% -6%,rgba(191,115,52,.13),transparent 34rem),
    radial-gradient(circle at -4% 44%,rgba(42,32,54,.42),transparent 40rem),
    var(--ink);
}

/* ---- HERO : l'horizon ---- */
.hero-field__cold{
  right:-18%;bottom:-34%;
  background:radial-gradient(closest-side,rgba(42,32,54,.80),rgba(26,20,32,.30) 52%,transparent 74%);
}
.hero-field__glow{
  background:radial-gradient(closest-side,rgba(232,134,58,.30),rgba(191,115,52,.11) 46%,transparent 73%);
}
/* la bande de lumière basse : le soleil vient de passer sous la ligne */
.hero-field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(191,115,52,.10) 58%,rgba(221,164,88,.16) 100%);
  pointer-events:none;
}
.hero__shade{
  background:
    linear-gradient(90deg,rgba(8,6,4,.96) 0%,rgba(8,6,4,.80) 40%,rgba(8,6,4,.30) 74%,rgba(8,6,4,.46) 100%),
    linear-gradient(180deg,rgba(8,6,4,.26),rgba(8,6,4,.08) 42%,rgba(8,6,4,.90) 100%);
}
/* le filet du hero : le cuivre passe devant, le froid ne fait plus que soutenir */
.hero__motion-line{
  background:linear-gradient(90deg,transparent,rgba(42,32,54,.9) 18%,var(--copper) 52%,var(--amber) 72%,transparent);
}

/* ---- POUSSIÈRE EN SUSPENSION ---- */
/* le grain neutre devient de la poussière dans une lumière rasante */
.hero-field__grain{
  opacity:.20;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .78 0 0 0 0 .54 0 0 0 .62 0'/></filter><rect width='200' height='200' filter='url(%23d)'/></svg>");
  animation:dust 26s linear infinite;
}
@keyframes dust{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-1.5%,-1%,0)}
  100%{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){.hero-field__grain{animation:none}}

/* ---- FILETS QUI S'ÉTEIGNENT ---- */
/* plus aucune ligne ne coupe d'un bord à l'autre */
.section{border-top:0}
.section::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(213,200,182,.20) 22%,rgba(213,200,182,.20) 78%,transparent);
  pointer-events:none;
}
.section:first-of-type::before{display:none}
.hero__meta{border-top:0}
@media(min-width:721px){
  .hero__meta{
    position:relative;padding-top:22px;border-top:0;
  }
  .hero__meta::before{
    content:"";position:absolute;left:0;top:0;width:100%;height:1px;
    background:linear-gradient(90deg,rgba(213,200,182,.24),transparent 86%);
  }
}

/* ---- ANGLES : on sort du gabarit dashboard, sans tomber dans le doux ---- */
.button,.offer-card,.instrument-card,.proof-card,.production-grid > *,
.contact-form input,.contact-form select,.contact-form textarea,
.audio-dock,.site-nav__contact{border-radius:var(--radius)}

/* ---- LE SIGNE : une trace dans l'air, pas une dalle ---- */
.hero__mark .sign{
  fill:none;
  stroke:var(--amber);
  stroke-width:1.1;
  stroke-linejoin:round;
}
@media(min-width:721px){
  .hero__mark{opacity:.30}
  .hero__mark .sign{stroke-width:.7}
}
@media(max-width:720px){
  .hero__mark{opacity:.20}
  .hero__mark .sign{stroke-width:1.4}
}

/* ---- TYPO : le mono ne parle plus que là où il dit vrai ---- */
/* éditorial -> Inter capitales espacées ; mono gardé pour specs / espace pro */
.hero__kicker,.hero__artist,.hero__signature,.hero__meta,.hero__scroll,.eyebrow{
  font-family:var(--sans);
  font-weight:600;
}
.hero__kicker{letter-spacing:.26em}
.hero__artist{letter-spacing:.3em}
.hero__signature{letter-spacing:.2em;font-weight:600}
.hero__meta{letter-spacing:.14em;font-weight:400}
.eyebrow{letter-spacing:.2em}
/* le mono reste ici, et seulement ici */
.spec,.tech-sheet,.tech-sheet *,.pro-page .eyebrow,
.audio-dock__time,code,kbd,samp{font-family:var(--mono)}


/* ---- V8.3.1 — RETROUVER LA TENSION CHAUD/FROID ----
   Le virage terre avait tout uniformisé en sépia. Un vrai crépuscule
   n'est pas monochrome : la nuit descend par le haut (indigo froid),
   la chaleur reste en bas (l'horizon qui vient de s'éteindre). ---- */

body{
  background:
    radial-gradient(circle at 82% -8%,rgba(191,115,52,.10),transparent 30rem),
    radial-gradient(circle at 12% -10%,rgba(48,38,66,.55),transparent 44rem),
    radial-gradient(circle at -6% 52%,rgba(38,30,50,.32),transparent 38rem),
    var(--ink);
}

/* la nuit monte par le haut du hero */
.hero-field::before{
  content:"";position:absolute;left:0;right:0;top:0;height:56%;
  background:linear-gradient(180deg,rgba(40,32,58,.62) 0%,rgba(30,24,44,.26) 46%,transparent 100%);
  pointer-events:none;z-index:0;
}
/* la chaleur reste basse, un peu plus franche */
.hero-field::after{
  height:38%;
  background:linear-gradient(180deg,transparent,rgba(191,115,52,.13) 56%,rgba(221,164,88,.20) 100%);
}
/* le halo froid remonte à gauche : contrepoint du glow chaud */
.hero-field__cold{
  right:auto;left:-22%;top:-30%;bottom:auto;
  background:radial-gradient(closest-side,rgba(48,38,66,.72),rgba(32,26,46,.26) 52%,transparent 74%);
}
.hero-field__glow{left:auto;right:-16%;top:auto;bottom:-14%}

/* le grain cessait d'être poussière et devenait voile sépia */
.hero-field__grain{
  opacity:.13;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='d2'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .88 0 0 0 0 .74 0 0 0 .55 0'/></filter><rect width='200' height='200' filter='url(%23d2)'/></svg>");
}

/* le signe recule d'un cran : présence, pas occupation */
@media(min-width:721px){ .hero__mark{opacity:.22} }
@media(max-width:720px){ .hero__mark{opacity:.16} }


/* ---- V8.3.2 — COHÉRENCE : boutons, signes des pages intérieures ---- */

/* les boutons quittent le mono : ils invitent, ils ne saisissent pas une commande */
.button{font-family:var(--sans);font-weight:600;letter-spacing:.13em}
.site-nav a,.site-nav__contact,.site-brand{font-family:var(--sans)}

/* le signe des pages intérieures parle la même langue que celui de l'accueil */
.page-hero__mark .sign,.page-hero__mark svg{
  fill:none;stroke:var(--amber);stroke-width:1.3;stroke-linejoin:round;
}
.page-hero__mark{opacity:.32;width:clamp(96px,13vw,190px)}
@media(max-width:767px){.page-hero__mark{opacity:.22;width:76px}}

/* pages intérieures : même ciel que l'accueil */
.page-hero__shade{
  background:
    linear-gradient(90deg,rgba(8,6,4,.95),rgba(8,6,4,.62) 52%,rgba(8,6,4,.38)),
    linear-gradient(180deg,rgba(40,32,58,.42),rgba(8,6,4,.30) 44%,rgba(8,6,4,.88));
}


/* =====================================================================
   V8.4 — RETOUR DU LOGOTYPE
   Le tracé dessiné + la barre cuivre qui enjambe les deux T redevient
   la marque. Le signe ( | ) descend d'un cran : marque-écran seulement
   (favicon, avatar, header défilé). Jamais les deux dans le même écran.
   ===================================================================== */

/* --- le logotype dans le hero --- */
.hero__title .logo-hero{
  display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.45));
}
.hero__title{width:min(56vw,660px);margin:6px 0 0}

/* la barre cuivre respire : c'est la rafale, elle ne doit jamais être figée */
.logo-hero .lettre-or path{stroke-width:5.6}

/* --- le logo 3 pattes reste sur l'accueil, en fond --- */
/* (retiré puis rétabli : en trait fin et très transparent il n'est plus
   lu comme une seconde marque mais comme une texture ; il occupe la
   moitié droite que le logotype laisse libre) */

/* --- l'accroche redevient une phrase sous un titre, pas un second titre --- */
.hero__claim{font-weight:600}
.hero__claim strong{font-weight:700}
@media(min-width:900px){
  .hero__claim{font-size:clamp(1.45rem,2.4vw,2.25rem);line-height:1.1;margin-top:clamp(28px,3.2vw,40px)}
}
@media(max-width:720px){
  .hero__title{width:100%;margin:8px 0 0}
  .hero__claim{font-size:clamp(1.2rem,5.4vw,1.62rem);line-height:1.16;margin-top:26px}
}

/* --- le texte reprend toute la largeur maintenant que le signe est parti --- */
@media(min-width:721px){
  .hero__text{max-width:min(70vw,840px)}
}


/* ---- V8.4.1 — header : le signe reste, le mot s'efface tant que le logotype est visible ---- */
/* le mot HARMATTAN ne doit pas apparaître deux fois dans le même écran */
.site-header:not(.is-scrolled):has(+ main .logo-hero) .site-brand{opacity:1}
.site-header:not(.is-scrolled):has(+ main .logo-hero) .site-brand span{
  opacity:0;transform:translateX(-6px);transition:opacity .35s ease,transform .35s var(--ease);
}
.site-brand span{transition:opacity .35s ease,transform .35s var(--ease)}

/* le logotype occupe la largeur qu'il mérite */
.hero__title{width:min(62vw,820px)}
@media(max-width:720px){.hero__title{width:100%}}


/* ---- V8.4.3 — LE LOGO 3 PATTES PLUS PRÉSENT ----
   Il passe de texture de fond à élément de composition : trait épaissi,
   opacité remontée. En mobile il est repoussé plus loin hors du cadre
   pour qu'il gagne en présence sans passer derrière les boutons. ---- */

@media(min-width:721px){
  .hero__mark{opacity:.46;right:-4%;width:min(50vw,600px)}
  .hero__mark .sign{stroke-width:1.5}
}
@media(max-width:720px){
  .hero__mark{opacity:.30;right:-52%;bottom:2%;width:96%;max-width:420px}
  .hero__mark .sign{stroke-width:2.2}
}

/* les pages intérieures suivent le même niveau */
.page-hero__mark{opacity:.52}
.page-hero__mark .sign{stroke-width:1.9}
@media(max-width:767px){.page-hero__mark{opacity:.38}}


/* ---- V8.4.5 — CORRECTIF : débordement horizontal sur mobile ----
   Une règle mobile de la V8 mettait .hero en overflow:visible. Le logo
   3 pattes et le halo chaud, qui débordent volontairement du cadre,
   créaient donc une vraie barre de défilement horizontale : la page
   pouvait glisser de côté et couper le texte. ---- */

html{overflow-x:hidden}
@media(max-width:767px){
  .hero,.page-hero{overflow:hidden}
}
@media(max-width:720px){
  /* le logo 3 pattes déborde moins, et reste entièrement dans la découpe */
  .hero__mark{right:-26%;bottom:3%;width:84%;max-width:360px;opacity:.30}
  .hero-field__glow{right:-10%}
  .hero-field__cold{left:-16%}
}


/* ---- V8.4.6 — LE LOGO 3 PATTES EST CADRÉ, PLUS JAMAIS TRONQUÉ ----
   Il ne déborde plus du cadre : il tient entier dans l'écran, les trois
   pattes visibles. C'est un signe, pas une texture — on doit le lire. ---- */

.hero__mark{
  position:absolute;justify-self:auto;pointer-events:none;z-index:-1;
  display:block;
}
.hero__mark .sign{width:100%;height:auto}

@media(min-width:721px){
  .hero__mark{
    right:clamp(24px,5vw,92px);
    top:50%;bottom:auto;transform:translateY(-50%);
    width:clamp(210px,26vw,360px);
    opacity:.46;
  }
  .hero__mark .sign{stroke-width:1.6}
  /* le texte s'arrête avant le signe : plus de chevauchement */
  .hero__text{max-width:min(58vw,700px)}
}

@media(max-width:720px){
  .hero__mark{
    right:16px;left:auto;
    top:auto;bottom:3.5%;transform:none;
    width:min(38%,146px);
    opacity:.38;
  }
  .hero__mark .sign{stroke-width:2.4}
}


/* ===================== V8.5.1 — MOBILE : RECADRAGE, TEXTE PLUS GRAND =====================
   Trois corrections demandées : trop de vide au-dessus du kicker, texte
   trop petit, logo 3 pattes désaxé par rapport à la colonne de texte.
   ======================================================================================= */

@media(max-width:720px){

  /* 1. le vide du haut : on remonte le bloc de ~32 px */
  .hero{min-height:600px}
  .hero__content{
    position:relative;
    padding:calc(var(--header-h) + 22px) 0 34px;
  }

  /* 2. le texte respire plus grand */
  .hero__kicker{font-size:.68rem;letter-spacing:.2em;margin:0 0 9px}
  .hero__artist{font-size:.7rem;letter-spacing:.28em;margin:0 0 14px}
  .hero__title{width:100%;margin:2px 0 0}
  .hero__claim{
    margin-top:26px;
    font-size:clamp(1.46rem,6.6vw,2.05rem);
    line-height:1.14;letter-spacing:-.018em;
  }
  .hero__signature{margin-top:14px;font-size:.72rem;letter-spacing:.16em}
  .hero__actions{margin-top:30px;gap:11px}
  .hero__actions .button{min-height:50px;padding:0 22px;font-size:.7rem;letter-spacing:.11em}
  .hero__meta{margin-top:34px;font-size:.62rem;letter-spacing:.12em}

  /* 3. le logo 3 pattes s'aligne sur la colonne de texte, pas sur le bord de l'écran */
  .hero__mark{
    right:0;left:auto;
    top:auto;bottom:2%;transform:none;
    width:min(40%,158px);
    opacity:.36;
  }
  .hero__mark .sign{stroke-width:2.3}
}

@media(max-width:380px){
  .hero__content{width:calc(100% - 44px);padding-top:calc(var(--header-h) + 18px)}
  .hero__claim{font-size:clamp(1.34rem,6.4vw,1.7rem)}
  .hero__actions .button{padding:0 17px;font-size:.66rem}
  .hero__mark{width:min(38%,132px)}
}


/* ---- V8.5.2 — ALIGNEMENT OPTIQUE DU LOGO 3 PATTES ----
   Le SVG a de l'air à l'intérieur de son cadre : les pattes vont de 15 à
   87 sur 100. Aligner la BOÎTE sur la colonne laissait donc un blanc de
   13 % à droite, et le signe paraissait décalé. On aligne le dessin,
   pas la boîte. ---- */

@media(max-width:720px){
  .hero__mark{right:-21px}
}
@media(max-width:380px){
  .hero__mark{right:-17px}
}
@media(min-width:721px){
  .hero__mark{right:clamp(4px,3.4vw,58px)}
}


/* ---- V8.5.3 — DESKTOP : le signe s'aligne sur la colonne, à toute largeur ----
   Le mark est un enfant de .hero__content : on lui donne ce conteneur
   comme repère, puis on décale de l'air interne du SVG (13 %). L'aligne-
   ment suit alors automatiquement la largeur de la fenêtre. ---- */

@media(min-width:721px){
  .hero__content{position:relative}
  .hero__mark{
    right:calc(-1 * clamp(27px,3.4vw,47px));
    left:auto;
  }
}


/* ===================== V8.5.4 — ESPACE PRO =====================
   La page /pro/ vivait sur ses propres styles en dur (bordures nettes,
   rayon 2 px, boutons réinventés, cache CSS resté en 7.5.1). Elle passe
   sur le design system du site. Sobre : c'est une page de travail, un
   superviseur musical vient y écouter et télécharger, pas admirer.
   =============================================================== */

.pro-section{padding-top:clamp(52px,7vw,84px)}
.pro-wrap{max-width:900px}

.track{
  position:relative;
  padding:clamp(24px,3.4vw,34px) 0 clamp(28px,3.6vw,38px);
}
.track + .track{margin-top:4px}
.track::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(213,200,182,.22),rgba(213,200,182,.06) 62%,transparent);
}
.track__head{margin:0 0 20px}
.track__num{
  margin:0 0 8px;color:var(--amber);font-family:var(--sans);
  font-size:.64rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.track__title{
  margin:0 0 8px;font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1;letter-spacing:-.03em;color:var(--white);
}
.track__spec{
  margin:0;color:rgba(251,248,242,.56);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
}

/* lecteur natif conservé : un pro veut une barre où se déplacer */
.track__player{
  width:100%;display:block;margin:0 0 20px;
  border-radius:var(--radius);
  accent-color:var(--copper);
  color-scheme:dark;
}

.track__dl{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.track__dl .button{min-height:46px;padding:0 20px;gap:9px}
.track__dl .button span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;opacity:.62;font-weight:500;
}

.track__creds{margin:0;display:grid;gap:9px}
.track__creds > div{
  display:grid;grid-template-columns:168px minmax(0,1fr);gap:16px;align-items:baseline;
}
.track__creds dt{
  color:rgba(213,200,182,.72);
  font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.track__creds dd{margin:0;color:rgba(251,248,242,.80);font-size:.88rem;line-height:1.5}

.pro-note{
  margin-top:clamp(38px,5vw,56px);
  padding:clamp(22px,3vw,30px);
  border:1px solid rgba(213,200,182,.14);border-radius:var(--radius);
  background:rgba(221,164,88,.035);
}
.pro-note__title{
  margin:0 0 12px;color:var(--amber);font-family:var(--sans);
  font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.pro-note p{margin:0 0 10px;color:rgba(251,248,242,.76);font-size:.92rem;line-height:1.6}
.pro-note p:last-child{margin-bottom:0}
.pro-note [lang="en"]{color:rgba(213,200,182,.62);font-style:italic}
.pro-note__contact a{color:var(--amber);font-weight:600}
.pro-note__contact a:hover{text-decoration:underline}

.page-hero__lead [lang="en"]{display:block;margin-top:8px;color:rgba(213,200,182,.62);font-style:italic;font-size:.95em}

@media(max-width:720px){
  .track__creds > div{grid-template-columns:1fr;gap:3px}
  .track__creds dd{font-size:.86rem}
  .track__dl .button{flex:1 1 auto;justify-content:center}
}


/* ---- V8.5.5 — correctifs espace pro ---- */

/* le lecteur natif et les contrôles de formulaire passent en sombre :
   le lecteur gris clair de Chrome était la seule tache claire du site */
:root{color-scheme:dark}

/* le contenu s'aligne sur la colonne du page-hero au lieu d'être recentré */
.pro-wrap{max-width:none}
.track,.pro-note{max-width:900px}

.track__player{
  background:rgba(251,248,242,.05);
  border:1px solid rgba(213,200,182,.10);
}

/* ====================================================================
   V8.7 — PLACEMENT : plus aucune coupe de ligne laissée au hasard
   Le kicker se cassait en « LIVE ÉLECTRO · 3 » / « SAXOPHONES »
   selon la largeur et le réglage de taille de texte du téléphone.
   Il ne se casse plus : en mobile il est composé sur deux lignes,
   par décision et non par débordement.
   ==================================================================== */

/* 1. Kicker : unité typographique, jamais un flux qui se replie */
.hero__kicker{display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap}
.hero__kicker i{font-style:normal;margin:0 .6em;opacity:.55}
.hero__kicker span{white-space:nowrap}

@media(max-width:767px){
  /* deux lignes assumées, pas de point médian orphelin */
  .hero__kicker{display:block;padding-right:0;white-space:normal}
  .hero__kicker i{display:none}
  .hero__kicker span{display:block;white-space:nowrap}
  .hero__kicker span + span{margin-top:.28em;color:rgba(213,200,182,.62)}
  /* le nom d'artiste n'a plus à esquiver le logo 3 pattes : il est sous lui */
  .hero__artist{padding-right:0}
}

/* 2. Titres et accroches : la ligne se répartit, elle ne laisse plus de veuve */
h1,h2,h3,
.hero__claim,.page-hero__claim,.section-head h2,
.offer-card h3,.track__title,.contact-copy h2,.source-copy h2{
  text-wrap:balance;
}

/* 3. Prose : un mot seul sur la dernière ligne, c'est fini */
p,li,dd,.section-lead,.page-hero__lead,.hero__descriptor,.pro-note p{
  text-wrap:pretty;
}

/* 4. Boutons : le libellé ne se coupe plus en deux */
.button{text-wrap:balance}

/* ====================================================================
   V8.8 — PLACEMENT DU LOGO 3 PATTES EN MOBILE
   Mesuré : le signe (y 426→558) traversait les boutons (y 434→484) et
   la ligne de méta (y 518→535). Il ne se superposait pas à un décor,
   il se superposait à l'appel à l'action.
   Il a maintenant sa propre bande, sous la méta. Il reste entier,
   présent, et ne croise plus rien.
   ==================================================================== */
@media(max-width:767px){
  .hero{min-height:0}
  .hero__content{padding-bottom:calc(34px + min(34vw,128px))}
  .hero__mark{
    top:auto;bottom:18px;right:-17px;
    width:min(34vw,128px);
    opacity:.42;
  }
  .hero__mark .sign{stroke-width:2.2}
}
@media(max-width:380px){
  .hero__mark{width:min(32vw,108px);right:-14px}
  .hero__content{padding-bottom:calc(30px + min(32vw,108px))}
}

/* ====================================================================
   V8.9 — LE HERO RÉGLÉ SUR LE POST MIRAGE
   Un seul objet grand et vivant, tout le reste petit et précis autour.
   Le logotype nomme, en haut à gauche. Le signe est l'objet, en haut à
   droite : plein, texturé, au bord tremblé, il respire au tempo.
   Et en bas, la main sur les clés — ce qu'aucun traitement graphique
   ne pouvait remplacer.
   ==================================================================== */

/* --- 1. le fond redevient neutre : dans le post, la chaleur vient de l'objet --- */
.hero .hero-field::before{opacity:.45}
.hero .hero-field::after{opacity:.55}
.hero__motion-line{opacity:.5}
.hero__scroll{display:none}

/* --- 2. la colonne de texte et l'objet se partagent la ligne de tête --- */
.hero__content{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,46%);
  column-gap:14px;
  align-items:start;
}
.hero__text{grid-column:1;grid-row:1}
.hero__mark{
  grid-column:2;grid-row:1;
  position:static;justify-self:end;align-self:start;
  width:100%;max-width:236px;margin:-4px 0 0;right:auto;left:auto;top:auto;bottom:auto;
  opacity:1;line-height:0;
}

/* --- 3. le signe : matière, bord tremblé, respiration --- */
.hero__mark .sign{
  width:100%;height:auto;aspect-ratio:1;overflow:visible;stroke:none;
  filter:drop-shadow(0 0 54px rgba(226,138,64,.22));
}
.hero__mark .sign path{
  fill:url(#hm-gouache);stroke:none;
  transform-box:fill-box;transform-origin:center;
}
/* 1,475 s = trois temps à 122 BPM, le tempo de Mirage.
   Relevé image par image : l'épaisseur des pattes ne bouge pas,
   c'est l'écart entre elles qui s'ouvre et se referme. */
.hero__mark .sign .sign__l{animation:ouvreG 1.475s ease-in-out infinite}
.hero__mark .sign .sign__r{animation:ouvreD 1.475s ease-in-out infinite}
.hero__mark .sign .sign__m{animation:pulseC 1.475s ease-in-out infinite}
.hero__mark .sign:hover path{animation-play-state:running}
@keyframes ouvreG{0%,100%{transform:translateX(0)}50%{transform:translateX(-3.4%)}}
@keyframes ouvreD{0%,100%{transform:translateX(0)}50%{transform:translateX(3.4%)}}
@keyframes pulseC{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}

/* --- 4. le logotype reprend sa taille de signature --- */
.hero__title{width:100%;max-width:182px;margin:2px 0 0}
.hero__title .logo-hero{width:100%}
.hero__title .logo-hero path{stroke-width:4.4}

/* --- 5. la bande photo : un geste, pas un portrait --- */
.hero-bande{
  position:relative;margin:clamp(26px,5vw,40px) 0 0;
  width:100%;height:clamp(180px,42vw,260px);overflow:hidden;
}
.hero-bande img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
.hero-bande::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(10,8,6,.08) 24%,
    rgba(10,8,6,.08) 76%,var(--ink) 100%);
}

@media(min-width:900px){
  .hero__content{grid-template-columns:minmax(0,1fr) minmax(0,38%);column-gap:5vw}
  .hero__mark{max-width:420px}
  .hero__title{max-width:300px}
  .hero-bande{height:clamp(240px,20vw,320px)}
}
@media(prefers-reduced-motion:reduce){
  .hero__mark .sign path{animation:none!important}
}

/* ---- V8.9.1 — mobile : le signe se pose en haut à droite, il ne prend
   pas une colonne. Sinon l'accroche et les boutons se retrouvent
   comprimés dans 54 % de la largeur. ---- */
@media(max-width:767px){
  .hero__content{display:block;position:relative}
  .hero__mark{
    position:absolute;top:0;right:0;
    width:min(44vw,196px);max-width:none;margin:0;
  }
  /* la colonne de tête laisse passer le signe, le reste prend toute la largeur */
  .hero__kicker,.hero__artist,.hero__title{padding-right:min(48vw,212px)}
  .hero__title{max-width:none;width:100%}
  .hero__claim,.hero__signature,.hero__actions,.hero__meta{padding-right:0}
  .hero__actions{display:flex;flex-wrap:wrap;gap:10px}
  .hero__actions .button{width:auto;flex:0 0 auto}
}

/* ---- le fond passe au noir du post : la chaleur vient de l'objet ---- */
.hero .hero-field::before{opacity:.34}
.hero .hero-field::after{opacity:.38}
.hero .hero-field__glow{opacity:.30}

/* ---- V8.9.2 — le signe passait sous le header et se faisait couper en haut.
   Il descend au niveau du kicker, et le vide sous la méta est résorbé. ---- */
@media(max-width:767px){
  .hero__mark{top:calc(var(--header-h) + 16px)}
  .hero__content{padding-bottom:16px}
}
@media(min-width:768px){
  .hero__content{padding-bottom:clamp(20px,3vh,36px)}
}

/* ---- V8.9.3 — le signe flotte à droite DANS la colonne de texte.
   Mesuré : en grille il chevauchait l'accroche de 360 à 412 px, et en
   desktop il sortait par le haut parce que le hero était calé en bas.
   Un flottant ne peut pas chevaucher le texte : le texte le contourne,
   puis reprend toute la largeur en dessous. ---- */
.hero{height:auto;min-height:0;align-items:start}
.hero__content{display:block;position:relative;padding-bottom:clamp(18px,3vh,34px)}
.hero__text{display:block}
.hero__mark{
  float:right;position:static;
  width:min(44vw,196px);max-width:none;
  margin:0 0 12px 16px;shape-margin:12px;
  opacity:1;line-height:0;
}
.hero__kicker,.hero__artist,.hero__title{padding-right:0}
.hero__title{max-width:min(52vw,230px);width:100%}
.hero__claim,.hero__signature,.hero__actions,.hero__meta{clear:none}
.hero__actions{clear:both;padding-top:4px}

@media(min-width:768px){
  .hero{height:auto;min-height:0}
  .hero__mark{width:min(34vw,400px);margin:0 0 18px 4vw}
  .hero__title{max-width:min(30vw,300px)}
}

/* ---- V8.9.4 — trois régions explicites plutôt qu'un flottant.
   Le flottant ne poussait que les lignes de texte, pas le logotype
   (un SVG en bloc) : le signe passait dessous. On donne donc au signe
   sa propre colonne, sur la ligne de tête uniquement. ---- */
.hero__text{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,46%);
  column-gap:14px;
  align-items:start;
}
.hero__tete{grid-column:1;grid-row:1;min-width:0}
.hero__mark{
  grid-column:2;grid-row:1;
  float:none;position:static;justify-self:end;align-self:start;
  width:100%;max-width:196px;margin:0;
}
.hero__bas{grid-column:1 / -1;grid-row:2;min-width:0;margin-top:clamp(18px,4vw,30px)}
.hero__title{max-width:none;width:100%}

@media(min-width:768px){
  .hero__text{grid-template-columns:minmax(0,1fr) minmax(0,38%);column-gap:5vw}
  .hero__mark{max-width:400px}
  .hero__bas{margin-top:clamp(24px,3vw,44px)}
}

/* ---- V8.9.5 — deux anciennes règles desktop centraient encore le signe
   par transform:translateY(-50%) : en grille, ça le remontait de la
   moitié de sa hauteur et il passait sous le header. ---- */
.hero__mark{transform:none;top:auto;bottom:auto;left:auto;right:auto}

/* ---- V8.9.6 — le voile indigo du hero est encore visible en haut à gauche.
   Dans le post, le fond est neutre et toute la chaleur vient de l'objet. ---- */
.hero .hero-field::before{opacity:.18}
.hero .hero-field::after{opacity:.26}
.hero .hero-field__cold{opacity:.20}
.hero .hero-field__glow{opacity:.22}
/* et le hero se resserre : moins de vide entre le logotype et l'accroche */
@media(min-width:768px){
  .hero__bas{margin-top:clamp(20px,2.4vw,34px)}
  .hero__content{padding-top:calc(var(--header-h) + clamp(26px,4vh,46px))}
}


/* ====================================================================
   V8.10 — MOBILE : LE SIGNE PASSE EN HAUT À GAUCHE
   Demande de Pascal. En desktop rien ne bouge : le logotype nomme à
   gauche, le signe est l'objet à droite. En mobile les deux colonnes
   s'échangent — le signe prend la colonne de gauche, la tête de texte
   (kicker, nom, logotype) vient à sa droite.
   ==================================================================== */
@media(max-width:767px){
  .hero__text{grid-template-columns:minmax(0,46%) minmax(0,1fr)}
  .hero__mark{grid-column:1;grid-row:1;justify-self:start}
  .hero__tete{grid-column:2;grid-row:1}
}

/* ===========================================================
   LETTRAGE HARMATTAN — à coller À LA FIN de la feuille de style
   Police : assets/fonts/HarmattanTrace.woff2 (20 Ko)
   (le chemin ci-dessous part de assets/css/ , pas de la racine)
   Posé le 25/09/2026
   =========================================================== */

@font-face{
  font-family: "Harmattan Trace";
  src: url("../fonts/HarmattanTrace.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Les grands titres et les accroches de hero.
   PAS les h3 des cartes (36 px) : à cette taille le trait ne pèse
   plus assez face au texte courant et la hiérarchie s'aplatit. */
h1,
h2,
.hero__claim,
.page-hero__claim{
  font-family: "Harmattan Trace", "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 400;          /* l'alphabet n'a qu'une graisse */
  letter-spacing: .004em;
}

/* L'alphabet a des accents hauts et des descendantes longues.
   À 0,97 d'interligne, le « p » de « apportez » venait frôler
   la ligne du dessous sur les titres de deux lignes. */
h1,
h2{
  line-height: 1.06;
}

/* Le souffle : UNE fois à l'apparition, jamais en boucle.
   1,475 s = trois temps à 122 BPM. */
@keyframes harmattan-souffle{
  0%   { transform: scale(1);     opacity: .86 }
  34%  { transform: scale(1.022); opacity: 1 }
  100% { transform: scale(1);     opacity: 1 }
}
.hero__claim,
.page-hero__claim{
  animation: harmattan-souffle 1.475s cubic-bezier(.4,0,.3,1) 1 both;
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce){
  .hero__claim,
  .page-hero__claim{ animation: none }
}