/* CVMARC — Club Vidéo Multimédia de l'Agglomération de la Région de Compiègne
   Direction artistique : cinéma amateur / salle de projection
   Palette : noir pellicule, crème papier, rouge rideau, doré générique */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --noir: #0b0908;
  --noir-2: #161210;
  --noir-3: #221c19;
  --creme: #f4ecd9;
  --creme-2: #e8dcc0;
  --rouge: #7a1c1f;
  --rouge-vif: #a3272b;
  --or: #c9a04e;
  --or-clair: #e0c27a;
  --ligne: rgba(244,236,217,0.14);
  --ombre: 0 20px 60px rgba(0,0,0,0.5);
  --radius: 2px;
  --maxw: 1180px;
  font-size: 17px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background: var(--noir);
  color: var(--creme);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* grain + vignette overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9000;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity:.55;
}

h1,h2,h3,h4{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  color: var(--creme);
  margin:0 0 .5em;
  font-weight:600;
}
.display{
  font-family:'Bebas Neue', sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:.95;
}
a{color:var(--or-clair); text-decoration:none;}
a:hover{color:var(--creme);}
p{margin:0 0 1em;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  color:var(--or);
  display:inline-flex; align-items:center; gap:.6em;
  margin-bottom:1em;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--or);}

/* sprocket strip motif */
.sprockets{
  height:14px;
  background-image: repeating-linear-gradient(90deg, var(--or) 0 6px, transparent 6px 22px);
  background-position:center;
  opacity:.5;
}
.filmstrip-edge{
  position:relative;
}
.filmstrip-edge::before,.filmstrip-edge::after{
  content:"";
  position:absolute; left:0; right:0; height:10px;
  background-image: radial-gradient(circle, var(--noir) 2.6px, transparent 2.7px);
  background-size: 22px 10px;
  background-repeat:repeat-x;
  background-color:var(--or);
}
.filmstrip-edge::before{top:0;}
.filmstrip-edge::after{bottom:0;}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:500;
  background: linear-gradient(180deg, rgba(11,9,8,.97), rgba(11,9,8,.9));
  border-bottom:1px solid var(--ligne);
  backdrop-filter: blur(6px);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:40px; width:auto;}
.brand-text{font-family:'Bebas Neue',sans-serif; font-size:1.7rem; letter-spacing:.06em; color:var(--creme);}
.brand-text span{color:var(--or);}
nav.primary{display:flex; gap:26px; flex-wrap:wrap;}
nav.primary a{
  font-family:'Oswald',sans-serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--creme-2); padding:6px 0; border-bottom:2px solid transparent;
}
nav.primary a:hover, nav.primary a.active{color:var(--or-clair); border-color:var(--or);}
.burger{display:none; background:none; border:1px solid var(--ligne); color:var(--creme); padding:8px 10px; font-size:1.2rem; cursor:pointer;}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(ellipse at 30% 20%, rgba(122,28,31,.35), transparent 60%), var(--noir-2);
  border-bottom:1px solid var(--ligne);
}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:96px 28px 80px; position:relative; z-index:2;}
.hero.compact .hero-inner{padding:64px 28px 52px;}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem); max-width:800px;}
.hero p.lead{font-size:1.15rem; color:var(--creme-2); max-width:640px; margin-top:1em;}
.hero-media{position:absolute; inset:0; z-index:1;}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.28; filter:grayscale(.25) contrast(1.05);}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,9,8,.55), var(--noir) 92%);}

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.82rem;
  padding:14px 26px; border:1px solid var(--or); color:var(--creme); background:transparent;
  transition:.2s;
}
.btn:hover{background:var(--or); color:var(--noir); }
.btn.primary{background:var(--rouge); border-color:var(--rouge); color:var(--creme);}
.btn.primary:hover{background:var(--rouge-vif); border-color:var(--rouge-vif); color:var(--creme);}

/* ---------- sections ---------- */
section{padding:76px 0;}
section.tight{padding:48px 0;}
section.alt{background:var(--noir-2); border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);}
.section-head{max-width:680px; margin-bottom:46px;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);}
.section-head p{color:var(--creme-2);}

