/* ============================================
   Robert Ortman — "Midnight Improvisation"
   Design system: Blue Note Amber
   ============================================ */

:root {
    --surface:      #131313;
    --surface-low:  #1c1b1b;
    --surface-mid:  #201f1f;
    --surface-high: #2a2a2a;
    --primary:      #b4c7f0;
    --primary-cont: #021839;
    --secondary:    #fbba70;
    --on-surface:   #e5e2e1;
    --on-muted:     #c5c6cd;
    --outline:      #44474d;
}

html { scroll-behavior: smooth; }
::selection { background: rgba(251,186,112,0.25); }

body {
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: 'Manrope', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Grain texture (SVG inline — aucune dépendance externe) ── */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    background-repeat: repeat;
}

/* ── Image duotone (grayscale + luminosity blend) ── */
.duotone-fragment {
    filter: grayscale(100%) contrast(115%) brightness(75%);
    mix-blend-mode: luminosity;
}

/* ── Navigation ── */
#main-nav {
    transition: background 0.4s ease, box-shadow 0.3s ease;
}
#main-nav.scrolled {
    background: rgba(19,19,19,0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(68,71,77,0.3);
}

/* Menu mobile */
#mobile-menu {
    display: none;
    background: #131313;
    border-top: 1px solid rgba(68,71,77,0.3);
}
#mobile-menu.open { display: block; }

/* Hamburger */
#hamburger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--on-surface);
    margin: 5px 0;
    transition: all 0.3s ease;
    transform-origin: center;
}
#hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ── */
.hero-img {
    filter: grayscale(25%) contrast(1.1) brightness(0.75);
    transition: filter 1s ease;
}

/* ── Liens flèche animés ── */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-surface);
    text-decoration: none;
    transition: color 0.3s ease;
}
.link-arrow:hover { color: var(--secondary); }
.link-arrow .line {
    display: block;
    width: 3rem;
    height: 1px;
    background: var(--secondary);
    transition: width 0.4s ease;
    opacity: 0.7;
}
.link-arrow:hover .line { width: 5rem; opacity: 1; }

/* ── Cartes ── */
.card-hover {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 32px 60px rgba(0,0,0,0.4);
}

/* ── Programme list (concerts) ── */
.programme-row {
    transition: background 0.2s ease;
}
.programme-row:hover {
    background: rgba(255,255,255,0.025);
}

/* ── Badges ── */
.badge-futur {
    display: inline-block;
    background: var(--secondary);
    color: #482900;
    font-family: 'Manrope', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    font-weight: 700;
}
.badge-passe {
    display: inline-block;
    background: rgba(68,71,77,0.4);
    color: var(--on-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    font-weight: 700;
}

/* ── Timeline ── */
.timeline-item {
    position: relative;
    padding-left: 1.75rem;
    border-left: 1px solid rgba(68,71,77,0.5);
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 12px rgba(251,186,112,0.5);
}
.timeline-item.active {
    border-left-color: rgba(251,186,112,0.4);
}

/* ── Glow ambre (points timeline et accents) ── */
.amber-glow {
    box-shadow: 0 0 14px rgba(251,186,112,0.45);
}

/* ── Nav glassmorphism (dark) ── */
.glass-dark {
    background: rgba(19,19,19,0.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ── Formulaires (dark) ── */
.field-line {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(68,71,77,0.5);
    padding: 0.85rem 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    color: var(--on-surface);
    width: 100%;
    outline: none;
    transition: border-color 0.25s ease;
}
.field-line:focus {
    border-bottom-color: var(--secondary);
}
.field-line::placeholder {
    color: var(--on-muted);
    opacity: 0.5;
}
.field-line option {
    background: #2a2a2a;
    color: var(--on-surface);
}

/* ── Admin ── */
.admin-table th {
    font-family: 'Manrope', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--on-muted);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(68,71,77,0.4);
}
.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(68,71,77,0.2);
    font-size: 0.88rem;
    vertical-align: middle;
    color: var(--on-surface);
}
.admin-table tr:hover td {
    background: rgba(255,255,255,0.03);
}

/* ── Animations fade-up ── */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Gradient radial ambre (fond décoratif) ── */
.bg-radial-amber {
    background: radial-gradient(ellipse at center, rgba(251,186,112,0.06) 0%, transparent 70%);
}
.bg-radial-blue {
    background: radial-gradient(ellipse at center, rgba(180,199,240,0.05) 0%, transparent 70%);
}

/* ── Séparateur ambre ── */
.divider-amber {
    height: 1px;
    width: 5rem;
    background: rgba(251,186,112,0.4);
}

/* ── Hover glow sur les boutons primaires ── */
.btn-primary {
    background: var(--primary);
    color: #0a0a0a;
    font-family: 'Manrope', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    display: inline-block;
}
.btn-primary:hover {
    background: var(--secondary);
    color: #482900;
}

.btn-amber {
    background: var(--secondary);
    color: #482900;
    font-family: 'Manrope', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    display: inline-block;
}
.btn-amber:hover {
    background: #e5a55e;
}

/* ── Print ── */
@media print {
    #main-nav, footer, .grain-overlay { display: none; }
    body { background: white; color: black; }
}