<!DOCTYPE
html>
<html
lang="fr">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Eclectiks
– Jazz Quartet</title>
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Josefin+Sans:wght@300;400;600&family=Dancing+Script:wght@600&display=swap"
rel="stylesheet">
<style>
:root
{
--gold:
#D4A017;
--gold-light:
#F0C040;
--yellow-warm:
#E8B84B;
--purple-deep:
#3B1F6E;
--purple-mid:
#5A2D9A;
--purple-light:
#8B5CC8;
--blue-accent:
#5B9BD5;
--blue-light:
#82C0E8;
--cream:
#FFF8E7;
--dark:
#1E0F3A;
--text-light:
#F0E6C8;
}
*
{ margin: 0; padding: 0; box-sizing: border-box; }
html
{ scroll-behavior: smooth; }
body
{
font-family:
'Josefin Sans', sans-serif;
background:
var(--dark);
color:
var(--text-light);
overflow-x:
hidden;
}
/*
── HERO BUTTONS ── */
.hero-buttons
{
display:
flex; flex-wrap: wrap; gap: 1rem;
justify-content:
center;
margin-top:
2.5rem;
animation:
fadeUp 1s .6s ease both;
}
.btn-hero
{
padding:
.85rem 1.8rem;
border-radius:
4px;
font-family:
'Josefin Sans', sans-serif;
font-size:
.72rem; letter-spacing: 2.5px; text-transform:
uppercase;
font-weight:
600; text-decoration: none;
transition:
all .25s;
cursor:
pointer;
}
.btn-primary
{
background:
linear-gradient(135deg, var(--gold), var(--gold-light));
color:
var(--dark);
border:
none;
}
.btn-primary:hover
{ opacity: .85; transform: translateY(-2px); }
.btn-secondary
{
background:
rgba(255,255,255,.08);
color:
var(--cream);
border:
1px solid rgba(255,255,255,.2);
}
.btn-secondary:hover
{ background: rgba(255,255,255,.15); transform: translateY(-2px);
}
.btn-outline
{
background:
transparent;
color:
var(--blue-light);
border:
1px solid var(--blue-accent);
}
.btn-outline:hover
{ background: rgba(91,155,213,.15); transform: translateY(-2px);
}
/*
── HERO PHOTO ── */
.hero-photo-wrap
{{
position:
absolute; inset: 0;
z-index:
0;
overflow:
hidden;
}}
.hero-photo
{{
width:
100%; height: 100%;
object-fit:
cover;
object-position:
center center;
margin-top:
0;
opacity:
.22;
filter:
saturate(1.3) contrast(1.1);
}}
.hero-photo-overlay
{{
position:
absolute; inset: 0;
background:
linear-gradient(
to
bottom,
rgba(30,15,58,.55)
0%,
rgba(59,31,110,.3)
40%,
rgba(122,85,16,.4)
80%,
rgba(30,15,58,.85)
100%
);
}}
#hero
> *:not(.hero-photo-wrap):not(.hero-noise) {{
position:
relative; z-index: 1;
}}
/*
── NAV ── */
nav
{
position:
fixed; top: 0; width: 100%; z-index: 100;
display:
flex; justify-content: space-between; align-items: center;
padding:
1.2rem 3rem;
background:
linear-gradient(to bottom, rgba(26,15,46,0.97),
transparent);
backdrop-filter:
blur(4px);
}
.nav-logo
{
font-family:
'Dancing Script', cursive;
font-size:
1.8rem;
color:
var(--blue-light);
letter-spacing:
1px;
}
.nav-links
{ display: flex; gap: 2.5rem; list-style: none; }
.nav-links
a {
font-size:
0.75rem; letter-spacing: 2.5px; text-transform: uppercase;
color:
var(--text-light); text-decoration: none;
transition:
color .3s;
}
.nav-links
a:hover { color: var(--gold-light); }
/*
── HERO ── */
#hero
{
min-height:
52vh;
display:
flex; flex-direction: column; justify-content: center; align-items:
center;
text-align:
center;
position:
relative;
background:
radial-gradient(ellipse
at 10% 20%, rgba(91,155,213,0.18) 0%, transparent
40%),
radial-gradient(ellipse
at 85% 80%, rgba(232,184,75,0.25) 0%, transparent
45%),
linear-gradient(160deg,
var(--purple-deep) 0%, #5A2D9A 40%, #8B6A20 75%, #C8960A
100%);
padding:
5rem 2rem 3rem;
overflow:
hidden;
}
.hero-noise
{
position:
absolute; inset: 0; opacity: .04;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256'
xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence
type='fractalNoise' baseFrequency='0.9' numOctaves='4'
stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25'
height='100%25'
filter='url(%23noise)'/%3E%3C/svg%3E");
pointer-events:
none;
}
.hero-tag
{
font-size:
0.68rem; letter-spacing: 5px; text-transform: uppercase;
color:
var(--gold); margin-bottom: 1.5rem;
animation:
fadeUp .8s ease both;
}
.hero-title
{
font-family:
'Playfair Display', serif;
font-size:
clamp(2rem, 5vw, 4rem);
font-weight:
700;
line-height:
.95;
color:
var(--cream);
animation:
fadeUp .9s .1s ease both;
}
.hero-title
em {
font-style:
italic;
color:
var(--gold-light);
}
.hero-subtitle
{
font-family:
'Dancing Script', cursive;
font-size:
clamp(1.2rem, 3vw, 2rem);
color:
var(--blue-light);
margin-top:
1rem;
animation:
fadeUp 1s .2s ease both;
}
.hero-desc
{
max-width:
560px;
font-size:
.9rem; letter-spacing: 1px; line-height: 1.9;
color:
rgba(237,224,196,.7);
margin:
2rem auto 0;
animation:
fadeUp 1s .3s ease both;
}
.hero-divider
{
width:
80px; height: 1px;
background:
linear-gradient(90deg, transparent, var(--gold),
transparent);
margin:
2.5rem auto;
animation:
fadeUp 1s .4s ease both;
}
.hero-next-concert
{
animation:
fadeUp 1s .5s ease both;
background:
rgba(200,149,42,.12);
border:
1px solid rgba(200,149,42,.3);
border-radius:
4px;
padding:
.8rem 2rem;
font-size:
.78rem; letter-spacing: 2px;
text-transform:
uppercase; color: var(--gold-light);
}
/*
Decoration notes */
.music-deco
{
position:
absolute;
font-size:
8rem;
opacity:
.05;
color:
var(--gold);
user-select:
none;
animation:
float 6s ease-in-out infinite;
}
.music-deco:nth-child(1)
{ top: 10%; left: 5%; animation-delay: 0s; }
.music-deco:nth-child(2)
{ top: 60%; right: 6%; animation-delay: 2s; font-size: 5rem;
}
.music-deco:nth-child(3)
{ bottom: 15%; left: 12%; animation-delay: 4s; font-size: 4rem;
}
@keyframes
float {
0%,
100% { transform: translateY(0) rotate(-5deg); }
50%
{ transform: translateY(-20px) rotate(5deg); }
}
@keyframes
fadeUp {
from
{ opacity: 0; transform: translateY(24px); }
to
{ opacity: 1; transform: translateY(0); }
}
/*
── SECTIONS ── */
section
{ padding: 4rem 2rem; }
.section-label
{
font-size:
.65rem; letter-spacing: 5px; text-transform: uppercase;
color:
var(--gold); margin-bottom: 1rem;
}
.section-title
{
font-family:
'Playfair Display', serif;
font-size:
clamp(1.6rem, 4vw, 2.8rem);
color:
var(--cream);
line-height:
1.1;
}
.section-title
em { color: var(--gold-light); font-style: italic; }
/*
── MUSIQUE ── */
#musique
{
background:
radial-gradient(ellipse
at 70% 50%, rgba(91,155,213,.15) 0%, transparent
50%),
radial-gradient(ellipse
at 10% 80%, rgba(232,184,75,.1) 0%, transparent
50%),
var(--dark);
display:
grid; grid-template-columns: 1fr 1fr; gap: 3rem;
align-items:
start; max-width: 1100px; margin: 0 auto;
padding-top:
1rem;
}
.musique-text
{ }
.musique-text
p {
margin-top:
1.8rem; font-size: .92rem; line-height: 2;
color:
rgba(237,224,196,.75);
}
.influences
{
display:
flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem;
}
.influence-tag
{
padding:
.35rem 1rem;
border:
1px solid rgba(200,149,42,.4);
border-radius:
20px;
font-size:
.7rem; letter-spacing: 1.5px; text-transform: uppercase;
color:
var(--gold-light);
background:
rgba(200,149,42,.07);
}
.musique-visual
{
display:
flex; flex-direction: column; gap: 1.5rem;
}
.instrument-card
{
display:
flex; align-items: center; gap: 1.2rem;
padding:
1rem 1.4rem;
background:
rgba(255,255,255,.03);
border-left:
2px solid var(--gold);
border-radius:
0 8px 8px 0;
transition:
background .3s;
}
.instrument-card:nth-child(even)
{
border-left-color:
var(--blue-accent);
}
.instrument-icon
{ font-size: 1.8rem; }
.instrument-info
{}
.instrument-name
{
font-family:
'Playfair Display', serif;
font-size:
1rem; color: var(--cream);
}
.musician-name
{
font-size:
.72rem; letter-spacing: 2px;
text-transform:
uppercase; color: var(--gold);
margin-top:
.2rem;
}
/*
── CONCERTS ── */
#concerts
{
background:
linear-gradient(180deg, var(--dark) 0%, #3B1F6E 50%, #7A5510
100%);
text-align:
center;
}
#concerts
.inner { max-width: 800px; margin: 0 auto; }
#concerts
.section-title { margin-bottom: 3rem; }
.concert-card
{
display:
grid; grid-template-columns: 100px 1fr auto;
align-items:
center; gap: 1.5rem;
padding:
1.5rem 2rem;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(200,149,42,.15);
border-radius:
8px; margin-bottom: 1rem;
text-align:
left;
transition:
border-color .3s, background .3s;
}
.concert-card:hover
{
border-color:
rgba(200,149,42,.5);
background:
rgba(200,149,42,.06);
}
.concert-date-box
{
text-align:
center;
border-right:
1px solid rgba(200,149,42,.2);
padding-right:
1.5rem;
}
.concert-day
{
font-family:
'Playfair Display', serif;
font-size:
2.2rem; color: var(--gold-light); line-height: 1;
}
.concert-month
{
font-size:
.65rem; letter-spacing: 3px; text-transform: uppercase;
color:
var(--purple-light); margin-top: .2rem;
}
.concert-info-title
{
font-family:
'Playfair Display', serif;
font-size:
1.1rem; color: var(--cream);
}
.concert-info-place
{
font-size:
.75rem; letter-spacing: 1px;
color:
rgba(237,224,196,.5); margin-top: .3rem;
}
.concert-past
{
opacity:
.45;
}
.concert-badge
{
font-size:
.65rem; letter-spacing: 2px; text-transform: uppercase;
padding:
.3rem .8rem; border-radius: 20px;
}
.badge-past
{ border: 1px solid rgba(255,255,255,.15); color:
rgba(255,255,255,.3); }
.badge-next
{ border: 1px solid var(--gold); color: var(--gold); background:
rgba(200,149,42,.1); }
.concerts-cta
{
margin-top:
3rem;
font-size:
.75rem; letter-spacing: 2px; text-transform: uppercase;
color:
rgba(237,224,196,.4);
}
/*
── PRESSE ── */
#presse
{
max-width:
900px; margin: 0 auto;
}
.presse-card
{
margin-top:
3rem;
padding:
2.5rem 3rem;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(200,149,42,.15);
border-radius:
12px;
position:
relative;
}
.presse-quote-mark
{
font-family:
'Playfair Display', serif;
font-size:
6rem; line-height: 1;
color:
var(--gold); opacity: .2;
position:
absolute; top: .5rem; left: 1.5rem;
user-select:
none;
}
.presse-text
{
font-family:
'Playfair Display', serif;
font-size:
1.2rem; font-style: italic;
line-height:
1.8; color: var(--cream);
position:
relative; z-index: 1;
}
.presse-source
{
margin-top:
1.2rem;
font-size:
.7rem; letter-spacing: 2px; text-transform: uppercase;
color:
var(--gold);
}
/*
── MÉDIAS ── */
#medias
{
background:
linear-gradient(135deg, #2A1558 0%, #4A2C7A 50%, #7A5510
100%);
text-align:
center;
}
#medias
.inner { max-width: 900px; margin: 0 auto; }
.media-grid
{
display:
grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
margin-top:
3rem;
}
.media-video-main
{
grid-column:
span 2;
display:
flex; flex-direction: column; gap: .6rem;
}
.media-video-main
iframe {
width:
100%; aspect-ratio: 16/9;
border-radius:
8px;
border:
1px solid rgba(200,149,42,.3);
}
.media-video-label
{
font-size:
.68rem; letter-spacing: 2px; text-transform: uppercase;
color:
var(--gold); text-align: left;
}
.media-placeholder
{
aspect-ratio:
16/9;
background:
rgba(255,255,255,.05);
border:
1px dashed rgba(200,149,42,.25);
border-radius:
8px;
display:
flex; flex-direction: column;
align-items:
center; justify-content: center;
gap:
.5rem; cursor: pointer;
transition:
background .3s, border-color .3s;
}
.media-placeholder:hover
{
background:
rgba(200,149,42,.08);
border-color:
rgba(200,149,42,.5);
}
.media-play
{ font-size: 2rem; opacity: .4; }
.media-label
{
font-size:
.65rem; letter-spacing: 2px; text-transform: uppercase;
color:
rgba(237,224,196,.3);
}
.media-note
{
margin-top:
2rem;
font-size:
.78rem; color: rgba(237,224,196,.3);
letter-spacing:
1px;
}
/*
── CONTACT ── */
#contact
{
background:
linear-gradient(160deg, #5A2D9A, #3B1F6E 40%, var(--dark)
80%);
border-top:
2px solid rgba(91,155,213,.2);
text-align:
center;
}
#contact
.inner { max-width: 640px; margin: 0 auto; }
#contact
p {
margin-top:
1.5rem; font-size: .88rem; line-height: 2;
color:
rgba(237,224,196,.6);
}
.contact-form
{
margin-top:
2.5rem;
display:
flex; flex-direction: column; gap: 1rem;
text-align:
left;
}
.contact-form
input,
.contact-form
textarea,
.contact-form
select {
width:
100%; padding: .9rem 1.2rem;
background:
rgba(255,255,255,.05);
border:
1px solid rgba(200,149,42,.2);
border-radius:
6px;
color:
var(--cream); font-family: 'Josefin Sans', sans-serif;
font-size:
.85rem; letter-spacing: 1px;
outline:
none; transition: border-color .3s;
}
.contact-form
input:focus,
.contact-form
textarea:focus,
.contact-form
select:focus {
border-color:
var(--gold);
}
.contact-form
textarea { min-height: 120px; resize: vertical; }
.contact-form
select option { background: var(--dark); }
.btn-send
{
padding:
1rem 2.5rem;
background:
linear-gradient(135deg, var(--gold), var(--gold-light));
color:
var(--dark); font-family: 'Josefin Sans', sans-serif;
font-size:
.75rem; letter-spacing: 3px; text-transform: uppercase;
font-weight:
600; border: none; border-radius: 4px;
cursor:
pointer; align-self: flex-start;
transition:
opacity .3s, transform .2s;
}
.btn-send:hover
{ opacity: .85; transform: translateY(-1px); }
a.btn-send
{
display:
inline-block; text-decoration: none;
text-align:
center;
}
.contact-email
{
margin-top:
2rem;
font-size:
.75rem; letter-spacing: 2px;
color:
var(--gold); text-transform: uppercase;
}
/*
── FOOTER ── */
footer
{
background:
var(--dark);
border-top:
1px solid rgba(200,149,42,.1);
padding:
2.5rem 3rem;
display:
flex; justify-content: space-between; align-items: center;
flex-wrap:
wrap; gap: 1rem;
}
.footer-logo
{
font-family:
'Dancing Script', cursive;
font-size:
1.4rem; color: var(--blue-light);
}
.footer-copy
{
font-size:
.65rem; letter-spacing: 2px; text-transform: uppercase;
color:
rgba(237,224,196,.25);
}
.footer-links
{ display: flex; gap: 1.5rem; }
.footer-links
a {
font-size:
.65rem; letter-spacing: 2px; text-transform: uppercase;
color:
rgba(237,224,196,.3); text-decoration: none;
transition:
color .3s;
}
.footer-links
a:hover { color: var(--gold); }
/*
── EPK ── */
#epk
{
background:
linear-gradient(180deg, var(--dark) 0%, #1a0a38 100%);
border-top:
1px solid rgba(200,149,42,.15);
}
.inner-epk
{ max-width: 1100px; margin: 0 auto; }
.epk-intro
{
margin-top:
1.5rem; max-width: 600px;
font-size:
.9rem; line-height: 2; color: rgba(237,224,196,.6);
}
.epk-grid
{
display:
grid;
grid-template-columns:
repeat(2, 1fr);
gap:
1.5rem; margin-top: 3rem;
}
.epk-bio
{ grid-column: span 2; }
.epk-card
{
padding:
2rem;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(200,149,42,.12);
border-radius:
10px;
transition:
border-color .3s;
}
.epk-card:hover
{ border-color: rgba(200,149,42,.3); }
.epk-card-label
{
font-size:
.62rem; letter-spacing: 4px; text-transform: uppercase;
color:
var(--gold); margin-bottom: .6rem;
}
.epk-card-title
{
font-family:
'Playfair Display', serif;
font-size:
1.3rem; color: var(--cream);
margin-bottom:
1rem;
}
.epk-card
p { font-size: .88rem; line-height: 1.9; color:
rgba(237,224,196,.65); }
.epk-tags
{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem;
}
.epk-tags
span {
padding:
.25rem .8rem;
border:
1px solid rgba(91,155,213,.3);
border-radius:
20px; font-size: .65rem;
letter-spacing:
1px; color: var(--blue-light);
background:
rgba(91,155,213,.07);
}
.epk-musicians
{ display: flex; flex-direction: column; gap: .8rem; }
.epk-musician
{
display:
flex; justify-content: space-between; align-items: center;
padding:
.6rem 0; border-bottom: 1px solid
rgba(255,255,255,.05);
}
.epk-instrument
{ font-size: .82rem; color: rgba(237,224,196,.6); }
.epk-mname
{
font-family:
'Playfair Display', serif;
font-size:
.95rem; color: var(--cream);
}
.epk-ref
{ display: flex; flex-direction: column; gap: 1rem; }
.epk-ref-item
{ display: flex; align-items: flex-start; gap: 1rem; }
.epk-ref-icon
{ font-size: 1.4rem; margin-top: .1rem; }
.epk-ref-title
{ font-size: .9rem; color: var(--cream); }
.epk-ref-sub
{ font-size: .72rem; color: rgba(237,224,196,.4); margin-top: .2rem;
letter-spacing: 1px; }
.epk-photo-grid
{ display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem;
margin-bottom: 1rem; }
.epk-photo-slot
{
aspect-ratio:
4/3;
border-radius:
6px; border: 1px solid rgba(200,149,42,.25);
background:
rgba(200,149,42,.06);
display:
flex; flex-direction: column;
align-items:
center; justify-content: center; gap: .4rem;
}
.epk-photo-empty
{ border-style: dashed; background: rgba(255,255,255,.02);
}
.epk-photo-icon
{ font-size: 1.5rem; opacity: .5; }
.epk-photo-label
{ font-size: .62rem; letter-spacing: 1px; text-align: center; color:
rgba(237,224,196,.4); }
.epk-photo-label
span { color: var(--gold); }
.epk-photo-note
{ font-size: .72rem; color: rgba(237,224,196,.35); letter-spacing:
1px; }
.epk-fiche-items
{ display: flex; flex-direction: column; gap: .6rem; margin-bottom:
1rem; }
.epk-fiche-item
{
display:
flex; justify-content: space-between;
font-size:
.82rem; padding: .5rem 0;
border-bottom:
1px solid rgba(255,255,255,.05);
}
.epk-fiche-item
span:first-child { color: rgba(237,224,196,.45); }
.epk-fiche-item
span:last-child { color: var(--cream); }
.epk-fiche-note
{ font-size: .72rem; color: var(--gold); letter-spacing: 1px;
}
.epk-contact-card
{ border-color: rgba(91,155,213,.2); }
.epk-contact-card
p { font-size: .88rem; line-height: 1.9; color: rgba(237,224,196,.6);
margin-bottom: 1.5rem; }
.epk-btn-contact
{
display:
inline-block; padding: .8rem 1.8rem;
background:
linear-gradient(135deg, var(--gold), var(--gold-light));
color:
var(--dark); font-size: .72rem;
letter-spacing:
2px; text-transform: uppercase;
font-weight:
600; border-radius: 4px;
text-decoration:
none; transition: opacity .3s;
}
.epk-btn-contact:hover
{ opacity: .85; }
.epk-location
{
margin-top:
1.2rem; font-size: .75rem;
line-height:
1.8; color: rgba(237,224,196,.4);
letter-spacing:
1px;
}
@media
(max-width: 768px) {
.epk-grid
{ grid-template-columns: 1fr; }
.epk-bio
{ grid-column: span 1; }
.hero-buttons
{ gap: .7rem; }
.btn-hero
{ padding: .75rem 1.2rem; font-size: .65rem; }
}
/*
── PHOTO GROUPE ── */
.groupe-photo-wrap
{
margin-bottom:
1rem;
border-radius:
10px; overflow: hidden;
border:
1px solid rgba(200,149,42,.2);
}
.groupe-photo
{
width:
100%; display: block;
filter:
saturate(0.9);
}
.groupe-photo-caption
{
padding:
.6rem 1rem;
font-size:
.65rem; letter-spacing: 1.5px;
color:
rgba(255,240,200,.92);
background:
rgba(0,0,0,.65);
text-align:
center;
}
/*
── ARTICLE PRESSE ── */
#presse
{ padding: 6rem 2rem; }
.inner-presse
{ max-width: 1100px; margin: 0 auto; }
.presse-article
{
display:
grid; grid-template-columns: 1.4fr 1fr;
gap:
3rem; margin-top: 3rem; align-items: start;
}
.presse-rubrique
{
font-size:
.7rem; letter-spacing: 4px; text-transform: uppercase;
color:
var(--gold); margin-bottom: .5rem;
}
.presse-article-titre
{
font-family:
'Playfair Display', serif;
font-size:
1.6rem; color: var(--cream); line-height: 1.25;
margin-bottom:
1.5rem;
}
.presse-article-corps
{
font-size:
.88rem; line-height: 2;
color:
rgba(237,224,196,.7);
margin-bottom:
1rem;
}
.presse-encadre
{
margin-top:
1.2rem; padding: .8rem 1.2rem;
border-left:
3px solid var(--gold);
background:
rgba(200,149,42,.08);
font-size:
.85rem; line-height: 1.8;
color:
var(--cream);
}
.presse-article-visuel
{ position: relative; }
.presse-article-img
{
width:
100%; border-radius: 8px;
border:
1px solid rgba(200,149,42,.2);
box-shadow:
0 8px 32px rgba(0,0,0,.4);
}
.presse-source-bas
{
margin-top:
1.5rem;
font-size:
.65rem; letter-spacing: 2px; text-transform: uppercase;
color:
rgba(237,224,196,.3); text-align: right;
}
@media
(max-width: 768px) {
.presse-article
{ grid-template-columns: 1fr; }
.presse-article-visuel
{ order: -1; }
.presse-article-img
{ max-width: 340px; margin: 0 auto; display: block; }
}
/*
── FICHES MUSICIENS ── */
.musician-card
{
display:
flex; align-items: center; gap: .8rem;
padding:
.35rem .7rem;
background:
rgba(255,255,255,.03);
border-left:
2px solid var(--gold);
border-radius:
0 8px 8px 0;
transition:
background .3s;
margin-bottom:
.1rem;
}
.musician-card:nth-child(even)
{ border-left-color: var(--blue-accent); }
.musician-card:hover
{ background: rgba(200,149,42,.07); }
.musician-photo
{
width:
56px; height: 70px;
border-radius:
8px;
object-fit:
cover; object-position: center top;
border:
2px solid rgba(200,149,42,.4);
flex-shrink:
0;
}
.musician-card-info
{ flex: 1; }
.musician-card-icon
{ font-size: 1rem; margin-bottom: .1rem; }
.musician-card-name
{
font-family:
'Playfair Display', serif;
font-size:
.9rem; color: var(--cream);
}
.musician-card-instrument
{
font-size:
.68rem; letter-spacing: 2px;
text-transform:
uppercase; color: var(--gold);
margin-top:
.15rem;
}
.musician-card-bio
{
font-size:
.70rem; color: rgba(237,224,196,.75);
margin-top:
.1rem; line-height: 1.35;
}
/*
── GRILLE 10 VIDÉOS ── */
.media-grid-10
{
display:
grid;
grid-template-columns:
repeat(3, 1fr);
gap:
1.2rem;
margin-top:
3rem;
}
.media-slot-main
{
grid-column:
span 3;
max-width:
720px;
margin:
0 auto;
width:
100%;
}
.media-slot-main
iframe {
width:
100%; aspect-ratio: 16/9;
border-radius:
8px;
border:
1px solid rgba(200,149,42,.3);
}
.media-slot
{
aspect-ratio:
16/9;
background:
rgba(255,255,255,.05);
border:
1px dashed rgba(200,149,42,.25);
border-radius:
8px;
display:
flex; flex-direction: column;
align-items:
center; justify-content: center;
gap:
.5rem; cursor: pointer;
transition:
background .3s, border-color .3s;
}
.media-slot:hover
{
background:
rgba(200,149,42,.08);
border-color:
rgba(200,149,42,.5);
}
@media
(max-width: 768px) {
.media-grid-10
{ grid-template-columns: repeat(2, 1fr); }
.media-slot-main
{ grid-column: span 2; }
}
/*
── GRILLE MÉDIAS 3x3 ── */
.media-grid-3x3
{
display:
grid;
grid-template-columns:
repeat(3, 1fr);
gap:
1rem;
margin-top:
2.5rem;
}
.media-cell
{
display:
flex; flex-direction: column;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(200,149,42,.2);
border-radius:
8px; overflow: hidden;
}
.media-cell
iframe {
width:
100%; aspect-ratio: 16/9;
display:
block; border: none;
}
.media-cell-label
{
font-size:
.65rem; letter-spacing: 2px;
text-transform:
uppercase; color: var(--gold);
padding:
.4rem .6rem; text-align: center;
}
.media-cell-empty
{
aspect-ratio:
16/9;
display:
flex; flex-direction: column;
align-items:
center; justify-content: center;
gap:
.4rem; cursor: pointer;
border-style:
dashed;
transition:
background .3s, border-color .3s;
}
.media-cell-empty:hover
{
background:
rgba(200,149,42,.07);
border-color:
rgba(200,149,42,.5);
}
/*
── RESPONSIVE ── */
@media
(max-width: 768px) {
nav
{ padding: 1rem 1.5rem; }
.nav-links
{ gap: 1.2rem; }
.nav-links
a { font-size: .65rem; letter-spacing: 1.5px; }
#musique
{ grid-template-columns: 1fr; gap: 3rem; }
.concert-card
{ grid-template-columns: 70px 1fr; }
.concert-badge
{ display: none; }
.media-grid
{ grid-template-columns: 1fr 1fr; }
footer
{ flex-direction: column; text-align: center; }
.footer-links
{ justify-content: center; }
#presse
{ padding: 4rem 1.5rem; }
.presse-card
{ padding: 2rem 1.5rem 2rem 2rem; }
}
</style>
</head>
<body>
<!--
NAV -->
<nav>
<div
class="nav-logo">Eclectiks</div>
<ul
class="nav-links">
<li><a
href="#musique">Le Groupe</a></li>
<li><a
href="#concerts">Concerts</a></li>
<li><a
href="#medias">Médias</a></li>
<li><a
href="#presse">Presse</a></li>
<li><a
href="#epk">EPK</a></li><li><a
href="#contact">Contact</a></li>
</ul>
</nav>
<!--
HERO -->
<section
id="hero">
<div
class="hero-noise"></div>
<div
class="hero-photo-wrap">