:root{

--background:#0f1115;
--container-background:#1a1d24;

--primary-color:#FF2056;
--secondary-color:#D10034;

--text-color:#e6e6e6;

--border-color:#2a2f38;

--success-color:#2ecc71;
--error-color:#e74c3c;
--warning-color:#f39c12;
--info-color:#3498db;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:var(--background);
color:var(--text-color);
font-family:Arial, Helvetica, sans-serif;
line-height:1.6;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.main-container{
min-height:calc(100vh - 140px);
}

/* HERO HEADER */

.hero-header{

position:relative;
height:420px;

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

overflow:hidden;

background:#050607;

}

.hero-header::after{

content:"";

position:absolute;
inset:0;

backdrop-filter:blur(2px);

background:rgba(0,0,0,0.15);

z-index:2;

pointer-events:none;

}

.hero-header::before{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:100px;

background:
linear-gradient(
90deg,
var(--secondary-color),
var(--primary-color),
var(--secondary-color)
) bottom / 100% 2px no-repeat,

linear-gradient(
to top,
color-mix(in srgb, var(--primary-color) 10%, transparent),
transparent
);

z-index:2;

pointer-events:none;

}

/* PARTICLES */

#particles-js{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

z-index:1;

}

/* NAVBAR */

.navbar-glass{

position:absolute;

top:25px;
left:50%;

transform:translateX(-50%);

z-index:5;

backdrop-filter:blur(20px);

background:color-mix(in srgb, var(--background) 50%, transparent);

border:1px solid color-mix(in srgb, var(--border-color) 50%, transparent);

border-radius:14px;

padding:14px 35px;

}

.navbar-glass::after{

content:"";

position:absolute;

bottom:-10px;
left:50%;

transform:translateX(-50%);

width:70%;
height:2px;

background:linear-gradient(
90deg,
transparent,
var(--primary-color),
transparent
);

opacity:0.8;

}

/* BARRE SOUS NAV */

.hero-header::after{

content:"";

position:absolute;
inset:0;

backdrop-filter:blur(2px);

background:color-mix(in srgb, var(--background) 40%, transparent);

z-index:2;

pointer-events:none;

}

/* NAV CONTENT */

.nav-content{

display:flex;
gap:30px;

align-items:center;

}

/* NAV LINKS */

.nav-link{

color:var(--text-color);
text-decoration:none;

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

font-size:15px;

opacity:0.8;

transition:0.25s;

}

.nav-link:hover{

opacity:1;
color:var(--primary-color);

}

/* HERO CENTER */

.hero-center{

position:relative;
z-index:3;

text-align:center;

}

.hero-logo{

width:230px;

filter:
drop-shadow(0 10px 40px rgba(0,0,0,0.8))
drop-shadow(0 0 20px color-mix(in srgb, var(--primary-color) 60%, transparent));

animation:logoGlow 4s ease-in-out infinite;

}

