/* Google Fonts chargées via dans le HTML pour ne pas bloquer le rendu */
:root {
--bg-primary: #0a0908;
--bg-secondary: #161412;
--bg-tertiary: #221e1a;
--color-gold: #c5a059;
--color-gold-light: #e6cb95;
--color-gold-dark: #8c6d34;
--color-silver: #d1d5db;
--color-text-primary: #f8f6f0;
--color-text-secondary: #9ca3af;
--glow-gold: 0 0 15px rgba(197, 160, 89, 0.4);
--glow-gold-intense: 0 0 30px rgba(197, 160, 89, 0.7);
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-mono: 'Oswald', system-ui, sans-serif;
--transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; background-color: var(--bg-primary); color: var(--color-text-primary); font-family: var(--font-sans); }
body { background-color: var(--bg-primary); color: var(--color-text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; transition: var(--transition-smooth); }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
/* Glass */
.glass-panel {
background: rgba(22, 20, 18, 0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(197, 160, 89, 0.15);
border-radius: 12px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
transition: var(--transition-smooth);
}
.glass-panel:hover { border-color: rgba(197, 160, 89, 0.3); }
/* Buttons */
.btn-gold {
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
color: var(--bg-primary); font-family: var(--font-mono); font-size: 0.95rem;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.75rem 2rem; border: none; border-radius: 6px; cursor: pointer;
box-shadow: var(--glow-gold); transition: var(--transition-smooth);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--glow-gold-intense); filter: brightness(1.1); }
.btn-gold:disabled { background: var(--bg-tertiary); color: var(--color-text-secondary); box-shadow: none; cursor: not-allowed; transform: none; filter: none; }
.btn-outline {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--color-gold); border: 1.5px solid var(--color-gold);
font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.1em; padding: 0.75rem 2rem;
border-radius: 6px; cursor: pointer; transition: var(--transition-smooth);
}
.btn-outline:hover { background: rgba(197, 160, 89, 0.1); color: var(--color-gold-light); border-color: var(--color-gold-light); transform: translateY(-2px); }
.text-glow-gold { text-shadow: 0 0 10px rgba(197, 160, 89, 0.5); }
/* Forms */
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold); margin-bottom: 0.5rem; }
.form-input { width: 100%; padding: 0.8rem 1rem; background: rgba(10, 9, 8, 0.8); border: 1px solid rgba(197, 160, 89, 0.2); border-radius: 6px; color: var(--color-text-primary); font-family: var(--font-sans); transition: var(--transition-smooth); }
.form-input:focus { outline: none; border-color: var(--color-gold); box-shadow: var(--glow-gold); }
select.form-input { background-color: #0a0908; }
/* Navbar */
.navbar { background: rgba(10, 9, 8, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(197, 160, 89, 0.15); position: sticky; top: 0; z-index: 100; height: 70px; }
.navbar-content { max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.navbar-logo-container { display: flex; align-items: center; gap: 0.75rem; }
.navbar-brand { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--color-gold-light); letter-spacing: 0.05em; }
.navbar-logo { border-radius: 50%; width: 44px; height: 44px; object-fit: cover; }
.navbar-links { display: flex; align-items: center; gap: 2rem; }
.nav-link { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-secondary); }
.nav-link:hover { color: var(--color-gold-light); text-shadow: var(--glow-gold); }
.admin-btn { border: 1px solid var(--color-gold); padding: 0.4rem 1rem; border-radius: 4px; }
.admin-btn:hover { background: var(--color-gold); color: var(--bg-primary); text-shadow: none; }
/* Banner Mario Chante */
.mario-banner {
position: relative; width: 100%; overflow: hidden;
height: 55vw; max-height: 620px; min-height: 320px;
background: #0a0908;
margin-top: -60px;
}
.mario-banner-img {
width: 100%; height: 100%; display: block;
object-fit: cover; object-position: center 20%;
opacity: 0.9;
}
.mario-banner-fade-top {
position: absolute; top: 0; left: 0; right: 0; height: 220px;
background: linear-gradient(to bottom, #0a0908 0%, rgba(10,9,8,0.85) 35%, rgba(10,9,8,0.4) 65%, transparent 100%);
z-index: 2; pointer-events: none;
}
.mario-banner-fade-bottom {
position: absolute; bottom: 0; left: 0; right: 0; height: 140px;
background: linear-gradient(to top, #0a0908 0%, transparent 100%);
z-index: 2; pointer-events: none;
}
/* Hero */
.hero-banner { position: relative; height: 65vh; min-height: 480px; background-image: url('../public/header.webp'); background-size: 110%; background-position: center top; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; }
.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(10,9,8,0.0) 0%, rgba(10,9,8,0.05) 40%, rgba(10,9,8,0.25) 68%, rgba(10,9,8,0.60) 84%, #0a0908 96%); }
.hero-content { position: relative; z-index: 10; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 0; height: 100%; }
.hero-logo { border-radius: 50%; border: 3px solid var(--color-gold); margin-bottom: 1.5rem; background: #000; width: 240px; height: 240px; object-fit: cover; }
.hero-title { font-size: 3.5rem; font-weight: 800; color: var(--color-gold-light); margin-bottom: 0.5rem; }
.hero-tagline { font-family: var(--font-mono); font-size: 1.1rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.15em; }
@keyframes logoGlow {
from { box-shadow: 0 0 15px rgba(197, 160, 89, 0.3); }
to { box-shadow: 0 0 35px rgba(197, 160, 89, 0.7); }
}
.animate-glow { animation: logoGlow 4s ease-in-out infinite alternate; }
/* Sections */
.player-section, .bio-section, .booking-section { padding: 6rem 0; border-bottom: 1px solid rgba(197, 160, 89, 0.1); }
.section-title { font-size: 2.25rem; text-align: center; color: var(--color-gold-light); margin-bottom: 0.5rem; }
.section-subtitle { text-align: center; color: var(--color-text-secondary); font-size: 0.95rem; margin-bottom: 3.5rem; }
.bio-section { background-color: var(--bg-secondary); }
.bio-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; }
.gold-accent-line { width: 60px; height: 3px; background: var(--color-gold); margin-bottom: 1.5rem; border-radius: 2px; }
.bio-para { font-size: 1.05rem; line-height: 1.8; color: var(--color-text-primary); margin-bottom: 1.25rem; }
.genre-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.genre-tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-gold); border: 1px solid rgba(197, 160, 89, 0.3); padding: 0.4rem 1rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.bio-visual-column { padding: 2rem; display: flex; flex-direction: column; gap: 2rem; }
.visual-card h3 { font-size: 1.2rem; color: var(--color-gold); margin-bottom: 0.5rem; }
.visual-card p { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; }
.visual-icon { margin-bottom: 0.5rem; }
/* Footer */
.footer { background-color: var(--bg-primary); padding: 3rem 0; border-top: 1px solid rgba(197, 160, 89, 0.15); }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-serif); color: var(--color-gold-light); font-weight: 700; }
.footer-brand img { width: 40px; height: 40px; border-radius: 50%; }
.footer-text { font-size: 0.85rem; color: var(--color-text-secondary); }
.footer-link { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.footer-link:hover { color: var(--color-gold); }
/* ── Player Selector ─────────────────────────────── */
.music-section-container { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; width: 100%; }
.player-selector-well { display: flex; background: #0d0b0a; border: 1.5px solid rgba(197, 160, 89, 0.3); border-radius: 30px; padding: 4px; position: relative; box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), var(--glow-gold); width: 280px; }
.selector-btn { flex: 1; background: transparent; border: none; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.6rem 1rem; border-radius: 25px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; transition: color 0.3s ease; }
.selector-btn.active { color: var(--bg-primary); }
.selector-btn svg { width: 16px; height: 16px; fill: currentColor; }
.sliding-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark)); border-radius: 25px; box-shadow: 0 2px 10px rgba(197, 160, 89, 0.4); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; }
.sliding-pill.slide-right { transform: translateX(100%); }
.player-transition-container { width: 100%; display: flex; justify-content: center; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* ── Wurlitzer 1015 "Bubbler" Jukebox ─────────────── */
@keyframes neon-flicker { 0%,100%{opacity:1;} 92%{opacity:1;} 93%{opacity:0.7;} 94%{opacity:1;} 96%{opacity:0.85;} 97%{opacity:1;} }
@keyframes wurl-pulse { 0%,100%{opacity:1;} 50%{opacity:0.82;} }
@keyframes wurl-crown-glow { 0%,100%{opacity:0.55;} 50%{opacity:1;} }
.wurl-cabinet {
width: 100%; max-width: 500px; margin: 0 auto;
filter: drop-shadow(0 28px 70px rgba(0,0,0,0.92));
user-select: none;
}
/* === DÔME ARRONDI === */
.wurl-crown {
background: linear-gradient(180deg,
#7a0a0a 0%, #b02020 20%, #c87000 50%, #e8a800 75%, #d49000 100%);
border-radius: 55% 55% 0 0 / 100% 100% 0 0;
padding: 28px 20px 16px;
text-align: center;
position: relative;
border: 3px solid #c8a030; border-bottom: none;
box-shadow: 0 -8px 40px rgba(220,150,0,0.35), inset 0 10px 30px rgba(255,200,80,0.18);
overflow: hidden;
}
.wurl-crown-glow {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 30%, rgba(255,220,100,0.22) 0%, transparent 65%);
animation: wurl-crown-glow 2.8s ease-in-out infinite;
pointer-events: none;
}
.wurl-logo {
font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
color: #fff8e8; letter-spacing: 0.18em;
text-shadow: 0 0 12px rgba(255,200,80,0.7), 0 2px 4px rgba(0,0,0,0.5);
position: relative; z-index: 1;
}
.wurl-logo-sub {
font-family: var(--font-mono); font-size: 0.55rem; color: rgba(255,240,180,0.6);
letter-spacing: 0.3em; margin-top: 4px; position: relative; z-index: 1;
}
/* Bande chrome sous la couronne */
.wurl-crown-chrome {
height: 8px;
background: linear-gradient(90deg,#6a5020,#c8a040,#f8e880,#f0d060,#c8a040,#f8e880,#c8a040,#6a5020);
border-left: 3px solid #c8a030; border-right: 3px solid #c8a030;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
/* === ARCHES COLORÉES (keystones Wurlitzer) === */
.wurl-keystones {
display: flex; height: 22px;
border-left: 3px solid #c8a030; border-right: 3px solid #c8a030;
}
.wurl-keystone {
flex: 1;
background: linear-gradient(180deg, var(--kc) 0%, color-mix(in srgb, var(--kc) 70%, #000) 100%);
box-shadow: inset 0 2px 6px rgba(255,255,255,0.25), 0 0 8px color-mix(in srgb, var(--kc) 60%, transparent);
}
.wurl-keystones-chrome {
height: 6px;
background: linear-gradient(90deg,#4a3010,#a07030,#d4aa50,#a07030,#4a3010);
border-left: 3px solid #c8a030; border-right: 3px solid #c8a030;
}
/* === CORPS PRINCIPAL === */
.wurl-body {
display: flex; align-items: stretch;
border-left: 3px solid #c8a030; border-right: 3px solid #c8a030;
}
/* Tubes à bulles */
.wurl-tube-wrap {
width: 44px; flex-shrink: 0;
background: linear-gradient(90deg,#1a0c04,#2a1408,#1a0c04);
display: flex; align-items: center; justify-content: center;
padding: 4px 3px;
}
.wurl-tube { display: block; border-radius: 8px; }
/* Panneau central illuminé */
.wurl-panel {
flex: 1;
background: linear-gradient(160deg,#ffd464 0%,#ffaa28 20%,#e85c14 55%,#c03010 80%,#8a1808 100%);
padding: 10px 10px 8px;
display: flex; flex-direction: column; gap: 8px;
position: relative;
box-shadow: inset 0 0 40px rgba(255,100,0,0.15);
}
.wurl-panel::before {
content:''; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 40%);
pointer-events:none; animation: wurl-pulse 3s ease-in-out infinite;
}
/* En ce moment */
.wurl-now {
background: rgba(0,0,0,0.55); border-radius: 4px; padding: 6px 10px;
border: 1px solid rgba(255,180,60,0.25);
box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
}
.wurl-now-label {
font-family: var(--font-mono); font-size: 0.5rem; color: #e8aa40;
letter-spacing: 0.25em; opacity: 0.75; margin-bottom: 2px;
}
.wurl-now-title {
font-family: var(--font-serif); font-size: 1rem; font-weight: 700;
color: #fff8e8; text-shadow: 0 0 10px rgba(255,200,80,0.4);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wurl-now-artist {
font-size: 0.7rem; color: #d4a060; margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Milieu : liste chansons + porthole */
.wurl-panel-mid {
display: flex; gap: 8px; align-items: flex-start; flex: 1;
}
.wurl-songlist {
flex: 1; min-width: 0;
background: rgba(0,0,0,0.5); border-radius: 4px;
border: 1px solid rgba(255,180,60,0.2);
overflow-y: auto; max-height: 200px;
scrollbar-width: thin; scrollbar-color: rgba(200,150,50,0.4) transparent;
}
.ami-card.wurl-song-row {
display: flex; gap: 6px; align-items: center;
padding: 5px 8px; cursor: pointer;
border-bottom: 1px solid rgba(255,150,30,0.12);
transition: background 0.12s;
background: transparent; max-width: none; flex-shrink: unset;
border-radius: 0; border-left: none; border-right: none; border-top: none; border: none;
box-shadow: none;
}
.ami-card.wurl-song-row:hover { background: rgba(255,160,40,0.18); transform: none; box-shadow: none; }
.ami-card.wurl-song-row.active { background: rgba(255,200,80,0.22); border-left: 3px solid #e8a820; }
.ami-card.wurl-song-row.active .wurl-song-num { color: #ffe080; }
.wurl-song-num { font-family: var(--font-mono); font-size: 0.58rem; color: #a07030; font-weight: 700; flex-shrink: 0; min-width: 20px; }
.wurl-song-text { font-size: 0.62rem; color: #f0d890; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Porthole vinyle */
.wurl-porthole-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.wurl-porthole-outer {
width: 136px; height: 136px; border-radius: 50%;
background: linear-gradient(135deg,#f0e0a0 0%,#e8c860 30%,#8a6020 60%,#c8a040 80%,#f0d880 100%);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.7), inset 0 2px 6px rgba(255,255,255,0.3), 0 0 0 2px rgba(0,0,0,0.4);
}
.wurl-porthole {
width: 126px; height: 126px; border-radius: 50%;
background: #080808;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
box-shadow: inset 0 4px 16px rgba(0,0,0,0.9), inset 0 0 40px rgba(0,0,0,0.7);
}
#jukebox-record-canvas { display: block; border-radius: 50%; }
.wurl-porthole-rpm { font-family: var(--font-mono); font-size: 0.48rem; color: rgba(255,220,120,0.55); letter-spacing: 0.12em; text-align: center; }
/* Barre de progression */
.wurl-prog-row { display: flex; align-items: center; gap: 6px; }
.jukebox-progress-bar { flex: 1; height: 4px; background: rgba(0,0,0,0.45); border-radius: 2px; cursor: pointer; border: 1px solid rgba(255,180,60,0.2); }
.jukebox-progress-fill { height: 100%; background: linear-gradient(90deg,#8c6020,#e8a830); border-radius: 2px; width: 0%; transition: width 0.3s linear; }
.jukebox-time { font-family: var(--font-mono); font-size: 0.65rem; color: rgba(255,220,150,0.65); min-width: 30px; }
/* Bande chrome séparatrice */
.wurl-body-chrome {
height: 7px;
background: linear-gradient(90deg,#4a3010,#c09040,#f0d880,#f8e890,#c09040,#f0d880,#c09040,#4a3010);
border-left: 3px solid #c8a030; border-right: 3px solid #c8a030;
box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.1);
}
/* Grille enceinte */
.wurl-speaker-canvas {
display: block; width: 100%;
border-left: 3px solid #c8a030; border-right: 3px solid #c8a030;
background: #130700;
}
/* Contrôles */
.wurl-controls {
background: linear-gradient(180deg,#1e1004,#140a02);
border-left: 3px solid #c8a030; border-right: 3px solid #c8a030;
border-top: 1px solid #3a2008;
padding: 10px 16px;
display: flex; align-items: center; gap: 10px; justify-content: center;
}
.wurl-ctrl-btn {
background: radial-gradient(circle at 35% 30%,#e0e0e0 0%,#b0b0b0 40%,#787878 100%);
border: 1px solid #909090; color: #202020;
border-radius: 50%; width: 38px; height: 38px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
box-shadow: 0 3px 8px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.5);
}
.wurl-ctrl-btn svg { width: 18px; height: 18px; }
.wurl-ctrl-btn:hover { background: radial-gradient(circle at 35% 30%,#fff 0%,#d8d8d8 40%,#a0a0a0 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 10px rgba(200,160,60,0.35); }
.wurl-play-btn {
width: 52px; height: 52px;
background: radial-gradient(circle at 38% 34%,#ffe060 0%,#c88020 45%,#8a5010 100%);
color: #1a0800; border-color: #d09040;
box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 16px rgba(220,160,0,0.4), inset 0 1px 3px rgba(255,255,200,0.5);
}
.wurl-play-btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 24px rgba(255,200,0,0.6); }
.wurl-vol { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
#jukebox-volume {
-webkit-appearance: none; width: 70px; height: 4px;
border-radius: 2px; background: rgba(200,160,60,0.22); outline: none; cursor: pointer;
}
#jukebox-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#ffe080,#c09030); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.6); }
/* Base chromée avec pieds */
.wurl-base {
background: linear-gradient(180deg,#2a1808,#1a1004);
border: 3px solid #c8a030; border-top: none;
border-radius: 0 0 8px 8px;
height: 20px; padding: 0 30px;
display: flex; align-items: flex-end; justify-content: space-between;
}
.wurl-foot {
width: 28px; height: 12px;
background: linear-gradient(90deg,#5a4010,#a08030,#c8a040,#a08030,#5a4010);
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 8px rgba(0,0,0,0.7);
}
/* ── Cassette Deck (Wavesfactory-inspired) ───────── */
.cassette-img { width: 100%; display: block; border-radius: 3px; }
.cassette-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.cassette-progress-fill { height: 100%; background: #888; border-radius: 2px; width: 0%; transition: width 0.3s linear; }
.deck-wrapper { display: flex; align-items: stretch; max-width: 680px; width: 100%; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.4); overflow: hidden; }
.deck-wood { width: 30px; flex-shrink: 0; background: linear-gradient(90deg, #b07030 0%, #d49050 30%, #c88438 60%, #a06420 100%); position: relative; }
.deck-wood::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 9px); }
.deck-left-wood { border-radius: 10px 0 0 10px; }
.deck-right-wood { border-radius: 0 10px 10px 0; }
.deck-body { flex: 1; background: linear-gradient(180deg, #d8d8d4 0%, #c2c2be 50%, #ccccca 100%); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.deck-topbar { display: flex; align-items: center; justify-content: space-between; }
.deck-brand { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; color: #444; letter-spacing: 0.15em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.deck-brand-circle { width: 18px; height: 18px; border-radius: 50%; background: #3a3a3a; display: flex; align-items: center; justify-content: center; }
.deck-brand-circle svg { width: 11px; height: 11px; fill: #c8c8c8; }
.deck-label { font-family: var(--font-mono); font-size: 0.6rem; color: #777; text-transform: uppercase; letter-spacing: 0.1em; }
/* Façade acier : plaque grise avec trou au centre + VU intégrés sur les côtés */
.deck-faceplate {
display: flex;
align-items: stretch;
background: linear-gradient(180deg, #d0d0cc 0%, #c4c4c0 40%, #c8c8c4 70%, #b8b8b4 100%);
border-radius: 7px;
padding: 10px 8px;
margin-bottom: 6px;
gap: 10px;
box-shadow:
inset 0 2px 5px rgba(255,255,255,0.6),
inset 0 -2px 4px rgba(0,0,0,0.2),
0 3px 8px rgba(0,0,0,0.35),
inset 1px 0 0 rgba(255,255,255,0.4),
inset -1px 0 0 rgba(0,0,0,0.1);
}
/* Trou rectangulaire = fenêtre cassette (fond noir qui révèle la cassette) */
/* Bloc central de la façade */
.deck-center-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.deck-face-nav { display: flex; align-items: center; gap: 8px; }
/* Trou : overflow:hidden pour clipper l'animation éjection */
.deck-cassette-hole {
flex: 1;
min-width: 0;
background: #0d0b0a;
border-radius: 3px;
overflow: hidden; /* clip l'animation vertically */
line-height: 0;
box-shadow: inset 0 3px 10px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(0,0,0,0.7);
}
/* Boutons nav sur la façade grise */
.deck-nav-btn { background: rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.2); color: rgba(0,0,0,0.45); font-size: 1.3rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.15s; flex-shrink: 0; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.deck-nav-btn:hover { background: rgba(0,0,0,0.25); color: rgba(0,0,0,0.8); }
.deck-cassette-frame { width: 100%; position: relative; line-height: 0; }
/* PAS de overflow:hidden ici — le trou parent fait le clipping */
.deck-cassette-area { position: relative; width: 100%; background: #0d0b0a; line-height: 0; }
.deck-cassette-slide { position: relative; width: 100%; line-height: 0; }
.cassette-img { width: 100%; height: auto; display: block; border-radius: 2px; }
/* VU côtés sur la façade */
.deck-vu-side { display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: center; }
/* Cassette change animations — top eject / top insert */
@keyframes cEject { 0%{transform:translateY(0); opacity:1;} 60%{transform:translateY(-106%); opacity:1;} 100%{transform:translateY(-106%); opacity:0;} }
@keyframes cInsert { 0%{transform:translateY(-106%);opacity:0;} 30%{transform:translateY(-106%); opacity:1;} 100%{transform:translateY(0); opacity:1;} }
.cass-out { animation: cEject 0.38s cubic-bezier(0.4,0,0.8,1) forwards; }
.cass-in { animation: cInsert 0.45s cubic-bezier(0.2,0,0.2,1) forwards; }
/* LCD masqué - titre affiché dans la progress row */
.deck-lcd { display: none; }
.deck-lcd-title, .deck-lcd-artist {}
.deck-progress-row { display: flex; align-items: center; gap: 6px; }
.deck-progress-time { font-family: var(--font-mono); font-size: 0.62rem; color: #666; min-width: 28px; }
.deck-progress-bar { flex: 1; height: 4px; background: rgba(0,0,0,0.25); border-radius: 2px; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
.deck-progress-bar .deck-progress-fill { height: 100%; background: linear-gradient(90deg,#888,#aaa); border-radius: 2px; width: 0%; transition: width 0.3s linear; }
.deck-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.deck-knob-group { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.deck-knob { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8e2d8, #b0a898); box-shadow: 0 4px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.45); position: relative; }
.deck-knob::after { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 13px; background: #555; border-radius: 2px; }
.deck-knob-label { font-family: var(--font-mono); font-size: 0.6rem; color: #555; text-transform: lowercase; letter-spacing: 0.03em; }
.deck-vu-group { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.deck-vu-label { font-family: var(--font-mono); font-size: 0.55rem; color: #666; letter-spacing: 0.08em; }
.deck-vu-side .deck-vu { width: 22px; flex: 1; min-height: 70px; }
.deck-vu { width: 20px; height: 100px; background: #eeeee8; border: 1px solid #aaa; border-radius: 2px; box-shadow: inset 0 1px 4px rgba(0,0,0,0.2); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.deck-vu-fill { width: 100%; background: linear-gradient(to top, #ff2020 0%, #ff8800 18%, #aadd00 38%, #44bb00 100%); transition: height 0.04s linear; height: 0%; }
.deck-vu-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 8px); pointer-events: none; }
.deck-transport-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.deck-mode-btns { display: flex; gap: 3px; }
.deck-mode-btn { background: #4a4a48; border: none; color: #888; font-family: var(--font-mono); font-size: 0.6rem; padding: 5px 12px; border-radius: 3px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); transition: all 0.12s; }
.deck-mode-btn:hover { background: #5a5a58; color: #bbb; }
.deck-mode-btn.active { background: #2e2e2c; color: #d0c090; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.deck-play-btns { display: flex; align-items: center; gap: 5px; }
.deck-play-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: radial-gradient(circle at 35% 30%, #b0b0ac, #787874); color: #1a1a18; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3); transition: all 0.12s; }
.deck-play-btn:hover { background: radial-gradient(circle at 35% 30%, #c0c0bc, #888884); transform: translateY(-1px); }
.deck-play-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3); }
.deck-play-btn svg { width: 14px; height: 14px; fill: currentColor; }
.deck-play-btn-main { width: 42px; height: 42px; background: radial-gradient(circle at 35% 30%, #ddd8cc, #b8b2a8); }
.deck-play-btn-main svg { width: 18px; height: 18px; }
/* Mini cassettes carousel */
.cass-carousel { display: flex; align-items: center; gap: 4px; padding: 6px 0 2px; justify-content: center; }
.cass-carousel-viewport { overflow: hidden; width: calc(3 * 120px + 2 * 6px); /* 3 items + 2 gaps */ }
.cass-carr-btn { background: none; border: none; color: #888; font-size: 1.4rem; cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.15s; flex-shrink: 0; }
.cass-carr-btn:hover:not(:disabled) { color: #c8a84b; }
.cass-carr-btn:disabled { opacity: 0.2; cursor: default; }
.deck-mini-cassettes { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.deck-mini-cass { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, transform 0.2s; width: 120px; flex-shrink: 0; }
.deck-mini-cass:hover { opacity: 0.9; transform: translateY(-2px); }
.deck-mini-cass.active { opacity: 1; transform: translateY(-3px); }
.deck-mini-cass img { width: 120px; height: 75px; object-fit: contain; background: #111; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.deck-mini-cass.active img { box-shadow: 0 3px 10px rgba(0,0,0,0.6), 0 0 0 2px #c8a84b; }
.deck-mini-title { font-size: 0.6rem; color: #888; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.deck-song-num { font-family: var(--font-mono); font-size: 0.6rem; color: #888; min-width: 16px; }
.deck-song-info { flex: 1; min-width: 0; }
.deck-song-name { font-size: 0.78rem; color: #2a2a28; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-song-artist { font-size: 0.67rem; color: #666; }
/* ── Calendar ────────────────────────────────────── */
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 1.5rem; max-width: 1000px; margin-left: auto; margin-right: auto; }
.calendar-panel { padding: 2rem; width: 100%; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.calendar-month-label { font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-gold-light); }
.calendar-nav-btn { background: transparent; border: 1px solid rgba(197,160,89,0.3); color: var(--color-gold); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); }
.calendar-nav-btn:hover { background: rgba(197,160,89,0.15); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.calendar-weekday { text-align: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-secondary); text-transform: uppercase; padding: 0.25rem 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: rgba(22,20,18,0.5); border: 1px solid rgba(197,160,89,0.1); border-radius: 6px; font-family: var(--font-mono); font-size: 1rem; cursor: pointer; transition: var(--transition-smooth); }
.calendar-cell:hover:not(.disabled):not(.empty) { background: rgba(197,160,89,0.15); border-color: var(--color-gold); }
.calendar-cell.empty { background: transparent; border-color: transparent; cursor: default; }
.calendar-cell.disabled { background: rgba(0,0,0,0.3); color: #4b5563; text-decoration: line-through; cursor: not-allowed; border-color: rgba(255,0,0,0.15); }
.calendar-cell.selected { background: var(--color-gold); color: var(--bg-primary); font-weight: 700; box-shadow: var(--glow-gold); }
.calendar-cell.blocked { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #fca5a5; }
.calendar-cell.today { border-color: rgba(197,160,89,0.5); }
.calendar-legend { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-secondary); }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; }
.legend-dot.available { background: rgba(22,20,18,0.5); border: 1px solid rgba(197,160,89,0.3); }
.legend-dot.blocked { background: rgba(239,68,68,0.3); }
.legend-dot.selected { background: var(--color-gold); }
/* ── Reservation Form ────────────────────────────── */
.reservation-form-container { padding: 2rem; width: 100%; max-width: 100%; }
.form-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--color-gold-light); margin-bottom: 0.5rem; border-bottom: 1px solid rgba(197,160,89,0.2); padding-bottom: 0.5rem; }
.form-subtitle { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.date-badge { background: rgba(197,160,89,0.15); border: 1px solid var(--color-gold); color: var(--color-gold-light); padding: 0.5rem 1rem; border-radius: 6px; font-family: var(--font-mono); font-weight: 600; display: inline-block; margin-bottom: 1.25rem; }
.date-warning { color: #fca5a5; font-size: 0.85rem; margin-bottom: 1.25rem; font-style: italic; }
.error-message { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.85rem; margin-bottom: 1.25rem; }
.success-panel { text-align: center; padding: 2rem 1rem; }
.success-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--color-gold-light); margin-bottom: 1rem; }
.success-text { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1.5rem; }
.success-icon { font-size: 3rem; color: var(--color-gold); margin-bottom: 1rem; }
/* Responsive */
@media (max-width: 900px) {
.bio-grid { grid-template-columns: 1fr; gap: 3rem; }
.navbar-links { display: none; }
.hero-title { font-size: 2.5rem; }
.footer-content { flex-direction: column; gap: 1.5rem; text-align: center; }
}
@media (max-width: 768px) {
.container { padding: 0 1rem; }
.hero-banner { height: 55vh; min-height: 360px; background-image: url('../public/mobile header3.webp'); background-size: cover; background-position: center 35%; }
.hero-overlay { background: linear-gradient(to bottom, rgba(10,9,8,0.0) 0%, rgba(10,9,8,0.05) 40%, rgba(10,9,8,0.25) 68%, rgba(10,9,8,0.60) 84%, #0a0908 96%); }
.hero-logo { width: 160px; height: 160px; }
.hero-title { font-size: 2.2rem; }
.hero-tagline { font-size: 0.9rem; }
.player-section, .bio-section, .booking-section { padding: 3.5rem 0; }
.section-title { font-size: 1.8rem; }
.cassette-shell, .cassette-controls-panel { width: 320px; }
.booking-grid { grid-template-columns: 1fr; gap: 2rem; }
.mario-banner { height: 70vw; max-height: 480px; min-height: 260px; margin-top: -40px; }
.mario-banner-img { object-position: 30% 15%; }
.mario-banner-fade-top { height: 80px; }
.mario-banner-fade-bottom { height: 100px; }
}
@media (max-width: 480px) {
.container { padding: 0 0.75rem; }
.hero-logo { width: 90px; height: 90px; }
.hero-title { font-size: 1.5rem; }
.cassette-shell { width: 280px; height: 180px; }
.cassette-controls-panel { width: 280px; }
.mario-banner { height: 90vw; max-height: 400px; min-height: 240px; margin-top: -30px; }
.mario-banner-img { object-position: 30% 10%; }
.mario-banner-fade-top { height: 60px; }
.mario-banner-fade-bottom { height: 80px; }
}