/* ================================================= */
/* VARIABLES COULEURS */
/* ================================================= */

:root{

--header-height:90px;
--background:#faf0ed;
--text:#082e6b;
--card:#ffffff;
--accent:#fe7a56;
--section-alt:#f7e5e1;
--border:#eee;

}

.dark-mode{

--background:#0d1b2a;
--text:#f6f1ee;
--card:#1a2f4a;
--accent:#fe7a56;
--section-alt:#13263d;
--border:#2b3e57;

}


/* ================================================= */
/* GLOBAL */
/* ================================================= */

body{

margin:0;
font-family:'Montserrat', sans-serif;
font-weight:300;
background:var(--background);
color:var(--text);

}

h1,h2,h3{

font-family:'Cavalier', sans-serif;
letter-spacing:1px;

}

body{

background-image:
linear-gradient(rgba(250,240,237,0.7), rgba(250,240,237,0.4)),
url("images/palm-bg.png");

background-size:cover;
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}
.dark-mode{

background-image:url("images/palm-dark.png");
background-size:cover;
background-repeat:no-repeat;
background-position:center;

}
p{

line-height:1.6;

}


/* ================================================= */
/* HEADER / NAVIGATION */
/* ================================================= */
header::after{

content:"";
position:absolute;
left:0;
bottom:0;

width:100%;
height:2px;

background:#fe7a56;

box-shadow:
0 0 6px #fe7a56,
0 0 12px #fe7a56,
0 0 20px rgba(254,122,86,0.6);

}

header{

position:sticky;
top:0;
z-index:1000;

height:var(--header-height);

display:flex;
justify-content:space-between;
align-items:center;

padding:0 60px;

background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);

}

.dark-mode header{

background:rgba(15,23,42,0.8);

}

.logo a{
display:block;
}

.logo img{

height:60px;
transition:0.2s;

}

.logo img:hover{

transform:scale(1.05);

}

nav{

display:flex;
align-items:center;
gap:25px;

}

nav a{

text-decoration:none;
color:var(--text);
font-weight:500;

}

nav a:hover{

color:var(--accent);

}


/* ================================================= */
/* BOUTON THEME */
/* ================================================= */

.theme-btn{

background:transparent;
border:1.5px solid #fe7a56;
color:#fe7a56;

font-size:18px;

width:38px;
height:38px;

border-radius:8px;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
transition:all 0.25s ease;

}

.theme-btn:hover{

background:#fe7a56;
color:white;

}


/* ================================================= */
/* HERO */
/* ================================================= */

.hero{
position:relative;
text-align:center;
padding:160px 20px;

background:
linear-gradient(180deg, rgba(250,240,237,0.85), rgba(250,240,237,0.6)),
;

background-size:cover;
background-position:center;
overflow:hidden;
}
.hero::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

width:600px;
height:600px;

background:radial-gradient(circle, rgba(254,122,86,0.25), transparent 70%);
filter:blur(80px);

z-index:0;
}
.hero *{
position:relative;
z-index:2;
}
.hero h1{
font-size:72px;
letter-spacing:3px;
margin-bottom:20px;

text-shadow:
0 0 10px rgba(0,0,0,0.1),
0 0 20px rgba(254,122,86,0.2);
}
.hero p{
max-width:700px;
margin:auto;
font-size:20px;
opacity:0.9;
}

/* HERO DARK MODE */
.dark-mode .hero{
background:
linear-gradient(180deg, rgba(13,27,42,0.85), rgba(13,27,42,0.7)),
;

background-size:cover;
background-position:center;
}

.dark-mode .hero::before{
background:radial-gradient(circle, rgba(254,122,86,0.35), transparent 70%);
filter:blur(100px);
}

.dark-mode .hero h1{
color:#ffffff;

text-shadow:
0 0 10px rgba(254,122,86,0.4),
0 0 20px rgba(254,122,86,0.3),
0 0 40px rgba(254,122,86,0.2);
}
.dark-mode .hero p{
color:#d6d6d6;
}

.hero{
position:relative;
z-index:1;
}

.section{
position:relative;
z-index:2;
margin-top:-80px; 

/* colle la section au hero */
}
.hero::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:150px;

