/* Le Riff Magnétique — Vinyle électrique : bleu riff, bleu nuit, craie, rouge ampli */
:root{
  --bleu:#075bff; --bleu-soft:#6ea1ff; --nuit:#07111f; --panel:#0b1a30; --line:#16294a;
  --craie:#f2ede3; --rouge:#ff3b30; --acier:#8793a1;
  --display:'Bebas Neue','Arial Narrow',Arial,sans-serif;
  --body:'Archivo',Verdana,system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{background:var(--nuit);color:var(--craie);font-family:var(--body);font-size:17px;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:18px;padding:12px 20px;
  background:rgba(7,17,31,.88);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-size:24px;letter-spacing:.05em;text-decoration:none;line-height:1;text-transform:uppercase}
.brand span{color:var(--bleu-soft)}
.nav ul{display:flex;gap:16px;list-style:none;margin-left:auto;flex-wrap:wrap}
.nav a.l{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--acier)}
.nav a.l:hover{color:var(--craie)}
.nav a.l.ig{color:var(--rouge)}
.langs{display:flex;gap:8px;align-items:center}
.langs a{display:block;padding:3px;border:1px solid transparent;border-radius:4px;opacity:.5;transition:.2s}
.langs a:hover{opacity:1}
.langs a.on{opacity:1;border-color:var(--line);background:rgba(7,91,255,.2)}
.langs svg{width:26px;height:17px;display:block;border-radius:2px}
@media(max-width:760px){.nav ul{display:none}.langs{margin-left:auto}}

/* Hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,17,31,.2) 0%,rgba(7,17,31,.5) 55%,rgba(7,17,31,.96) 100%)}
.hero .in{position:relative;width:100%;max-width:1060px;margin:0 auto;padding:120px 24px 56px}
.hero .band{width:min(430px,82%);margin-bottom:16px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(62px,12vw,140px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;margin:0 0 10px;
  background:repeating-radial-gradient(circle at 28% 130%, #0a2f66 0 3px, #075bff 3px 4px, #0a1c38 4px 7px);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 22px rgba(7,91,255,.5))}
.hero .sub{color:#c6ccd3;max-width:50ch;font-size:clamp(16px,2vw,19px)}
.hero .sub b{color:var(--craie)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border:2px solid var(--craie);color:var(--craie);transition:.2s}
.btn:hover{background:rgba(242,237,227,.12)}
.btn.ig{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn.ig:hover{filter:brightness(1.12)}

/* Séparateur sillons */
.groove{height:26px;background:repeating-linear-gradient(180deg,var(--nuit) 0 3px,#0d2036 3px 4px)}

/* Concert du mois */
.mois{max-width:1060px;margin:0 auto;padding:88px 24px;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.mois .aff{transform:rotate(-3deg);border:6px solid var(--craie);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.kick{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--bleu-soft)}
h2.t{font-family:var(--display);font-weight:400;font-size:clamp(38px,6vw,66px);line-height:.92;text-transform:uppercase;margin:8px 0 14px}
.mois p{color:#c6ccd3;max-width:44ch}
.handle{font-family:'Courier New',monospace;font-size:16px;color:var(--bleu-soft);margin-top:14px}
.mois .btn{margin-top:18px;display:inline-block}
@media(max-width:820px){.mois{grid-template-columns:1fr}.mois .aff{max-width:340px}}

/* Bandeau week-end */
.week{background:var(--bleu);color:#fff;text-align:center;padding:22px 24px}
.week b{font-family:var(--display);font-size:22px;letter-spacing:.05em;text-transform:uppercase}
.week span{color:#dcedff}

/* Le lieu */
.wrap{max-width:1060px;margin:0 auto;padding:84px 24px}
.center{text-align:center}
.lead{color:#c6ccd3;max-width:56ch;margin:0 auto 42px;text-align:center}
.strip{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:16px}
.strip figure{position:relative}
.strip img{height:100%;min-height:230px;object-fit:cover;width:100%;border:1px solid var(--line)}
.strip figcaption{position:absolute;left:12px;bottom:12px;background:rgba(7,17,31,.85);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 12px}
@media(max-width:760px){.strip{grid-template-columns:1fr}}

/* Boire & grignoter */
.soif{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.soif .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.soif .c h3{font-family:var(--display);font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:var(--bleu-soft);margin-bottom:8px}
.soif .c p{font-size:15.5px;color:#c6ccd3}
@media(max-width:760px){.soif .grid{grid-template-columns:1fr;gap:22px}}

/* Infos */
.infos .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.info h3{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-soft);margin-bottom:10px}
.info p{font-size:16px}
.info .m{color:var(--acier)}
.info .btn{display:inline-block;margin-top:14px;padding:12px 20px;border-color:var(--bleu-soft);color:var(--craie)}
@media(max-width:760px){.infos .grid{grid-template-columns:1fr;gap:26px}}

footer{border-top:1px solid var(--line);text-align:center;padding:26px 24px;color:var(--acier);font-size:14px}
footer .links{margin-top:6px}
footer a{color:var(--bleu-soft)}
footer .legal{margin-top:10px;font-size:12px;opacity:.7}

/* Animations de défilement (anim.js) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.vis{opacity:1;transform:none}