:root{--paper:#f4f2ec;--ink:#111;--line:#d7d4cd;--muted:#5f5e59;--panel:#deddd7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}button,input,textarea{font:inherit}.skip-link{position:fixed;z-index:100;left:16px;top:12px;padding:12px 16px;background:#fff;color:#111;transform:translateY(-160%)}.skip-link:focus{transform:none}header{height:68px;padding:0 clamp(20px,4vw,68px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,242,236,.96);backdrop-filter:blur(8px);z-index:20}header a{text-decoration:none}.brand{display:flex;align-items:center}.brand img{display:block;width:190px;height:auto;max-height:38px;object-fit:contain}nav{display:flex;align-items:center;gap:25px}nav a{font-size:13px}.nav-cta{border:1px solid #111;border-radius:999px;padding:10px 14px;font-weight:700}.menu-toggle{display:none;border:0;background:transparent;padding:12px;cursor:pointer}.menu-toggle i,.menu-toggle i::before,.menu-toggle i::after{display:block;width:22px;height:2px;background:#111;content:"";position:relative}.menu-toggle i::before{position:absolute;top:-7px}.menu-toggle i::after{position:absolute;top:7px}.menu-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hero{background:#111}.hero img{display:block;width:100%;height:auto}.intro,.statement,.offer,.about,.contact{padding:clamp(75px,10vw,145px) clamp(22px,8vw,120px);display:grid;grid-template-columns:1fr 4fr;gap:30px}.kicker{font-size:12px;letter-spacing:.14em;font-weight:800;margin:0}.intro h1,.statement h2,.offer h2,.reference h2,.about h2,.contact h2{font-size:clamp(48px,7vw,100px);line-height:.95;letter-spacing:-.06em;margin:0 0 30px}.lead,.statement div>p:not(.kicker),.about div>p,.contact>div>p{font-size:clamp(18px,2vw,24px);line-height:1.5;max-width:800px}.button{display:inline-block;border:1px solid #111;border-radius:999px;background:#111;color:#fff;text-decoration:none;font-weight:700;padding:15px 22px;margin-top:24px;cursor:pointer}.button:hover{background:#333}.steps{display:grid;grid-template-columns:repeat(3,1fr);background:#111;color:var(--paper);padding:0 clamp(22px,8vw,120px)}.steps article{padding:60px 38px 70px 0;min-height:330px;border-right:1px solid #333}.steps article+article{padding-left:38px}.steps article:last-child{border:0}.steps b{font-size:12px}.steps h2{font-size:clamp(32px,4vw,52px);margin:75px 0 12px;letter-spacing:-.05em}.steps p{color:#c5c3bd;line-height:1.5;max-width:290px}.statement{background:var(--panel)}.statement h2{margin-top:18px}.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:35px}.tags span{border:1px solid #777;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700}.offer ol{list-style:none;margin:35px 0 0;padding:0;border-top:1px solid #aaa;counter-reset:offer}.offer li{counter-increment:offer;display:grid;grid-template-columns:55px minmax(220px,1fr) 1.5fr;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid #aaa}.offer li::before{content:"0" counter(offer);font-size:12px;font-weight:800}.offer li b{font-size:20px}.offer li span{color:var(--muted);line-height:1.4}.reference{display:grid;grid-template-columns:1fr 1fr;background:#111;color:var(--paper)}.reference-copy{padding:clamp(65px,8vw,120px)}.reference-copy p:not(.kicker){font-size:18px;line-height:1.55;max-width:620px;color:#d0cec8}.button-light{background:var(--paper);color:#111;border-color:var(--paper)}.button-light:hover{background:#fff}.reference-map{display:flex;min-height:600px;background:#e7e1d4}.reference-map img{width:100%;height:100%;object-fit:cover}.about{background:var(--panel)}.contact form{max-width:720px;display:grid;gap:18px}.contact label{display:grid;gap:8px;font-weight:700;font-size:14px}.contact input,.contact textarea{width:100%;border:1px solid #8c8a84;border-radius:4px;background:#fff;padding:13px;color:#111}.contact textarea{resize:vertical}.contact .button{justify-self:start;margin:4px 0 0}.form-note{font-size:13px;line-height:1.45;color:var(--muted);margin:0}.direct-contact{font-size:16px!important;margin-top:26px}.direct-contact a{font-weight:700}.legal{max-width:900px;margin:auto;padding:100px 28px 140px}.legal h1{font-size:clamp(52px,8vw,96px);letter-spacing:-.06em;line-height:.95}.legal h2{margin-top:45px;font-size:24px}.legal p{font-size:17px;line-height:1.65}.legal-warning{margin-top:60px;padding:22px;border:1px solid #999}footer{display:grid;grid-template-columns:2fr 1fr auto;gap:40px;align-items:end;background:#111;color:#aaa;padding:48px clamp(22px,8vw,120px);font-size:12px}footer img{filter:invert(1);width:150px}footer p{margin:12px 0 0}footer>div:nth-child(2){display:grid;gap:10px}footer a{color:#eee;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #1769ff;outline-offset:4px}@media(max-width:900px){nav{gap:15px}.reference{grid-template-columns:1fr}.reference-map{min-height:420px}.offer li{grid-template-columns:45px 1fr}.offer li span{grid-column:2}}@media(max-width:720px){header{height:60px}.brand img{width:155px;max-height:30px}.menu-toggle{display:block}nav{display:none;position:absolute;top:60px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:18px 22px 24px;flex-direction:column;align-items:stretch;gap:0}nav a{font-size:17px;padding:14px 2px}.nav-cta{text-align:center;margin-top:10px;padding:13px}.menu-open nav{display:flex}.hero{overflow:hidden}.hero img{width:178%;max-width:none;transform:translateX(-3%)}.intro,.statement,.offer,.about,.contact{grid-template-columns:1fr;padding-top:70px;padding-bottom:75px}.intro h1,.statement h2,.offer h2,.reference h2,.about h2,.contact h2{font-size:50px}.steps{grid-template-columns:1fr}.steps article,.steps article+article{min-height:auto;padding:42px 0;border-right:0;border-bottom:1px solid #333}.steps h2{margin:30px 0 10px}.offer li{grid-template-columns:38px 1fr;gap:14px}.offer li b{font-size:18px}.reference-copy{padding:70px 22px}.reference-map{min-height:330px}footer{grid-template-columns:1fr;gap:28px;align-items:start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.intro.intro-simple{display:block}.intro-simple .lead{margin:0;max-width:980px}.statement-listening{background:var(--paper)}.statement-listening div>p{margin-top:0}.offer-intro{font-size:clamp(18px,2vw,24px);line-height:1.5;max-width:800px;color:var(--ink)}

/* V12.34 */
.practical,.composer{padding:clamp(75px,10vw,145px) clamp(22px,8vw,120px);display:grid;grid-template-columns:1fr 4fr;gap:30px}
.practical{background:var(--panel)}
.practical h2,.composer h2{font-size:clamp(48px,7vw,100px);line-height:.95;letter-spacing:-.06em;margin:0 0 45px}
.practical-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #aaa;border-bottom:1px solid #aaa}
.practical-grid article{padding:28px 24px 30px 0;border-right:1px solid #aaa;min-width:0}
.practical-grid article+article{padding-left:24px}
.practical-grid article:last-child{border-right:0}
.practical-grid h3{font-size:clamp(24px,2.5vw,34px);letter-spacing:-.04em;margin:0 0 18px}
.practical-grid p{margin:0;color:var(--muted);line-height:1.5}
.long-term{margin-top:55px;display:grid;grid-template-columns:1fr 3fr;gap:30px;align-items:start}
.long-term>p:last-child{font-size:clamp(18px,2vw,24px);line-height:1.5;margin:0;max-width:800px}
.composer{background:var(--paper)}
.composer>div>p{font-size:clamp(18px,2vw,24px);line-height:1.5;max-width:800px;margin:0 0 22px}
@media(max-width:900px){.practical-grid{grid-template-columns:repeat(2,1fr)}.practical-grid article:nth-child(2){border-right:0}.practical-grid article:nth-child(-n+2){border-bottom:1px solid #aaa}.practical-grid article:nth-child(3){padding-left:0}.long-term{grid-template-columns:1fr}}
@media(max-width:720px){.practical,.composer{grid-template-columns:1fr;padding-top:70px;padding-bottom:75px}.practical h2,.composer h2{font-size:50px}.practical-grid{grid-template-columns:1fr}.practical-grid article,.practical-grid article+article{padding:26px 0;border-right:0;border-bottom:1px solid #aaa}.practical-grid article:last-child{border-bottom:0}.long-term{margin-top:45px;gap:18px}}

/* V12.34 | sections de navigation harmonisées */
.section-standard{scroll-margin-top:68px}
@media(max-width:720px){.section-standard{scroll-margin-top:60px}}


/* V12.35 | ajustements graphiques */
.statement h2,.offer h2,.practical h2,.reference h2,.contact h2{
  font-size:clamp(32px,4vw,52px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:0;
}
.statement h2{margin-top:0}
.statement>div>p,.offer-intro{
  margin:0 auto;
  max-width:800px;
  text-align:center;
}
.statement .tags{justify-content:center}
.offer ol{margin-top:45px}
.practical h2{max-width:360px}
.reference h2{margin-bottom:28px}
.composer>div{max-width:800px;margin:0 auto}
.composer>div>p:first-child{margin-top:0}
.contact-heading h2{margin-top:22px}
.contact>div:last-child{max-width:800px}
@media(max-width:720px){
  header{padding-left:12px}
  .statement h2,.offer h2,.practical h2,.reference h2,.contact h2{font-size:36px}
  .statement>div>p,.offer-intro{text-align:left;margin-left:0}
  .statement .tags{justify-content:flex-start}
  .practical h2{max-width:none}
  .contact-heading h2{margin-top:16px}
}


/* V12.36 | grille graphique commune */
:root{--section-left:clamp(290px,24vw,430px);--section-gap:clamp(36px,6vw,110px)}
.intro-simple .lead{margin-left:auto;margin-right:auto;text-align:center;max-width:980px}
.statement,.offer,.practical,.composer,.contact{grid-template-columns:var(--section-left) minmax(0,1fr);gap:var(--section-gap)}
.statement h2,.offer h2,.practical h2,.composer h2,.contact h2{font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:-.045em;margin:0;font-weight:700}
.statement h2,.offer h2,.composer h2,.contact h2{white-space:nowrap}
.statement>div,.offer>div,.practical>div,.composer>div,.contact>div:last-child{min-width:0}
.statement>div>p,.offer-intro{margin:0 auto;max-width:800px;text-align:center}
.statement .tags{justify-content:center}
.practical h2{max-width:430px}
.composer>div{max-width:800px;margin:0}
.contact-heading h2{margin:0;max-width:430px;white-space:normal}
.contact>div:last-child{max-width:800px;margin:0}
.contact>div:last-child>p{margin-top:0}
.steps{padding-left:clamp(22px,6vw,90px);padding-right:clamp(22px,6vw,90px)}
.steps article,.steps article+article{padding:48px clamp(20px,3vw,42px) 52px;min-height:285px}
.steps article{display:flex;flex-direction:column;align-items:flex-start}
.steps article>*{width:min(100%,310px);margin-left:auto;margin-right:auto}
.steps h2{margin-top:48px;margin-bottom:12px}
@media(max-width:720px){
  header{padding-left:20px}
  .brand{transform:translateX(-12px)}
  .intro-simple .lead{text-align:center}
  .statement,.offer,.practical,.composer,.contact{grid-template-columns:1fr;gap:30px}
  .statement h2,.offer h2,.practical h2,.composer h2,.contact h2{font-size:36px;white-space:normal}
  .statement>div>p,.offer-intro{text-align:center;margin-left:auto;margin-right:auto}
  .statement .tags{justify-content:center}
  .steps article,.steps article+article{padding:38px 0 42px}
  .steps article>*{width:100%;margin-left:0;margin-right:0}
  .steps h2{margin-top:28px}
}

/* Alignements de contenu */
.intro-simple .lead{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.statement>div>p,.offer-intro{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.steps article>*{
  width:310px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:720px){
  .brand{transform:translateX(-25px)}
  .intro-simple .lead,
  .statement>div>p,
  .offer-intro{
    text-align:left;
  }
  .steps article>*{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}


/* Fond, alignement du logo et exemple responsive */
header{background:rgba(244,242,236,.98);padding-left:2.8vw}
.reference-map img{object-position:center center}
@media(max-width:900px){
  .reference{grid-template-columns:1fr}
  .reference-map{min-height:0}
  .reference-map img{height:auto;aspect-ratio:auto;object-fit:contain}
}
@media(max-width:720px){
  header{padding-left:20px}
  .brand{transform:translateX(-1px)}
  .reference-map{width:100%;min-height:0}
  .reference-map img{width:100%;height:auto;object-fit:contain}
}


/* V12.47 | expérience intégrée à la page principale */
.reference-interactive{align-items:center}
.reference-interactive .reference-copy{align-self:center}
.reference-interactive .button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.reference-interactive .button:disabled{opacity:.65;cursor:wait}
.experience-icon{display:inline-block;flex:0 0 auto}
.experience-icon.play-icon{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;margin-left:2px}
.experience-icon.stop-icon{width:11px;height:11px;background:currentColor;border-radius:1px}
.experience-note{font-size:13px!important;margin:15px 0 0!important;font-weight:700}
.experience-status{font-size:13px!important;line-height:1.4!important;margin:7px 0 0!important;opacity:.68;max-width:390px}
.interactive-map{position:relative;display:block;overflow:hidden;line-height:0;cursor:crosshair;touch-action:none;user-select:none;background:transparent}
.interactive-map img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}
.experience-walker{position:absolute;left:46.45%;top:19.61%;width:18px;height:18px;border-radius:50%;border:3px solid #fff;background:#111;box-shadow:0 0 0 2px #111,0 0 0 11px rgba(255,255,255,.25);transform:translate(-50%,-50%);z-index:4;pointer-events:none}
@media(max-width:900px){.reference-interactive{display:block}.reference-interactive .reference-copy{padding-bottom:30px}.interactive-map{width:100%;min-height:0}.interactive-map img{width:100%;height:auto}.experience-walker{width:16px;height:16px}}

/* V12.47 | suppression de la bande sous la carte interactive */
.reference-interactive .reference-map{min-height:0}

/* V12.47 | repositionnement éditorial sans modification des grilles */
.intro-signature{max-width:980px;margin:24px auto 0;font-size:16px;line-height:1.5;font-weight:700;text-align:left}
.street-sound-art{margin:10px 0 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#eee}
@media(max-width:720px){.intro-signature{margin-top:20px;text-align:left}}

/* V12.47 | footer : signature simplifiée et alignement du bloc marque */
footer>div:first-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
footer>div:first-child img{display:block;margin:0}
footer>div:first-child .street-sound-art{margin:10px 0 0}

/* V12.47 | footer : STREET / SOUND / ART sur la largeur du logo */
footer>div:first-child{width:150px}
footer>div:first-child img{width:150px}
footer>div:first-child .street-sound-art{width:150px;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.04em;font-weight:700;white-space:nowrap}
footer>div:first-child .street-sound-art span{display:block}