/* ═══════════════════════════════════════════════
   XCAPE Studio — Front CSS
   Généré depuis xcape_studio.html
═══════════════════════════════════════════════ */
:root { --black:#000; --red:#a60000; --red-light:#c00000; --white:#fefefe; --g1:#111; --g2:#1a1a1a; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--black); color:var(--white); line-height:1.6; }
 /* NAV */
nav { position:fixed; top:0; left:0; width:100%; z-index:500; background:rgba(0,0,0,0.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(166,0,0,0.3); display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; }
.logo { font-size:1.5rem; font-weight:800; letter-spacing:4px; color:var(--white); text-transform:uppercase; }
.logo span { color:var(--red); }
.nav-links { display:flex; gap:1.8rem; list-style:none; }
.nav-links a { color:var(--white); text-decoration:none; font-size:0.82rem; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; transition:color 0.3s; }
.nav-links a:hover { color:var(--red); }
.nav-cta { background:var(--red) !important; padding:0.45rem 1.2rem !important; border-radius:2px; }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.burger span { display:block; width:26px; height:2px; background:var(--white); border-radius:2px; transition:all 0.35s; }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; top:65px; left:0; width:100%; background:rgba(0,0,0,0.98); z-index:499; flex-direction:column; padding:1rem 0 2rem; border-bottom:2px solid var(--red); }
.mobile-menu.open { display:flex; }
.mobile-menu a { color:var(--white); text-decoration:none; padding:0.9rem 2rem; font-size:1rem; letter-spacing:2px; text-transform:uppercase; font-weight:500; border-bottom:1px solid rgba(255,255,255,0.07); transition:color 0.3s; }
.mobile-menu a:hover, .mobile-menu a.mcta { color:var(--red); }
 /* ========== HERO ========== */
#accueil {
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:6rem 2rem 5rem; background:#000;
}
/* Slides */
.hslide {
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s ease;
  background-size:cover; background-position:center;
}
.hslide.active { opacity:1; }
.hslide-video { background:#000; }
.hslide-video video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
/* Overlay sombre par-dessus les slides */
.hero-overlay {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.65) 100%);
  z-index:5;
}
.hero-grid-bg {
  position:absolute; inset:0; pointer-events:none; z-index:5;
  opacity:0.03;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 60px),
                   repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 60px);
}
.hero-red-glow {
  position:absolute; bottom:-80px; left:50%; transform:translateX(-50%);
  width:600px; height:300px; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at center, rgba(166,0,0,0.28) 0%, transparent 70%);
}
/* Contenu hero */
.hero-inner {
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:center;
}
.hero-eyebrow { font-size:0.75rem; letter-spacing:5px; text-transform:uppercase; color:var(--red); margin-bottom:1.5rem; font-weight:600; }
.hero-title { font-size:clamp(3rem,9vw,8rem); font-weight:900; letter-spacing:8px; text-transform:uppercase; line-height:1; margin-bottom:1.2rem; }
.hero-title span { color:var(--red); }
.hero-subtitle { font-size:clamp(0.85rem,2vw,1rem); letter-spacing:6px; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:1.5rem; }
.hero-tagline { font-size:0.9rem; letter-spacing:4px; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:3rem; }
.hero-tagline span { margin:0 0.8rem; color:rgba(255,255,255,0.3); }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.btn-primary { background:var(--red); color:var(--white); padding:0.9rem 2.2rem; text-decoration:none; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; font-weight:700; border-radius:2px; transition:background 0.3s, transform 0.2s; display:inline-block; }
.btn-primary:hover { background:var(--red-light); transform:translateY(-2px); }
.btn-outline { border:1px solid rgba(255,255,255,0.3); color:var(--white); padding:0.9rem 2.2rem; text-decoration:none; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; font-weight:500; border-radius:2px; transition:border-color 0.3s, color 0.3s, transform 0.2s; display:inline-block; }
.btn-outline:hover { border-color:var(--red); color:var(--red); transform:translateY(-2px); }
/* Dots */
.hero-dots {
  position:absolute; bottom:5.5rem; left:50%; transform:translateX(-50%);
  z-index:10; display:flex; gap:10px; align-items:center;
}
.hdot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.25); cursor:pointer; transition:all 0.3s; border:1px solid rgba(255,255,255,0.35); display:block; }
.hdot.active { background:var(--red); border-color:var(--red); transform:scale(1.35); }
/* Scroll */
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:0.4rem; opacity:0.45; pointer-events:none; }
.hero-scroll span { font-size:0.65rem; letter-spacing:3px; text-transform:uppercase; }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom, var(--red), transparent); animation:scrollAnim 2s infinite; }
@keyframes scrollAnim { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }
 /* SECTIONS */