.grid{display:grid; gap:28px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--noir-2); border:1px solid var(--ligne);
  display:flex; flex-direction:column;
}
.card .thumb{aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--noir-3);}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.card:hover .thumb img{transform:scale(1.06);}
.card .body{padding:22px 22px 26px;}
.card h3{font-size:1.15rem; margin-bottom:.4em;}
.card p{color:var(--creme-2); font-size:.95rem;}
.card .tag{
  font-family:'Oswald',sans-serif; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--or); background:rgba(201,160,78,.1); border:1px solid rgba(201,160,78,.35);
  padding:3px 10px; display:inline-block; margin-bottom:10px;
}

.film-card .thumb{aspect-ratio:2/3;}

.video-frame{position:relative; width:100%; aspect-ratio:16/9; background:var(--noir-3); border:1px solid var(--ligne);}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

.quote-strip{
  border-left:3px solid var(--or); padding-left:24px; margin:28px 0; color:var(--creme-2); font-style:italic;
}

.event-card{
  display:grid; grid-template-columns:140px 1fr; gap:24px; align-items:start;
  padding:26px; background:var(--noir-2); border:1px solid var(--ligne); margin-bottom:20px;
}
.event-date{
  font-family:'Bebas Neue',sans-serif; text-align:center; background:var(--rouge); color:var(--creme);
  padding:14px 6px; line-height:1;
}
.event-date .d{font-size:2.4rem; display:block;}
.event-date .m{font-size:.9rem; text-transform:uppercase; letter-spacing:.1em;}
.event-date .y{font-size:.75rem; opacity:.75;}

.stat-row{display:flex; gap:48px; flex-wrap:wrap; margin-top:12px;}
.stat{min-width:120px;}
.stat .n{font-family:'Bebas Neue',sans-serif; font-size:2.8rem; color:var(--or); line-height:1;}
.stat .l{font-size:.82rem; color:var(--creme-2); text-transform:uppercase; letter-spacing:.08em;}

.gallery-grid{columns:3 220px; column-gap:14px;}
.gallery-grid img{width:100%; margin-bottom:14px; border:1px solid var(--ligne);}

table.bureau{width:100%; border-collapse:collapse; margin-top:16px;}
table.bureau td{padding:12px 14px; border-bottom:1px solid var(--ligne);}
table.bureau td:first-child{font-family:'Oswald',sans-serif; color:var(--or); width:40%;}

.breadcrumb{font-size:.82rem; color:var(--creme-2); margin-bottom:20px;}
.breadcrumb a{color:var(--creme-2); border-bottom:1px dotted var(--ligne);}

form.contact-form{display:grid; gap:16px; max-width:640px;}
form.contact-form label{font-family:'Oswald',sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--or); display:block; margin-bottom:6px;}
form.contact-form input, form.contact-form textarea, form.contact-form select{
  width:100%; background:var(--noir-2); border:1px solid var(--ligne); color:var(--creme);
  padding:12px 14px; font-family:'Work Sans',sans-serif; font-size:.95rem;
}
form.contact-form textarea{min-height:140px; resize:vertical;}
.form-note{font-size:.8rem; color:var(--creme-2); opacity:.75; margin-top:6px;}

.badge-demo{
  position:fixed; bottom:16px; right:16px; z-index:1000;
  background:rgba(11,9,8,.92); border:1px solid var(--or); color:var(--creme-2);
  font-size:.72rem; padding:8px 12px; font-family:'Oswald',sans-serif; letter-spacing:.05em;
}

/* ---------- footer ---------- */
footer.site{background:var(--noir); border-top:1px solid var(--ligne); padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
footer.site h4{font-size:.85rem; letter-spacing:.14em; color:var(--or);}
footer.site a{color:var(--creme-2); font-size:.92rem;}
footer.site ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-bottom{
  max-width:var(--maxw); margin:40px auto 0; padding:20px 28px 0; border-top:1px solid var(--ligne);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:var(--creme-2); opacity:.8;
}
.social-row{display:flex; gap:12px; margin-top:10px;}
.social-row a{
  border:1px solid var(--ligne); width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:.75rem;
}
.social-row a:hover{border-color:var(--or); color:var(--or);}

@media (max-width: 920px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 680px){
  nav.primary{display:none;}
  .burger{display:block;}
  .grid.cols-3,.grid.cols-4,.grid.cols-2{grid-template-columns:1fr;}
  .event-card{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .gallery-grid{columns:1;}
}
nav.primary.open{
  display:flex; position:absolute; top:100%; left:0; right:0; background:var(--noir); flex-direction:column;
  padding:18px 28px; border-bottom:1px solid var(--ligne); gap:16px;
}