background:linear-gradient(to bottom, transparent, var(--bg));
pointer-events:none;
}
/* ================================================= */
/* BOUTONS */
/* ================================================= */

.btn{
display:inline-block;
margin-top:30px;
padding:16px 36px;
background:var(--accent);
color:white;
border-radius:12px;
text-decoration:none;
font-weight:500;

box-shadow:0 5px 20px rgba(254,122,86,0.4);
transition:all 0.3s ease;
}

.btn:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:0 10px 30px rgba(254,122,86,0.6);
}
.dark-mode .btn{
background:var(--accent);
box-shadow:0 0 15px rgba(254,122,86,0.5);
}

.dark-mode .btn:hover{
box-shadow:0 0 30px rgba(254,122,86,0.8);
}
button{

padding:14px;
border:none;
border-radius:12px;
background:var(--accent);
color:white;
cursor:pointer;

}


/* ================================================= */
/* SECTIONS */
/* ================================================= */

.section{

padding:40px 10%;

}

.section h1{

font-size:42px;

}

.section h2{

font-size:34px;

}

section,
.hero{
scroll-margin-top:var(--header-height);
}

.section{
padding-top:calc(40px + var(--header-height));
}

/* ================================================= */
/* CARDS */
/* ================================================= */

.cards{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;

}

.card{

background:var(--card);
padding:30px;
border-radius:16px;

}

.card:hover{

transform:translateY(-6px);

box-shadow:
0 10px 30px rgba(0,0,0,0.08),
0 0 10px rgba(254,122,86,0.25),
0 0 20px rgba(254,122,86,0.15);

}

.dark-mode .card{

box-shadow:0 8px 25px rgba(0,0,0,0.35);

}
.dark-mode .card:hover{

box-shadow:
0 10px 30px rgba(0,0,0,0.5),
0 0 12px rgba(254,122,86,0.35),
0 0 30px rgba(254,122,86,0.25);

}
/* position carte bouteilles */

.bouteilles{

grid-column:3;
grid-row:2;

}


/* ================================================= */
/* MENU BOISSONS */
/* ================================================= */

.menu{

list-style:none;
padding:0;
margin-top:15px;

}

.menu li{

display:flex;
justify-content:space-between;
padding:8px 0;
border-bottom:1px solid var(--border);
font-size:14px;

}

.menu span{

font-weight:bold;
color:var(--text);

}


/* ================================================= */
/* TEAM */
/* ================================================= */

.team{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;

}

.member{

text-align:center;

}

.member img{

width:100%;
height:320px;
object-fit:cover;
border-radius:16px;


box-shadow:
0 0 5px #fe7a56,
0 0 10px rgba(254,122,86,0.9),
0 0 15px rgba(254,122,86,0.6),
0 0 20px rgba(254,122,86,0.35);

}


/* ================================================= */
/* FORMULAIRES */
/* ================================================= */

form{

display:flex;
flex-direction:column;
gap:15px;

}

input, select, textarea{

padding:12px;
border-radius:10px;
border:1px solid var(--border);
background:var(--card);
color:var(--text);

}

input:focus,
select:focus,
textarea:focus{

outline:none;
border-color:var(--accent);

}


/* ================================================= */
/* CHECKBOX GROUP */
/* ================================================= */

.checkbox-group{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:10px;

}

.checkbox-group label{

display:flex;
align-items:center;
gap:8px;
background:white;
padding:10px;
border-radius:8px;
border:1px solid #eee;
cursor:pointer;

}

.dark-mode .checkbox-group label{

background:var(--card);
border:1px solid var(--border);
color:var(--text);

}


/* ================================================= */
/* MULTI SELECT */
/* ================================================= */

.multi-select-container{

position:relative;
width:100%;

}

.selected-items{

min-height:45px;
border:1px solid #ddd;
border-radius:10px;
padding:10px;
display:flex;
flex-wrap:wrap;
gap:8px;
cursor:pointer;
background:white;

}

.placeholder{

color:#888;

}

.tag{

background:#fe7a56;
color:white;
padding:6px 12px;
border-radius:20px;
font-size:14px;

}

.options{

position:absolute;
top:100%;
left:0;
right:0;
background:white;
border:1px solid #ddd;
border-radius:10px;
margin-top:5px;
display:none;
z-index:10;
max-height:200px;
overflow:auto;

}