section { padding:6rem 2rem; }
.container { max-width:1200px; margin:0 auto; }
.sec-label { font-size:0.7rem; letter-spacing:5px; text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:0.8rem; }
.sec-title { font-size:clamp(1.8rem,4vw,3rem); font-weight:800; letter-spacing:3px; text-transform:uppercase; line-height:1.1; margin-bottom:1.5rem; }
.sec-bar { width:50px; height:3px; background:var(--red); margin-bottom:2rem; }
 /* A PROPOS */
#apropos { background:var(--g1); }
.apropos-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.apropos-text p { color:rgba(255,255,255,0.75); margin-bottom:1.2rem; font-size:0.97rem; line-height:1.8; }
.apropos-text p strong { color:var(--white); }
.ambition-list { list-style:none; margin-top:1.5rem; }
.ambition-list li { padding:0.7rem 0 0.7rem 1.5rem; border-left:2px solid var(--red); color:rgba(255,255,255,0.8); font-size:0.93rem; margin-bottom:0.5rem; }
.equipe-card { background:var(--g2); border:1px solid rgba(166,0,0,0.2); border-radius:4px; padding:2rem; }
.equipe-card h3 { font-size:1rem; letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:1rem; }
.equipe-card p { color:rgba(255,255,255,0.7); font-size:0.9rem; line-height:1.8; }
.artistes-list { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.2rem; }
.atag { background:rgba(166,0,0,0.12); border:1px solid rgba(166,0,0,0.3); color:rgba(255,255,255,0.7); padding:0.25rem 0.75rem; font-size:0.78rem; border-radius:2px; }
 /* STUDIO */
#studio { background:var(--black); }
.salles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.salle-card { background:var(--g2); border:1px solid rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; transition:border-color 0.3s, transform 0.3s; }
.salle-card:hover { border-color:var(--red); transform:translateY(-4px); }
.salle-img { height:200px; background:linear-gradient(135deg,#1a0000,#2a0a0a); display:flex; align-items:center; justify-content:center; position:relative; }
.salle-img span { font-size:3rem; opacity:0.3; }
.salle-badge { position:absolute; top:1rem; right:1rem; background:var(--red); color:var(--white); font-size:0.7rem; font-weight:700; letter-spacing:1px; padding:0.25rem 0.6rem; border-radius:2px; }
.salle-body { padding:1.5rem; }
.salle-body h3 { font-size:0.95rem; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin-bottom:0.5rem; }
.salle-body p { color:rgba(255,255,255,0.6); font-size:0.85rem; }
 /* EQUIPEMENTS */
#equipements { background:var(--g1); }
.equip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.equip-card { background:var(--black); border:1px solid rgba(255,255,255,0.07); border-radius:4px; padding:1.8rem; transition:border-color 0.3s; }
.equip-card:hover { border-color:var(--red); }
.equip-card h3 { font-size:0.8rem; letter-spacing:3px; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:1.2rem; padding-bottom:0.8rem; border-bottom:1px solid rgba(166,0,0,0.2); }
.equip-card ul { list-style:none; }
.equip-card ul li { color:rgba(255,255,255,0.65); font-size:0.87rem; padding:0.35rem 0; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; align-items:center; gap:0.5rem; }
.equip-card ul li::before { content:"---"; color:var(--red); font-weight:700; flex-shrink:0; }
 /* SERVICES */
#services { background:var(--black); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.service-card { background:var(--g2); border:1px solid rgba(255,255,255,0.06); border-radius:4px; padding:2rem; cursor:pointer; transition:border-color 0.3s, background 0.3s, transform 0.25s; position:relative; overflow:hidden; }
.service-card::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--red); transition:width 0.35s; }
.service-card:hover { border-color:var(--red); background:rgba(166,0,0,0.05); transform:translateY(-3px); }
.service-card:hover::after { width:100%; }
.service-num { font-size:2.5rem; font-weight:900; color:rgba(166,0,0,0.2); line-height:1; margin-bottom:1rem; }
.service-card h3 { font-size:0.9rem; letter-spacing:3px; text-transform:uppercase; font-weight:700; margin-bottom:0.8rem; }
.service-card p { color:rgba(255,255,255,0.6); font-size:0.87rem; line-height:1.7; }
.svc-link { display:inline-flex; align-items:center; gap:0.4rem; margin-top:1.2rem; font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--red); font-weight:600; transition:gap 0.3s; }
.service-card:hover .svc-link { gap:0.8rem; }
 /* TARIFS */
