*{box-sizing:border-box}
:root{--paper:#f4f3ef;--ink:#111;--muted:#777;--line:rgba(17,17,17,.18)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-weight:300}
.nav{position:fixed;z-index:20;top:0;left:0;width:100%;height:76px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;color:#fff;mix-blend-mode:difference}
.brand{color:inherit;text-decoration:none;font-size:12px;letter-spacing:.28em;font-weight:500}
.nav nav{display:flex;gap:30px}.nav nav a{color:inherit;text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.17em}
.hero{height:50svh;min-height:380px;background:#000;position:relative;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.24)}
.hero-logo{position:absolute;inset:0;display:grid;place-items:center}
.hero-logo img{width:min(590px,74vw);filter:invert(1)}
.discover{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);color:#fff;text-decoration:none;font-size:10px;letter-spacing:.25em;border-bottom:1px solid rgba(255,255,255,.65);padding-bottom:10px}
.section{width:min(1180px,86vw);margin:auto;padding:150px 0;border-bottom:1px solid var(--line)}
.section-top{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.23em;margin-bottom:50px}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.025em}
.section h1{font-size:clamp(55px,8vw,105px);line-height:.94;margin:0 0 30px}
.intro{max-width:560px;color:#666;font-size:17px;line-height:1.65;margin:0 0 95px}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px 7vw}
.project-wide{grid-column:1/-1;display:grid;grid-template-columns:1.55fr 1fr;gap:7vw;align-items:end}
.project{margin:0}
.project-media{min-height:430px;display:grid;place-items:center;text-align:center;letter-spacing:.28em;font-size:11px}
.project-media.dark{background:#151515;color:#fff}.project-media.light{background:#dddcd7;color:#222}.project-media.mid{background:#bdbbb5;color:#111}
.project-info{margin-top:22px}.project-info span{font-size:10px;color:var(--muted);letter-spacing:.2em}.project-info h2{font-size:34px;margin:13px 0}.project-info p{font-size:14px;color:#666;line-height:1.6;margin:0}
.tariffs h1{margin-bottom:25px}.price-group{margin-top:100px}.group-title{font-size:10px;letter-spacing:.25em;color:var(--muted);padding-bottom:20px;border-bottom:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:1.35fr 1.9fr .55fr;gap:5vw;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.price-row h2{font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;letter-spacing:.01em;margin:0 0 8px}
.price-row p{font-size:13px;line-height:1.55;color:#666;margin:0;max-width:580px}
.price-row strong{font-size:14px;text-align:right;white-space:nowrap;font-weight:400}
.payment{font-size:12px;color:var(--muted);margin-top:28px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:end}.about-grid h1{font-size:clamp(70px,10vw,130px);margin:0;line-height:.83}.about-grid p{max-width:520px;color:#666;font-size:16px;line-height:1.75}.about-grid .lead{font-size:20px;color:#333;margin-bottom:30px}
.contact h1{margin-bottom:40px}.contact p{color:#666;font-size:16px}.email{display:inline-block;color:#111;text-decoration:none;border-bottom:1px solid #111;padding-bottom:10px;margin-top:30px;font-size:14px}
footer{background:#0a0a0a;color:#fff;padding:28px 4vw;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.22em}
@media(max-width:800px){
 .nav{height:65px}.nav nav{display:none}.hero{min-height:360px}.hero-logo img{width:82vw}
 .section{padding:100px 0}.portfolio-grid,.project-wide,.about-grid{display:block}
 .project{margin-bottom:80px}.project-media{min-height:320px;margin-bottom:25px}
 .price-row{display:block}.price-row strong{display:block;text-align:left;margin-top:15px}
 .price-group{margin-top:75px}.intro{margin-bottom:60px}
}

.compact-services{margin-top:80px}
.compact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 7vw;border-top:1px solid var(--line)}
.compact-grid>div{padding:25px 0;border-bottom:1px solid var(--line)}
.compact-grid h2{font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;letter-spacing:.01em;margin:0 0 8px}
.compact-grid p{font-size:13px;line-height:1.55;color:#666;margin:0}
.devis-label{font-size:11px;letter-spacing:.2em;margin-top:28px}
@media(max-width:800px){.compact-grid{display:block}}


.config-intro{font-size:14px;color:#666;line-height:1.6;max-width:560px;margin:20px 0 55px}
.config-block{border-top:1px solid var(--line);padding:28px 0}
.config-label{font-size:10px;letter-spacing:.25em;color:var(--muted);margin-bottom:10px}
.choice{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:17px 0;border-bottom:1px solid rgba(17,17,17,.1);cursor:pointer;font-size:14px}
.choice input{width:16px;height:16px;margin:0;accent-color:#111}
.choice b{font-weight:400;font-size:13px;white-space:nowrap}
.estimate{margin-top:20px;padding:30px 0;border-top:1px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.estimate span{font-size:10px;letter-spacing:.25em}
.estimate strong{font-family:Georgia,"Times New Roman",serif;font-size:42px;font-weight:400}
.estimate-note{font-size:11px;line-height:1.6;color:var(--muted);max-width:650px}

@media(max-width:800px){.choice{grid-template-columns:24px 1fr auto}.estimate strong{font-size:32px}}

.simulator 
.simulator .choice{grid-template-columns:24px 1fr}
.simulator .choice input{width:16px;height:16px;margin:0;accent-color:#111}
.calculate{margin-top:28px;border:1px solid #111;background:#111;color:#fff;padding:16px 22px;font-size:10px;letter-spacing:.2em;cursor:pointer}
.calculate:hover{background:#333}
.simulator .estimate{margin-top:45px}
.simulator .estimate[hidden]{display:none}
@media(max-width:1050px){.nav nav{gap:16px}.nav nav a{font-size:9px}}
@media(max-width:800px){.nav{padding:0 5vw}.nav nav{display:none}.simulator .estimate strong{font-size:34px}}

.simulator .configurator{margin-top:65px}
.simulator .config-block{border-top:1px solid var(--line);padding:28px 0}
.simulator .config-label{font-size:10px;letter-spacing:.25em;color:var(--muted);margin-bottom:10px}
.simulator .choice{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;padding:17px 0;border-bottom:1px solid rgba(17,17,17,.1);cursor:pointer;font-size:14px}
.simulator .choice input{width:16px;height:16px;margin:0;accent-color:#111}
.calculate{margin-top:28px;border:1px solid #111;background:#111;color:#fff;padding:16px 22px;font-size:10px;letter-spacing:.2em;cursor:pointer}
.simulator .estimate{margin-top:45px;padding:30px 0;border-top:1px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.simulator .estimate[hidden]{display:none}
.simulator .estimate strong{font-family:Georgia,"Times New Roman",serif;font-size:42px;font-weight:400}
.simulator .estimate-note{font-size:11px;line-height:1.6;color:var(--muted);max-width:650px}
@media(max-width:800px){.simulator .estimate strong{font-size:34px}}

.simulator .choice{grid-template-columns:24px 1fr auto}
.simulator .hours{border:1px solid rgba(17,17,17,.25);background:transparent;padding:7px 28px 7px 9px;font-size:12px}
.simulator .hours:disabled{opacity:.3}
@media(max-width:800px){.simulator .choice{grid-template-columns:24px 1fr}.simulator .hours{grid-column:2;margin-top:8px}}

.hour-service{padding:24px 0;border-bottom:1px solid rgba(17,17,17,.1)}
.service-check{display:flex;align-items:center;gap:12px;font-size:14px;cursor:pointer}
.service-check input{width:16px;height:16px;accent-color:#111}
.hour-options{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:17px 0 0 28px;font-size:12px;color:#666}
.hour-options span{width:100%;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.hour-options label{display:flex;align-items:center;gap:5px;cursor:pointer}
.hour-options input{accent-color:#111}
@media(max-width:800px){.hour-options{margin-left:28px;gap:10px 12px}}

/* Clips musicaux — mini carrousel */
.clips-project .clips-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 430px;
  aspect-ratio: 16 / 9;
  display: block;
  background: #151515;
}
.clips-project .clips-carousel-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}
.clips-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  font-size: 28px;
  line-height: 1;
  background: rgba(0,0,0,.55);
  color: #fff;
}
.clips-prev { left: 12px; }
.clips-next { right: 12px; }
.clips-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff;
  z-index: 2;
}
.clips-artist { font-weight: 600; }
.clips-counter { font-size: .85rem; opacity: .9; }
@media(max-width:800px){
  .clips-project .clips-carousel,
  .clips-project .clips-carousel-video { min-height: 320px; }
}

/* Navigation mobile : onglets visibles et défilables horizontalement */
@media (max-width: 800px){
  .nav{
    height: 92px;
    padding: 12px 5vw 10px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
  }
  .nav .brand{
    font-size:11px;
    white-space:nowrap;
  }
  .nav nav{
    display:flex;
    width:100%;
    max-width:100%;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{
    flex:0 0 auto;
    font-size:9px;
    letter-spacing:.14em;
    padding:4px 0;
  }
}

@media (max-width: 800px){
  .clips-project{
    width:100%;
    max-width:100%;
  }
  .clips-project .clips-carousel,
  .clips-project .project-media{
    width:100%;
    height:auto;
    min-height:0 !important;
    aspect-ratio:16 / 9;
    max-height:none;
    position:relative;
    overflow:hidden;
  }
  .clips-project .clips-carousel-video{
    width:100%;
    height:100%;
    min-height:0 !important;
    max-height:none;
    object-fit:cover;
    display:block;
  }
}

/* MOBILE NAVIGATION — always visible */
@media screen and (max-width: 800px){
  header,
  .header,
  .nav,
  .navbar{
    overflow: visible !important;
  }
  header .nav,
  .header .nav,
  .navbar{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    width:100% !important;
    min-height:72px !important;
  }
  header nav,
  .header nav,
  .navbar nav{
    display:flex !important;
    flex:1 1 auto !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    visibility:visible !important;
    opacity:1 !important;
    white-space:nowrap !important;
    gap:18px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  header nav::-webkit-scrollbar,
  .header nav::-webkit-scrollbar,
  .navbar nav::-webkit-scrollbar{display:none !important}
  header nav a,
  .header nav a,
  .navbar nav a{
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:10px !important;
    line-height:1.2 !important;
    padding:5px 0 !important;
  }
}

/* Final mobile navigation layout */
@media screen and (max-width: 800px){
  header.nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:100 !important;
    width:100% !important;
    height:auto !important;
    min-height:88px !important;
    padding:12px 5vw 10px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:8px !important;
    overflow:visible !important;
  }
  header.nav > .brand{
    display:block !important;
    width:100% !important;
    height:auto !important;
    flex:none !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }
  header.nav > nav{
    display:flex !important;
    width:100% !important;
    height:28px !important;
    flex:none !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:18px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    visibility:visible !important;
    opacity:1 !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }
  header.nav > nav::-webkit-scrollbar{display:none !important}
  header.nav > nav > a{
    display:block !important;
    flex:0 0 auto !important;
    width:auto !important;
    visibility:visible !important;
    opacity:1 !important;
    white-space:nowrap !important;
    font-size:9px !important;
    line-height:20px !important;
    padding:3px 0 !important;
    margin:0 !important;
  }
}