body{
font-family:'Poppins', sans-serif;
background:#ececec;
color:#2e2e2e;
margin:0;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 8%;
background:#ffffff;
border-bottom:1px solid #e2e2e2;
position:sticky;
top:0;
z-index:100;
backdrop-filter:blur(8px);
}

header h1{
font-family:'Montserrat', sans-serif;
font-weight:700;
font-size:35px;
margin:0;
letter-spacing:0.5px;
color:#603a73;
}

nav{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

nav a{
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
font-weight:500;
font-size:15px;
transition:0.25s ease;
background:rgba(255,255,255,0.45);
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}

nav a{
color:#333;
}

nav a:hover{
opacity:1;
filter:brightness(1.04);
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(0,0,0,0.08);
background:rgba(255,255,255,0.82);
text-shadow:none;
}

.page{
display:none;
padding:46px 8%;
}

.page.active{
display:block;
}

h1,h2{
font-family:'Playfair Display', serif;
letter-spacing:0.5px;
font-weight:600;
margin-top:0;
margin-bottom:28px;
padding-bottom:10px;
border-bottom:1px solid rgba(59,47,53,0.08);
}

h1,h2{
color:#222;
}

.expo{
margin-bottom:70px;
}

.expo h2{
margin-bottom:10px;
border-bottom:none;
padding-bottom:0;
}

.expo p{
color:#6f5b64;
}

.expo-block{
width:936px;
max-width:100%;
}

.expo-carousel{
position:relative;
width:100%;
display:flex;
align-items:center;
}

.scroll{
display:flex;
gap:12px;
padding:10px 0;
width:100%;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
}

.scroll::-webkit-scrollbar{
display:none;
}

.expo-thumb{
width:304px;
height:200px;
flex:0 0 auto;
border-radius:16px;
overflow:hidden;
position:relative;
transition:transform 0.25s ease, box-shadow 0.25s ease;
box-shadow:0 8px 22px rgba(0,0,0,0.08);
background:white;
}

.expo-thumb:hover{
transform:scale(1.04);
z-index:10;
box-shadow:0 14px 30px rgba(0,0,0,0.12);
}

.expo-img{
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
cursor:pointer;
}

.carousel-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:42px;
height:42px;
border:none;
border-radius:50%;
background:rgba(255,255,255,0.86);
color:#7b6470;
font-size:24px;
cursor:pointer;
z-index:20;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow:0 8px 18px rgba(0,0,0,0.10);
}

.carousel-arrow:hover{
background:white;
transform:translateY(-50%) scale(1.08);
box-shadow:0 12px 24px rgba(0,0,0,0.14);
}

.carousel-arrow.left{
left:-18px;
}

.carousel-arrow.right{
right:-18px;
}

.carousel-arrow.show{
opacity:1;
pointer-events:auto;
}

.expo-text{
width:100%;
margin-top:16px;
text-align:justify;
line-height:1.8;
color:#5a4b52;
background:rgba(255,255,255,0.62);
padding:18px 20px;
border-radius:18px;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
}

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(34,20,28,0.82);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
animation:fadeIn 0.25s ease;
padding:20px;
box-sizing:border-box;
}

.lightbox-img{
max-width:90%;
max-height:90%;
border-radius:18px;
box-shadow:0 0 35px rgba(255,255,255,0.20);
transform:scale(0.9);
transition:transform 0.25s ease;
}

.lightbox.show .lightbox-img{
transform:scale(1);
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

#calendar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:40px;
}

.monthColumn{
display:flex;
flex-direction:column;
gap:10px;
}

.monthTitle{
font-weight:600;
text-align:center;
color:#7a5b66;
}

.week{
background:white;
padding:15px;
cursor:pointer;
border-radius:14px;
box-shadow:0 8px 18px rgba(0,0,0,0.05);
transition:0.2s ease;
color:#4e4147;
}

.week:hover{
transform:translateY(-2px);
box-shadow:0 12px 24px rgba(0,0,0,0.08);
}

.month{
padding:15px;
border-radius:14px;
background:white;
cursor:pointer;
box-shadow:0 8px 18px rgba(0,0,0,0.05);
}

.solo{
background:#4a90ff;
color:white;
}

.collectif{
background:#7a48ff;
color:white;
}

.full{
background:#ff5b5b;
color:white;
}

