/* ==========================================================================
   LM3 Sonorisation — feuille de style de la refonte 2026
   Univers "fiche technique de concert" : fond sombre, ambre / rouge gélatine,
   Anton pour les titres, IBM Plex Mono pour le reste (esprit rider technique).
   ========================================================================== */

:root{
  --bg:#ffffff;
  --panel:#f4f2ee;
  --panel-2:#ebe8e2;
  --line:#e2ded5;
  --text:#18140f;
  --text-dim:#6d665c;
  --amber:#a3661b;
  --ember:#9c3220;
}
:root{ color-scheme: light; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size:15.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:"Anton","Arial Narrow",sans-serif; font-weight:400; letter-spacing:.5px; margin:0;}
a{color:var(--amber); text-decoration:none;}
a:hover{color:var(--ember);}

/* ---------- en-tête / navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:0 56px; height:120px;}
.logo{display:flex; align-items:center; align-self:stretch;}
.logo img{height:100%; width:auto; display:block; padding:0px 0;}
nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
nav a{color:var(--text-dim); font-size:13.5px;}
nav a:hover, nav a.active{color:var(--amber);}
.nav-cta{border:1px solid var(--amber); color:var(--amber); padding:8px 16px; font-size:13px; white-space:nowrap;}
.nav-cta:hover{background:var(--amber); color:var(--bg);}
.burger{display:none; background:none; border:1px solid var(--line); color:var(--text); padding:8px 10px; font-size:16px;}

@media (max-width: 880px){
  nav ul{
    position:fixed; inset:64px 0 auto 0; background:var(--bg); border-bottom:1px solid var(--line);
    flex-direction:column; padding:20px 28px; gap:18px; transform:translateY(-130%); transition:transform .25s ease;
  }
  nav ul.open{transform:translateY(0);}
  .burger{display:block;}
  .nav-cta{display:none;}
}

/* ---------- sections partagées ---------- */
section{padding:88px 0;}
.kicker{color:var(--amber); font-size:12.5px; letter-spacing:.4px; margin-bottom:10px;}
.section-head{max-width:60ch; margin-bottom:48px;}
.section-head h2{font-size:clamp(30px,4vw,44px);}
.section-head p{color:var(--text-dim); margin-top:14px; font-size:14.5px;}

/* ---------- hero (accueil) ---------- */
.hero{position:relative; overflow:hidden; padding:80px 0 60px; border-bottom:1px solid var(--line);}
.beam-field{
  position:absolute; inset:-20% -10% auto -10%; height:140%;
  background:
    conic-gradient(from 0deg at 30% 20%, rgba(163,102,27,.07), transparent 18%, transparent 82%, rgba(156,50,32,.06)),
    conic-gradient(from 180deg at 80% 10%, rgba(156,50,32,.06), transparent 20%, transparent 80%, rgba(163,102,27,.06));
  animation: sweep 48s linear infinite;
  z-index:0;
}
@media (prefers-reduced-motion: reduce){ .beam-field{animation:none;} }
@keyframes sweep{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(40px,6vw,72px); line-height:1.02;}
.hero .lede{max-width:46ch; color:var(--text-dim); margin-top:22px; font-size:15px;}
.range{display:inline-flex; align-items:baseline; gap:10px; margin-top:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0;}
.range b{font-family:"Anton",sans-serif; font-size:34px; color:var(--amber); font-weight:400;}
.range span{color:var(--text-dim); font-size:13px;}
.cta-row{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}
.btn{display:inline-block; padding:13px 24px; font-size:13.5px; border:1px solid var(--amber); color:var(--bg); background:var(--amber);}
.btn:hover{background:var(--ember); border-color:var(--ember); color:var(--text);}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line);}
.btn.ghost:hover{border-color:var(--amber); color:var(--amber);}