@keyframes logoGlow{

0%{
filter:
drop-shadow(0 10px 40px rgba(0,0,0,0.8))
drop-shadow(0 0 10px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

50%{
filter:
drop-shadow(0 10px 40px rgba(0,0,0,0.8))
drop-shadow(0 0 30px color-mix(in srgb, var(--primary-color) 70%, transparent));
}

100%{
filter:
drop-shadow(0 10px 40px rgba(0,0,0,0.8))
drop-shadow(0 0 10px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

}

/* FOOTER */

.site-footer{

background:var(--container-background);
border-top:1px solid var(--border-color);

padding:20px 0;

}

.footer-container{

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

font-size:14px;

}

.footer-right a{

color:var(--text-color);
text-decoration:none;

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

}

.footer-right a:hover{
color:var(--primary-color);
}

/* BUTTONS */

.btn{

display:inline-block;

padding:10px 18px;

border-radius:8px;

text-decoration:none;

font-size:14px;

cursor:pointer;

transition:all 0.25s ease;

border:none;

color:white;

background:linear-gradient(
135deg,
var(--primary-color),
var(--secondary-color)
);

box-shadow:0 4px 14px color-mix(in srgb, var(--primary-color) 40%, transparent);

}

.btn:hover{

transform:translateY(-2px);

box-shadow:
0 6px 20px color-mix(in srgb, var(--primary-color) 50%, transparent);

filter:brightness(1.1);

}

.home-hero{

padding:80px 0;
text-align:center;

position:relative;

background:
radial-gradient(
circle at top,
color-mix(in srgb, var(--primary-color) 12%, transparent),
transparent 50%
);

}

.hero-title{

font-size:42px;
font-weight:700;

margin-bottom:20px;

}

.hero-title span{

color:var(--primary-color);

text-shadow:
0 0 10px color-mix(in srgb, var(--primary-color) 50%, transparent);

}

.hero-subtitle{

max-width:600px;
margin:auto;

opacity:0.8;

font-size:18px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;
justify-content:center;
gap:15px;

flex-wrap:wrap;

}

.home-section{

padding:80px 0;

}

.section-title{

text-align:center;

font-size:28px;

margin-bottom:50px;

}

.features-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.feature-card{

background:color-mix(in srgb, var(--container-background) 90%, transparent);

border:1px solid var(--border-color);

padding:30px;

border-radius:12px;

text-align:center;

transition:all 0.25s ease;

backdrop-filter:blur(6px);

}

.feature-card:hover{

transform:translateY(-6px);

border-color:var(--primary-color);

box-shadow:

0 10px 25px color-mix(in srgb, var(--primary-color) 15%, transparent);

}

.feature-card i{

font-size:28px;

color:var(--primary-color);

margin-bottom:15px;

filter:drop-shadow(
0 0 8px color-mix(in srgb, var(--primary-color) 40%, transparent)
);

}

.feature-card h3{

margin-bottom:10px;

}

.steps-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.step{

background:color-mix(in srgb, var(--container-background) 92%, transparent);

border:1px solid var(--border-color);

padding:25px;

border-radius:12px;

transition:0.25s;

}

.step:hover{

border-color:var(--primary-color);

transform:translateY(-4px);

}

.step-number{

display:inline-flex;

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

width:35px;
height:35px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--primary-color),
var(--secondary-color)
);

color:white;

font-weight:bold;

margin-bottom:10px;

box-shadow:
0 0 10px color-mix(in srgb, var(--primary-color) 40%, transparent);

}

.home-cta{

padding:80px 0;

text-align:center;

background:

linear-gradient(
to top,
color-mix(in srgb, var(--primary-color) 10%, transparent),
transparent
),

color-mix(in srgb, var(--container-background) 85%, transparent);

}

.home-cta h2{

margin-bottom:25px;

}

.posts-section{

padding:80px 20px;

}

.posts-subtitle{

text-align:center;
opacity:0.8;
margin-bottom:50px;
max-width:700px;
margin-left:auto;
margin-right:auto;

}


/* GRID */

.posts-grid{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:35px;

max-width:1200px;

margin:auto;

}

/* CARD */

.post-card{

background:var(--container-background);

border:1px solid var(--border-color);

border-radius:14px;

overflow:hidden;

transition:all 0.25s ease;

display:flex;
flex-direction:column;

min-height:220px;

width:340px;

}

.post-card:hover{

transform:translateY(-6px);

border-color:var(--post-color);

box-shadow:
0 15px 30px
color-mix(in srgb,var(--post-color) 30%,transparent);
transition:
transform .25s,
box-shadow .25s,
border-color .25s;

}


/* HEADER */

.post-card-header{

position:relative;

padding:22px;

font-weight:600;

font-size:18px;

letter-spacing:0.4px;

}

.post-card-header::after{

content:"";

position:absolute;

left:15px;
right:15px;
bottom:0;

height:1px;

background:color-mix(in srgb, var(--border-color) 80%, transparent);

opacity:0.6;

}


/* BODY */

.post-card-body{

padding:22px;

display:flex;
flex-direction:column;

gap:16px;

flex-grow:1;

}


/* DESCRIPTION */

.post-description{

opacity:0.85;

font-size:14px;

line-height:1.6;

flex-grow:1;

}


/* SLOTS */

.post-slots{

font-size:14px;

opacity:0.8;

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

}


/* RESPONSIVE */

@media (max-width:1000px){

.posts-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:650px){

.posts-grid{
grid-template-columns:1fr;
}

}

.post-description p{
margin-bottom:10px;
}


.post-description blockquote{

border-left:3px solid var(--border-color);

padding-left:10px;

opacity:0.85;

margin:10px 0;

}

.post-btn{

background:linear-gradient(
135deg,
var(--post-color),
var(--post-secondary)
);

color:white;

border:none;

box-shadow:
0 6px 15px color-mix(in srgb, var(--post-color) 35%, transparent);

}

.post-btn:hover{

box-shadow:
0 10px 25px color-mix(in srgb, var(--post-color) 50%, transparent),
0 0 12px color-mix(in srgb, var(--post-color) 40%, transparent);

}



/* ============================= */
/* FORM SECTION */
/* ============================= */

.apply-section{

padding:80px 0;

}

.apply-section h1{

text-align:center;

margin-bottom:50px;

font-size:34px;

}


/* ============================= */
/* FORM CONTAINER */
/* ============================= */

form{

max-width:700px;

margin:auto;

background:var(--container-background);

border:1px solid var(--border-color);

padding:40px;

border-radius:14px;

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

}


/* ============================= */
/* FORM FIELD */
/* ============================= */

.form-field{

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

}

.form-field label{

font-weight:600;

font-size:15px;

}


/* description sous label */

.form-field small{

font-size:13px;

opacity:0.7;

margin-bottom:4px;

}


/* ============================= */
/* INPUTS */
/* ============================= */

input,
textarea,
select{

background:var(--background);

border:1px solid var(--border-color);

color:var(--text-color);

padding:12px 14px;

border-radius:8px;

font-size:14px;

transition:all .2s ease;

width:100%;

}


/* textarea */

textarea{

min-height:120px;

resize:vertical;

}


/* focus */

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

outline:none;

border-color:var(--primary-color);

box-shadow:
0 0 0 2px
color-mix(in srgb,var(--primary-color) 20%,transparent);

}


/* placeholder */

input::placeholder,
textarea::placeholder{

opacity:0.5;

}


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

select{

cursor:pointer;

}


/* ============================= */
/* BUTTON SUBMIT */
/* ============================= */

form button{

margin-top:10px;

padding:14px;

border:none;

border-radius:8px;

font-size:15px;

font-weight:600;

cursor:pointer;

background:linear-gradient(
135deg,
var(--primary-color),
var(--secondary-color)
);

color:white;

transition:all .25s ease;

}

form button:hover{

transform:translateY(-2px);

box-shadow:
0 10px 25px
color-mix(in srgb,var(--primary-color) 40%,transparent);

}


/* ============================= */
/* ERROR STATE */
/* ============================= */

input:invalid{

border-color:var(--error-color);

}


/* ============================= */
/* SUCCESS MESSAGE */
/* ============================= */

.form-success{

background:
color-mix(in srgb,var(--success-color) 15%,transparent);

border:1px solid var(--success-color);

padding:15px;

border-radius:8px;

}


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

@media (max-width:700px){

form{

padding:25px;

}

.apply-section h1{

font-size:26px;

}

}

.error-message{

color:var(--error-color);

font-size:13px;

margin-top:5px;

}

.input-error{

border-color:var(--error-color);

box-shadow:
0 0 0 2px
color-mix(in srgb,var(--error-color) 20%,transparent);

}

/* THANK PAGE */

.thank-section{

padding:120px 0;

display:flex;
justify-content:center;

}

.thank-card{

max-width:620px;

margin:auto;

padding:60px;

border-radius:18px;

background:linear-gradient(
180deg,
color-mix(in srgb,var(--container-background) 90%,transparent),
var(--container-background)
);

border:1px solid var(--border-color);

box-shadow:
0 20px 60px color-mix(in srgb,var(--primary-color) 15%,transparent);

text-align:center;

position:relative;

animation:fadeUp .6s ease;

}

/* ICON */

.success-icon{

font-size:70px;

color:var(--success-color);

margin-bottom:15px;

text-shadow:
0 0 20px color-mix(in srgb,var(--success-color) 40%,transparent);

animation:pop .4s ease;

}

@keyframes pop{
0%{transform:scale(.5);opacity:0}
100%{transform:scale(1);opacity:1}
}

/* TITLE */

.thank-title{

font-size:36px;

margin-bottom:10px;

background:linear-gradient(
90deg,
var(--primary-color),
var(--secondary-color)
);

-webkit-background-clip:text;
color:transparent;

}

/* TEXT */

.thank-description{

font-size:18px;

margin-bottom:5px;

}

.thank-sub{

opacity:.75;

margin-bottom:35px;

}

/* STEPS */

.thank-steps{

background:color-mix(in srgb,var(--container-background) 80%,transparent);

border:1px solid var(--border-color);

border-radius:12px;

padding:25px;

margin-bottom:35px;

text-align:left;

}

.thank-steps h3{

margin-bottom:15px;

font-size:16px;

opacity:.9;

}

.thank-step{

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

padding:8px 0;

opacity:.9;

}

.thank-step span{

font-size:18px;

}

/* BUTTONS */

.thank-actions{

display:flex;
gap:15px;
justify-content:center;

flex-wrap:wrap;

}

.btn-secondary{

background:transparent;

border:1px solid var(--primary-color);

color:var(--primary-color);

}

.btn-secondary:hover{

background:color-mix(in srgb,var(--primary-color) 15%,transparent);

}

/* ANIMATION */

@keyframes fadeUp{

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

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

}

.error-card{

border-color:var(--error-color);

box-shadow:
0 20px 60px color-mix(in srgb,var(--error-color) 20%,transparent);

}

.error-icon{

color:var(--error-color);

text-shadow:
0 0 20px color-mix(in srgb,var(--error-color) 40%,transparent);

}

.disabled-btn{

background:#3a3a3a !important;
border-color:#3a3a3a !important;
color:#bbb;

cursor:not-allowed;

opacity:0.6;

}

.disabled-btn:hover{

transform:none;
box-shadow:none;

}

.slots-full{

color:#ff6b6b;
font-weight:600;

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

}
.team-section{
padding:80px 0;

background:linear-gradient(
180deg,
var(--background) 60%,
color-mix(in srgb, var(--background) 90%, var(--primary-color) 10%) 100%
);
}

.team-title{
text-align:center;
font-size:42px;
margin-bottom:10px;
font-weight:700;
}

.team-subtitle{
text-align:center;
opacity:.7;
max-width:700px;
margin:auto;
margin-bottom:70px;
}

.team-role-block{
margin-bottom:20px;
padding:40px 20px;
border-radius:20px;

background:linear-gradient(
180deg,
rgba(0,0,0,0) 0%,
var(--role-color)33 100%
);
}

.team-role-title{
font-size:26px;
margin-bottom:30px;
font-weight:700;
text-align:center;

background:linear-gradient(135deg,var(--role-color),#ffffff);
background-clip:text;
-webkit-background-clip:text;
color:transparent;

text-shadow:0 0 12px var(--role-color);
}

.team-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
max-width:900px;
margin:auto;
}

.team-card{
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
padding:25px;
text-align:center;
transition:0.3s;
position:relative;
overflow:hidden;
width:200px;

background:linear-gradient(
145deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

box-shadow:
0 0 0 rgba(0,0,0,0),
0 0 20px rgba(0,0,0,0.4);
}

.team-card::before{
content:"";
position:absolute;
inset:0;

background:radial-gradient(
circle at top,
var(--role-color)30,
transparent 60%
);

opacity:0;
transition:0.3s;
}

.team-card:hover::before{
opacity:1;
}

.team-card:hover{
transform:translateY(-6px) scale(1.03);
border-color:var(--role-color);
box-shadow:0 0 25px var(--role-color)30;
}

.team-avatar img{
width:80px;
height:80px;
border-radius:12px;
margin-bottom:15px;

box-shadow:0 0 15px rgba(0,0,0,0.6);
}

.team-name{
font-weight:600;
font-size:16px;
letter-spacing:0.3px;
}