form{
display:flex;
flex-direction:column;
max-width:440px;
gap:12px;
}

input,textarea{
padding:12px 14px;
border:1px solid rgba(59,47,53,0.12);
border-radius:14px;
background:white;
font-family:'Poppins', sans-serif;
color:#3b2f35;
box-shadow:0 4px 10px rgba(0,0,0,0.03);
}

textarea{
min-height:120px;
resize:vertical;
}

button{
padding:10px 16px;
border:none;
border-radius:999px;
cursor:pointer;
background:#bdbdbd;
color:#333;
font-weight:600;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:0.25s ease;
}

button:hover{
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(0,0,0,0.10);
}

.artist{
display:flex;
margin-bottom:24px;
cursor:pointer;
align-items:flex-start;
padding:14px;
background:white;
border-radius:18px;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
}

.artist img{
width:120px;
height:120px;
object-fit:cover;
margin-right:20px;
border-radius:14px;
}

.bio{
display:none;
margin-top:10px;
opacity:0.9;
color:#5a4b52;
}

.profile-link{
width:38px;
height:38px;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
color:#8f78c8;
}

.profile-icon{
width:22px;
height:22px;
display:block;
stroke:currentColor;
}

.profile-card{
display:flex;
gap:20px;
align-items:flex-start;
background:white;
padding:22px;
border-radius:22px;
max-width:760px;
box-shadow:0 10px 26px rgba(0,0,0,0.06);
}

.profile-photo{
width:180px;
height:180px;
object-fit:cover;
border-radius:18px;
}

.profile-info{
max-width:460px;
color:#4d3f45;
}

.profile-info p{
margin:0 0 12px 0;
}

.profile-actions{
display:flex;
gap:10px;
margin-top:15px;
flex-wrap:wrap;
}

.profile-actions button,
.profile-info button{
margin-right:0;
margin-top:0;
padding:10px 14px;
border:none;
border-radius:999px;
cursor:pointer;
}

#editProfileForm{
display:flex;
flex-direction:column;
gap:10px;
width:100%;
max-width:420px;
}

#editProfileForm input,
#editProfileForm textarea{
padding:10px 12px;
border:1px solid rgba(59,47,53,0.12);
border-radius:12px;
}

.active{
background:#ececec;
}

@media (max-width: 1100px){
header{
padding:12px 5%;
}

.page{
padding:36px 5%;
}

.expo-block{
width:100%;
}
}

@media (max-width: 780px){
header{
flex-direction:column;
align-items:flex-start;
gap:12px;
}

nav{
gap:8px;
}

#calendar{
grid-template-columns:repeat(2,1fr);
}

.profile-card{
flex-direction:column;
}

.profile-photo{
width:100%;
max-width:260px;
height:auto;
aspect-ratio:1/1;
}
}

@media (max-width: 520px){
#calendar{
grid-template-columns:1fr;
}

.expo-thumb{
width:260px;
height:175px;
}

nav a{
font-size:14px;
padding:7px 12px;
}
}

.agenda-info{
max-width:700px;
line-height:1.7;
margin-bottom:25px;
color:#5a4b52;
}

.agenda-info{
max-width:700px;
line-height:1.7;
margin-bottom:25px;
color:#5a4b52;
}

.agenda-legend{
display:flex;
flex-wrap:wrap;
gap:14px 22px;
align-items:center;
margin:18px 0 24px 0;
padding:14px 16px;
background:rgba(255,255,255,0.65);
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,0.04);
width:fit-content;
max-width:100%;
}

.legend-item{
display:flex;
align-items:center;
gap:8px;
color:#4e4147;
font-size:14px;
}

.legend-color{
width:16px;
height:16px;
border-radius:50%;
display:inline-block;
border:1px solid rgba(59,47,53,0.10);
background:white;
}

.legend-color.libre{
background:#ffffff;
}