#tarifs { background:var(--g1); }
.tarifs-tabs { display:flex; gap:0.5rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.tab-btn { background:transparent; border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.6); padding:0.5rem 1.5rem; font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; cursor:pointer; font-family:inherit; border-radius:2px; transition:all 0.3s; }
.tab-btn.active, .tab-btn:hover { background:var(--red); border-color:var(--red); color:var(--white); }
.tarif-panel { display:none; }
.tarif-panel.active { display:block; }
.tarif-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.tarif-card { background:var(--black); border:1px solid rgba(255,255,255,0.07); border-radius:4px; padding:2rem; text-align:center; transition:border-color 0.3s; }
.tarif-card:hover { border-color:var(--red); }
.tarif-card h4 { font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:0.5rem; }
.tarif-price { font-size:2.8rem; font-weight:900; color:var(--white); line-height:1; margin:0.5rem 0; }
.tarif-price sup { font-size:1.2rem; vertical-align:super; color:var(--red); }
.tarif-note { font-size:0.78rem; color:rgba(255,255,255,0.4); margin-top:0.5rem; }
.tarif-sub { font-size:0.8rem; color:var(--red); font-weight:600; margin-top:0.4rem; }
 /* PROJETS */
#projets { background:var(--black); }
.projets-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin-top:3rem; }
.projet-card { background:var(--g2); border:1px solid rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; transition:border-color 0.3s; }
.projet-card:hover { border-color:var(--red); }
.projet-header { background:linear-gradient(135deg,#1a0000,#0d0000); padding:2.5rem 2rem; }
.projet-header h3 { font-size:1.3rem; font-weight:900; letter-spacing:3px; text-transform:uppercase; margin-bottom:0.3rem; }
.projet-header .tag { font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.4); }
.projet-body { padding:1.8rem 2rem; }
.projet-body p { color:rgba(255,255,255,0.7); font-size:0.9rem; line-height:1.8; }
.projet-body .cible { margin-top:1rem; font-size:0.8rem; color:var(--red); font-weight:600; letter-spacing:1px; }
 /* GALERIE */
#galerie { background:var(--g1); }
.galerie-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; margin-top:3rem; }
.galerie-item { aspect-ratio:1; background:linear-gradient(135deg,#1a0000,#0d0000); border-radius:3px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:opacity 0.3s; }
.galerie-item:first-child { grid-column:span 2; grid-row:span 2; }
.galerie-item:hover { opacity:0.8; }
.galerie-item .pt { font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.2); text-align:center; padding:1rem; }
.galerie-item .ov { position:absolute; inset:0; background:rgba(166,0,0,0.2); opacity:0; transition:opacity 0.3s; display:flex; align-items:center; justify-content:center; font-size:1.5rem; border-radius:3px; }
.galerie-item:hover .ov { opacity:1; }
 /* CONTACT */
#contact { background:var(--black); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info h3 { font-size:0.8rem; letter-spacing:3px; text-transform:uppercase; color:var(--red); margin-bottom:1.5rem; }
.cdet { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.2rem; }
.cdet .icon { width:36px; height:36px; background:rgba(166,0,0,0.15); border:1px solid rgba(166,0,0,0.3); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
.cdet p { color:rgba(255,255,255,0.7); font-size:0.9rem; line-height:1.6; }
.cdet p strong { color:var(--white); display:block; font-size:0.78rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:0.2rem; }
.reseaux { margin-top:2rem; }
.reseaux h3 { font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--red); margin-bottom:1rem; }
.reseaux-links { display:flex; gap:0.8rem; flex-wrap:wrap; }
.rsn { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:var(--white); padding:0.5rem 1.2rem; text-decoration:none; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; border-radius:2px; transition:all 0.3s; }
.rsn:hover { background:var(--red); border-color:var(--red); }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:0.5rem; }
.form-group input, .form-group textarea { width:100%; background:var(--g2); border:1px solid rgba(255,255,255,0.1); color:var(--white); padding:0.9rem 1rem; font-family:inherit; font-size:0.9rem; border-radius:2px; outline:none; transition:border-color 0.3s; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--red); }
.form-group textarea { min-height:130px; resize:vertical; }
.btn-submit { width:100%; background:var(--red); color:var(--white); border:none; padding:1rem; font-family:inherit; font-size:0.85rem; letter-spacing:3px; text-transform:uppercase; font-weight:700; cursor:pointer; border-radius:2px; transition:background 0.3s; }
.btn-submit:hover { background:var(--red-light); }
 /* RESA BANNER */
