:root{--noir:#0d0d0d;--teal:#0f4a5c;--or:#e9a826;--rouge:#d9391f;--creme:#f1e6cc;--bleu:#2b6f8a;
 --titre:Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Condensed",sans-serif;
 --texte:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--noir);color:var(--creme);font:1.08rem/1.65 var(--texte);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
main{overflow-x:clip}
h1,h2{font-family:var(--titre);font-weight:400;text-transform:uppercase;line-height:1;margin:0;letter-spacing:.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.4rem}
.skip{position:absolute;left:-999px}.skip:focus{left:0;top:0;background:var(--or);color:#000;padding:.6rem 1rem;z-index:99}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.eyebrow{font-family:var(--titre);text-transform:uppercase;letter-spacing:.18em;color:var(--or);margin:0 0 .6rem;font-size:1rem}
h2{font-size:clamp(2.1rem,5vw,3.6rem);margin-bottom:1.2rem}

.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 clamp(1rem,3vw,2.5rem);background:linear-gradient(rgba(13,13,13,.92),rgba(13,13,13,.6) 70%,transparent)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{border-radius:50%;box-shadow:0 0 0 2px var(--or)}
.brand b{font-family:var(--titre);font-weight:400;font-size:1.9rem;letter-spacing:.04em;color:var(--or)}
.menu{display:flex;align-items:center;gap:2rem}
.menu a{font-family:var(--titre);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;font-size:1.05rem;padding:.3rem 0;border-bottom:3px solid transparent}
.menu a:hover{border-color:var(--rouge)}
.menu .fb{border:0;display:grid}.menu .fb:hover{color:var(--or)}
.burger-toggle,.burger{display:none}

.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:6.5rem 1.2rem 6rem;
 background:linear-gradient(180deg,rgba(10,30,38,.78),rgba(13,13,13,.55) 45%,rgba(13,13,13,.95)),url(../img/photo-live.jpg) center 30%/cover}
.hero-in{max-width:900px}
.hero-logo{width:clamp(150px,22vw,240px);margin:0 auto 1.2rem;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));animation:pop .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;transform:scale(.85) rotate(-8deg)}}
.kicker{font-family:var(--titre);text-transform:uppercase;letter-spacing:.3em;color:var(--or);margin:0 0 .8rem}
.hero h1{font-size:clamp(2.8rem,9vw,6.4rem);text-shadow:4px 4px 0 rgba(0,0,0,.6)}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{font-style:normal;color:var(--rouge)}
.hero h1 span:nth-child(3){color:var(--or)}
.lead{max-width:40rem;margin:1.4rem auto 2rem;font-size:1.2rem;opacity:.92}
.cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.btn{display:inline-block;padding:.95rem 1.8rem;border-radius:4px;font-family:var(--titre);text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px)}
.btn-or{background:var(--or);color:var(--noir)}.btn-or:hover{background:#f6bb43}
.btn-rouge{background:var(--rouge);color:#fff}.btn-rouge:hover{background:#ea4a2e}
.btn-ghost{border-color:var(--creme);color:var(--creme)}.btn-ghost:hover{background:var(--creme);color:var(--noir)}
.btn-ghost-d{border-color:var(--noir);color:var(--noir)}.btn-ghost-d:hover{background:var(--noir);color:var(--creme)}

.tape{background:var(--or);color:var(--noir);overflow:hidden;white-space:nowrap;border-block:5px solid var(--noir);transform:rotate(-1.2deg) scale(1.03);margin:-2.2rem 0 1.5rem;position:relative;z-index:2;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.tape-in{display:inline-flex;gap:1.4rem;padding:.75rem 0;font-family:var(--titre);text-transform:uppercase;letter-spacing:.14em;font-size:1.25rem;animation:roll 28s linear infinite}
.tape i{font-style:normal;color:var(--rouge)}
@keyframes roll{to{transform:translateX(-50%)}}

.groupe{padding:5rem 0;background:var(--noir)}
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.photo{margin:0;position:relative;max-width:440px;justify-self:center}
.photo::before{content:"";position:absolute;inset:1.4rem -1.4rem -1.4rem 1.4rem;background:repeating-linear-gradient(0deg,var(--rouge) 0 14px,var(--or) 14px 28px,var(--bleu) 28px 42px);border-radius:6px}
.photo img{position:relative;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.5);border:6px solid var(--creme)}
.groupe p{max-width:34rem}
.faces{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.8rem 0 1.2rem}
.cass{padding:1.1rem 1.2rem 1.2rem;border-radius:8px;background:var(--creme);color:var(--noir);border-top:12px solid var(--rouge);box-shadow:0 8px 18px rgba(0,0,0,.4)}
.cass.b{border-top-color:var(--bleu)}
.cass small{display:block;font-family:var(--titre);letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);font-size:.9rem}
.cass.b small{color:var(--bleu)}
.cass strong{font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em}
.roles{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.roles li{padding:.35rem 1rem;border:2px solid var(--or);border-radius:99px;font-family:var(--titre);text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;color:var(--or)}

.live{background:var(--teal);padding:5rem 0;background-image:radial-gradient(circle at 85% 0,rgba(233,168,38,.18),transparent 45%),radial-gradient(circle at 0 100%,rgba(217,57,31,.2),transparent 45%)}
.sub{max-width:36rem;margin:0 0 2rem;opacity:.92}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2.2rem}
.gal img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.4);aspect-ratio:3/4}
.gal .g-main{grid-column:1/-1;aspect-ratio:16/8;object-position:center 35%}

.contact{background:var(--creme);color:var(--noir);padding:5rem 0;text-align:center}
.contact .eyebrow{color:var(--rouge)}
.mail{display:inline-block;margin:.4rem 0 2rem;font-family:var(--titre);font-size:clamp(1.5rem,5vw,3rem);text-decoration:none;word-break:break-all;border-bottom:6px solid var(--rouge)}
.mail:hover{color:var(--rouge)}

.stripes{height:18px;background:linear-gradient(var(--rouge) 0 6px,var(--or) 6px 12px,var(--bleu) 12px 18px)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding:1.3rem clamp(1rem,3vw,2.5rem);font-size:.92rem}
.foot-in p{margin:0}

@media (max-width:820px){
 .menu{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--noir);padding:.5rem 1.4rem 1.2rem;display:none}
 .menu a{padding:.8rem 0;width:100%}
 .burger-toggle:checked ~ .menu{display:flex}
 .burger{display:block;width:40px;height:40px;cursor:pointer;position:relative}
 .burger span,.burger span::before,.burger span::after{position:absolute;left:8px;width:24px;height:3px;background:var(--creme);content:""}
 .burger span{top:19px}.burger span::before{top:-8px;left:0}.burger span::after{top:8px;left:0}
 .burger-toggle:focus-visible + .burger{outline:3px solid var(--or)}
 .two{grid-template-columns:1fr}
 .photo{margin:0 1.4rem 0 0}
 .faces{grid-template-columns:1fr}
 .gal{gap:.5rem;grid-template-columns:repeat(2,1fr)}
 .gal .g-main{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}