.legend-color.solo{background:#4a90ff;}
.legend-color.collectif{background:#7a48ff;}
.legend-color.full{background:#ff5b5b;}

.week.libre{
background:white;
}

.week{
min-height:92px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:10px;
}

.week.libre{
background:white;
}

.week-label{
font-weight:600;
line-height:1.3;
}

.week-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:4px;
}

.calendar-avatars{
display:flex;
align-items:center;
gap:4px;
flex-wrap:wrap;
}

.calendar-avatar{
width:28px;
height:28px;
border-radius:50%;
object-fit:cover;
border:2px solid rgba(255,255,255,0.9);
box-shadow:0 2px 6px rgba(0,0,0,0.10);
background:white;
}

.calendar-avatar.fallback{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:600;
color:#5a4b52;
background:#f6eef2;
}

.collectif-count{
font-size:13px;
font-weight:600;
color:#4e4147;
white-space:nowrap;
}

.monthColumn.collectif-preview .week.libre{
background:#f3ecff;
box-shadow:0 0 0 2px rgba(180,145,220,0.35);
}

.reserve-buttons button.active{
background:#6497e9;
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(0,0,0,0.10);
}

nav a.menu-active{
background:#dcdcdc;
color:#222;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

#gallery{
color:#2f2f2f;
}

.gallery-top{
display:grid;
grid-template-columns:1.35fr 0.8fr;
gap:24px;
align-items:start;
margin-bottom:16px;
}

.gallery-left{
display:flex;
flex-direction:column;
gap:12px;
}

.gallery-text{
background:white;
padding:18px 20px;
border-radius:16px;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
line-height:1.65;
font-size:15px;
color:#3a3a3a;
}

.gallery-contact{
background:white;
padding:14px 16px;
border-radius:16px;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
color:#333;
font-size:14px;
line-height:1.5;
width:100%;
box-sizing:border-box;
}

.gallery-side{
display:flex;
flex-direction:column;
gap:12px;
}

.gallery-map{
background:white;
padding:10px;
border-radius:20px;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
overflow:hidden;
}

.gallery-map iframe{
display:block;
border-radius:14px;
}

.gallery-contact{
background:white;
padding:14px 16px;
border-radius:16px;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
color:#333;
font-size:14px;
line-height:1.5;
}

.gallery-address{
margin:0 0 10px 0;
font-weight:600;
font-size:14px;
}

.gallery-line{
display:flex;
align-items:center;
gap:8px;
margin:6px 0 0 0;
font-size:14px;
}

.gallery-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:50%;
background:#efefef;
color:#222;
font-size:12px;
flex:0 0 22px;
}

.gallery-images{
margin-top:0px;
}

@media (max-width: 900px){
.gallery-top{
grid-template-columns:1fr;
}
}

.account-choice{
max-width:520px;
}

.account-switch{
display:flex;
gap:10px;
margin-bottom:18px;
flex-wrap:wrap;
}

.account-tab{
background:#e0e0e0;
color:#222;
}

.account-tab.active{
background:#333;
color:white;
}

.account-form{
display:flex;
flex-direction:column;
gap:12px;
max-width:520px;
}

.form-file-label{
font-size:14px;
font-weight:600;
color:#333;
margin-top:6px;
}

.form-help{
font-size:12px;
color:#666;
margin-top:-4px;
margin-bottom:4px;
}

.profile-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.artist{
display:flex;
align-items:flex-start;
gap:18px;
}

.artist-main-photo{
width:120px;
height:120px;
object-fit:cover;
border-radius:14px;
flex:0 0 120px;
}

.artist-content{
flex:1;
min-width:0;
}

.artist-works-block{
margin-top:14px;
max-width:100%;
}

.artist-works-carousel{
position:relative;
display:flex;
align-items:center;
width:100%;
}

.artist-works-scroll{
display:flex;
gap:10px;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
padding:6px 0;
width:100%;
}

.artist-works-scroll::-webkit-scrollbar{
display:none;
}

.artist-work-thumb{
width:120px;
height:90px;
flex:0 0 auto;
border-radius:12px;
overflow:hidden;
background:white;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.artist-work-img{
display:block;
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
}

.artist-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
border:none;
border-radius:50%;
background:rgba(255,255,255,0.92);
color:#555;
font-size:20px;
cursor:pointer;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
box-shadow:0 6px 14px rgba(0,0,0,0.12);
transition:0.2s ease;
}

.artist-arrow.left{
left:-10px;
}

.artist-arrow.right{
right:-10px;
}

.artist-arrow.show{
opacity:1;
pointer-events:auto;
}

.artist-website{
margin-top:8px;
font-size:14px;
color:#333;
}

.artist-website a{
color:#3a6edb;
text-decoration:none;
}

.artist-website a:hover{
text-decoration:underline;
}