.resa-banner { background:var(--red); padding:4rem 2rem; text-align:center; }
.resa-banner h2 { font-size:clamp(1.5rem,3vw,2.5rem); font-weight:900; letter-spacing:4px; text-transform:uppercase; margin-bottom:0.8rem; }
.resa-banner p { color:rgba(255,255,255,0.8); margin-bottom:2rem; font-size:0.95rem; }
.btn-white { background:var(--white); color:var(--red); padding:0.9rem 2.5rem; text-decoration:none; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; font-weight:800; border-radius:2px; transition:opacity 0.3s; display:inline-block; }
.btn-white:hover { opacity:0.9; }
 /* FOOTER */
footer { background:var(--g1); padding:3rem 2rem; border-top:1px solid rgba(166,0,0,0.2); }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:0.8rem; color:rgba(255,255,255,0.4); letter-spacing:1px; }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { color:rgba(255,255,255,0.4); text-decoration:none; font-size:0.8rem; letter-spacing:1px; text-transform:uppercase; transition:color 0.3s; }
.footer-links a:hover { color:var(--red); }
 /* MODALE SERVICES */
.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.88); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; pointer-events:none; visibility:hidden; transition:opacity 0.35s, visibility 0.35s; }
.modal-overlay.open { opacity:1; pointer-events:all; visibility:visible; }
.modal-box { background:#0f0f0f; border:1px solid rgba(166,0,0,0.3); border-radius:6px; max-width:860px; width:100%; max-height:90vh; overflow-y:auto; display:grid; grid-template-columns:300px 1fr; position:relative; transform:translateY(40px); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.modal-overlay.open .modal-box { transform:translateY(0); }
.modal-close { position:absolute; top:1rem; right:1rem; z-index:10; background:rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.15); color:var(--white); width:38px; height:38px; border-radius:50%; font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.3s; line-height:1; }
.modal-close:hover { background:var(--red); }
.modal-left { position:relative; overflow:hidden; border-radius:6px 0 0 6px; min-height:350px; }
.modal-img { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.5s; }
.modal-left:hover .modal-img { transform:scale(1.06); }
.modal-img-ov { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.05),rgba(0,0,0,0.65)); }
.modal-filigrane { position:absolute; bottom:0.5rem; left:1rem; font-size:6rem; font-weight:900; color:rgba(255,255,255,0.06); line-height:1; pointer-events:none; }
.modal-right { padding:2.5rem 2rem 2rem; display:flex; flex-direction:column; }
.modal-label { font-size:0.68rem; letter-spacing:5px; text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:0.6rem; }
.modal-title { font-size:2rem; font-weight:900; letter-spacing:3px; text-transform:uppercase; line-height:1; }
.modal-bar { width:40px; height:3px; background:var(--red); margin:1rem 0; }
.modal-desc { font-size:0.9rem; color:rgba(255,255,255,0.7); line-height:1.8; margin-bottom:1.2rem; }
.modal-features { list-style:none; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:0.5rem; }
.modal-features li { font-size:0.85rem; color:rgba(255,255,255,0.65); padding:0.4rem 0 0.4rem 1rem; border-left:2px solid var(--red); }
.modal-tarif { background:rgba(166,0,0,0.08); border:1px solid rgba(166,0,0,0.2); border-radius:4px; padding:0.8rem 1rem; font-size:0.82rem; color:rgba(255,255,255,0.6); margin-bottom:1.5rem; line-height:1.6; }
.modal-ctas { display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:auto; }
.modal-btn-r { background:var(--red); color:var(--white); padding:0.85rem 1.6rem; text-decoration:none; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; font-weight:700; border-radius:3px; transition:background 0.3s; }
.modal-btn-r:hover { background:var(--red-light); }
.modal-btn-o { border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); padding:0.85rem 1.6rem; text-decoration:none; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; font-weight:600; border-radius:3px; transition:all 0.3s; }
.modal-btn-o:hover { border-color:var(--red); color:var(--red); }
@media(max-width:700px) { .modal-box { grid-template-columns:1fr; } .modal-left { min-height:220px; border-radius:6px 6px 0 0; } }
 /* RESPONSIVE */
@media(max-width:1024px) { .salles-grid,.equip-grid,.services-grid { grid-template-columns:repeat(2,1fr); } .galerie-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px) { .nav-links { display:none; } .burger { display:flex; } .apropos-grid,.contact-grid,.projets-grid { grid-template-columns:1fr; gap:2.5rem; } .salles-grid,.equip-grid,.services-grid { grid-template-columns:1fr; } .galerie-grid { grid-template-columns:repeat(2,1fr); } .galerie-item:first-child { grid-column:span 2; } section { padding:4rem 1.2rem; } nav { padding:1rem 1.2rem; } }
@media(max-width:480px) { .tarif-grid { grid-template-columns:1fr; } .footer-inner { flex-direction:column; text-align:center; } }