.option{

padding:10px;
cursor:pointer;
transition:0.2s;

}

.option:hover{

background:#faf0ed;

}

/* dark mode */

.dark-mode .selected-items{

background:var(--card);
border:1px solid var(--border);
color:var(--text);

}

.dark-mode .options{

background:var(--card);
border:1px solid var(--border);

}

.dark-mode .option{

color:var(--text);

}

.dark-mode .option:hover{

background:var(--section-alt);

}

.dark-mode .placeholder{

color:#9ca3af;

}


/* ================================================= */
/* MAP POPUP */
/* ================================================= */

.map-img{

width:100%;
max-width:100%;
height:auto;

border-radius:12px;
margin-top:10px;

cursor:pointer;
transition:0.3s;

}

.map-img:hover{

transform:scale(1.02);

}

.map-modal{

display:none;
position:fixed;
z-index:2000;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);

justify-content:center;
align-items:center;

}

.map-modal-content{

max-width:90%;
max-height:90%;
border-radius:12px;

}


/* ================================================= */
/* VIP */
/* ================================================= */

.vip-cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;

}

.vip-card{

background:white;
padding:35px;
border-radius:16px;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,0.06);
transition:0.3s;

}

.vip-card:hover{

transform:translateY(-6px);

}

.vip-card h2{

font-size:28px;

}

.price{

font-size:34px;
margin:15px 0;
color:#fe7a56;
font-weight:500;

}

.vip-card ul{

list-style:none;
padding:0;
margin-top:20px;

}

.vip-card li{

margin:10px 0;

}

.highlight{

border:2px solid #fe7a56;
transform:scale(1.05);

}


/* VIP DARK MODE */

body.dark-mode .vip-card{

background:#0f2238;
color:#f1f1f1;
box-shadow:0 8px 30px rgba(0,0,0,0.6);

}

body.dark-mode .vip-card ul{

color:#d6d6d6;

}

body.dark-mode .price{

color:#fe7a56;

}

body.dark-mode .highlight{

border:2px solid #fe7a56;
background:linear-gradient(180deg,#112c4a,#0b1e33);

}


/* ================================================= */
/* FOOTER */
/* ================================================= */

footer{

text-align:center;
padding:30px;
background:var(--card);
margin-top:60px;

}


/* ================================================= */
/* RESPONSIVE */
/* ================================================= */

@media (max-width:768px){

header{

flex-direction:column;
padding:20px;

}

nav{

flex-wrap:wrap;
justify-content:center;

}

.hero{

padding:100px 20px;

}

.hero h1{

font-size:40px;

}

.section{

padding:40px 20px;

}

.cards{

grid-template-columns:1fr;

}

.card{

grid-column:auto !important;
grid-row:auto !important;

}

.team{

grid-template-columns:1fr;

}

.member img{

height:260px;

}

button{

width:100%;

}

}

/* -------------------- */
/* PAGE TRANSITION */
/* -------------------- */



@keyframes fadeIn{

from{
opacity:0;
transform:translateY(10px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* -------------------- */
/* APPARITION GLOBALE */
/* -------------------- */

header,
.hero,
.section,
.card,
.vip-card,
.member,
footer{

opacity:0;
transform:translateY(15px);
animation:fadeInUp 0.6s ease forwards;

}

@keyframes fadeInUp{

from{
opacity:0;
transform:translateY(15px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.card.highlight{
border:2px solid #fe7a56;
box-shadow:0 0 20px rgba(254,122,86,0.4);
}

.cards{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:25px;
align-items:start;
}

/* colonne 3 empilée */
.right-column{
display:flex;
flex-direction:column;
gap:25px;
}

/* ================================================= */
/* FIX LAYOUT CARDS (3 colonnes propres + alignement) */
/* ================================================= */

.cards{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:25px;
align-items:stretch;
}

/* colonnes */
.column{
display:flex;
flex-direction:column;
gap:25px;
height:100%;
}

/* cards prennent toute la hauteur */
.column .card{
flex:1;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

/* highlight */
.card.highlight{
border:2px solid #fe7a56;
box-shadow:0 0 20px rgba(254,122,86,0.4);
}