/* collage photo hero, cadres à overflow masqué + zoom Ken Burns */
.stage-art{position:relative; padding:18px 34px 34px 34px;}
@keyframes kenburns{ from{transform:scale(1);} to{transform:scale(1.1);} }
.photo-collage{position:relative;}
.frame{overflow:hidden; background:var(--panel);}
.frame img{width:100%; height:100%; object-fit:cover; display:block; animation:kenburns 22s ease-in-out infinite alternate;}
.frame-main{aspect-ratio:4/3.1; border:1px solid var(--line); box-shadow:0 24px 46px -24px rgba(24,20,15,.22);}
.frame-a,.frame-b{position:absolute; width:44%; aspect-ratio:4/3; border:6px solid var(--bg); box-shadow:0 14px 26px -16px rgba(24,20,15,.28);}
.frame-a{top:-30px; left:-30px; z-index:2;}
.frame-a img{animation-delay:.4s;}
.frame-b{bottom:-26px; right:-26px; z-index:2;}
.frame-b img{animation-delay:1.1s;}
@media (prefers-reduced-motion: reduce){ .frame img{animation:none;} }
@media (max-width: 880px){
  .stage-art{padding:34px 0 0 0;}
  .frame-a,.frame-b{display:none;}
}

/* ---------- bande photo défilante (mouvement) ---------- */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel);}
.marquee-track{display:flex; width:max-content; animation:scrollx 55s linear infinite;}
.marquee-track img{height:170px; width:auto; object-fit:cover; flex:0 0 auto; border-right:1px solid var(--line);}
@keyframes scrollx{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none; overflow-x:auto;}
}

/* ---------- matériel (rider) ---------- */
.rider{border-top:1px solid var(--line);}
.rider-cols{display:grid; grid-template-columns:1fr 1fr; border-left:1px solid var(--line); border-right:1px solid var(--line);}
.rider-col{padding:36px 40px; border-right:1px solid var(--line);}
.rider-col:last-child{border-right:none;}
.rider-col h3{font-size:12.5px; letter-spacing:1px; color:var(--amber); font-weight:600; text-transform:uppercase; margin-bottom:22px;}
.rider-block{margin-bottom:22px;}
.rider-block h4{margin:0 0 8px; font-size:14px; color:var(--text); font-weight:600;}
.rider-block ul{margin:0; padding-left:18px; color:var(--text-dim); font-size:13.5px;}
.rider-block li{margin-bottom:4px;}
.rider-note{padding:22px 40px; border-top:1px solid var(--line); color:var(--text-dim); font-size:13.5px; max-width:70ch;}

.gear-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:44px; border:1px solid var(--line);}
.gear-tile{background:var(--panel); text-align:center; overflow:hidden;}
.gear-tile .frame{aspect-ratio:4/3;}
.gear-tile .frame img{animation-duration:17s;}
.gear-tile:nth-child(2) .frame img{animation-delay:.5s;}
.gear-tile:nth-child(3) .frame img{animation-delay:1s;}
.gear-tile:nth-child(4) .frame img{animation-delay:1.5s;}
.gear-tile span{display:block; padding:14px 12px; font-size:12px; color:var(--text-dim);}

/* ---------- prestations ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--panel);}
.card .frame{aspect-ratio:16/10;}
.card .frame img{animation-duration:19s;}
.card:nth-child(2) .frame img,.card:nth-child(5) .frame img{animation-delay:.6s;}
.card:nth-child(3) .frame img,.card:nth-child(6) .frame img{animation-delay:1.2s;}
.card-body{padding:24px 26px 30px;}
.card h3{font-weight:600; font-size:15px; margin-bottom:10px;}
.card p{color:var(--text-dim); font-size:13.5px; margin:0;}

@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr;}
  .rider-cols{grid-template-columns:1fr;}
  .rider-col{border-right:none; border-bottom:1px solid var(--line);}
  .gear-strip{grid-template-columns:repeat(2,1fr);}
  .cards{grid-template-columns:1fr;}
}

/* ---------- pied de page ---------- */
.site-footer{border-top:1px solid var(--line); padding:44px 0; color:var(--text-dim); font-size:12.5px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.foot-grid a{color:var(--text-dim);}
.foot-grid a:hover{color:var(--amber);}