:root{

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

--primary-color:#2ecc71;
--secondary-color:#095c2b;

--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:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

max-width:1100px;

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;

}

.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);

}