:root {
  --bg: #050505;
  --bg-soft: #101015;
  --text: #f5f5f5;
  --muted: #8b8b8f;
  --accent: #ff2438;
  --border: #26262e;

  --radius-lg: 20px;
  --radius-pill: 999px;

  --transition: 0.22s ease-out;

  --shadow-main: 0 22px 60px rgba(0,0,0,0.9);
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:"Inter",sans-serif;
background: radial-gradient(circle at top,#191921 0,#050506 55%,#000 100%);
color:var(--text);
min-height:100vh;
overflow-x:hidden;
}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

.container{
max-width:1100px;
margin:auto;
padding:0 1.5rem;
}






/* ORBES */

.orb{
position:fixed;
width:260px;
height:260px;
border-radius:50%;
filter:blur(40px);
opacity:.35;
pointer-events:none;
z-index:0;
mix-blend-mode:screen;
}

.orb.red{
background:radial-gradient(circle,rgba(255,36,56,.9),transparent 60%);
top:10%;
left:-40px;
animation:float1 16s infinite alternate ease-in-out;
}

.orb.dark{
background:radial-gradient(circle,rgba(40,40,60,.9),transparent 60%);
bottom:-60px;
right:-40px;
animation:float2 20s infinite alternate ease-in-out;
}

@keyframes float1{
0%{transform:translate(0,0)}
100%{transform:translate(40px,60px)}
}

@keyframes float2{
0%{transform:translate(0,0)}
100%{transform:translate(-50px,-40px)}
}






/* HEADER */

.site-header{
position:sticky;
top:0;
z-index:10;
padding:1.1rem 0;
background:rgba(5,5,6,.96);
backdrop-filter:blur(14px);
border-bottom:1px solid #111118;
}

.nav{
max-width:1200px;
margin:0 auto;
padding:0 2rem;
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
}

.logo-wrap{
display:flex;
flex-direction:column;
gap:.12rem;
}

.logo-main{
font-size:1.05rem;
font-weight:800;
letter-spacing:.2em;
text-transform:uppercase;
}

.logo-sub{
display:flex;
flex-direction:column;
gap:.08rem;
margin-top:.1rem;
}

.logo-sub-top{
font-size:.7rem;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--accent);
font-weight:700;
}

.logo-sub-bottom{
font-size:.62rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--muted);
}

.nav-links{
display:flex;
gap:.6rem;
flex-wrap:nowrap;
justify-content:flex-end;
}

.nav-pill{
display:flex;
align-items:center;
justify-content:center;

padding:0.45rem 1rem;
min-height:36px;

border-radius:var(--radius-pill);
font-size:0.78rem;

text-transform:uppercase;
letter-spacing:0.16em;

color:var(--muted);

border:1px solid transparent;

transition:0.2s ease-out;
background:transparent;

white-space:nowrap;
}

.nav-pill:hover{
background:#12121a;
border-color:#2d2d35;
color:#fff;
}

.nav-pill.active{
background:rgba(255,36,56,0.12);
border-color:var(--accent);
color:#fff;
box-shadow:0 10px 28px rgba(255,36,56,0.4);
}

.faq-btn{
margin-left:12px;
display:flex;
align-items:center;
justify-content:center;
}

/* BOUTONS */

.btn-main,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--radius-pill);
padding:.8rem 1.4rem;
font-size:.82rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.14em;
transition:var(--transition);
}

.btn-main{
background:var(--accent);
color:#fff;
box-shadow:0 16px 40px rgba(255,36,56,.4);
}

.btn-main:hover{
transform:translateY(-2px);
filter:brightness(1.05);
}

.btn-secondary{
border:1px solid #2d2d35;
background:rgba(10,10,16,.96);
color:#fff;
}

.btn-secondary:hover{
transform:translateY(-2px);
border-color:var(--accent);
}






/* CARTES */

.card{
background:rgba(10,10,16,.96);
border-radius:20px;
border:1px solid var(--border);
padding:1.6rem 1.5rem;
box-shadow:var(--shadow-main);
}






/* FOOTER */

.site-footer{
border-top:1px solid #111118;
padding:1.1rem 0;
margin-top:1rem;
position:relative;
z-index:1;
}

.footer-inner{
max-width:1100px;
margin:auto;
padding:0 1.5rem;
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
flex-wrap:wrap;
}

.footer-left{
color:var(--muted);
font-size:.78rem;
}

.footer-links{
display:flex;
gap:1.2rem;
flex-wrap:wrap;
}

.footer-links a{
color:var(--muted);
font-size:.78rem;
transition:.2s;
white-space:nowrap;
}

.footer-links a:hover{
color:#fff;
}






/* TABLETTE */

@media(max-width:900px){

.container{
padding:0 1.1rem;
}

.nav{
padding:0 1.1rem;
gap:.8rem;
}

.nav-links{
gap:.45rem;
}

.nav-pill{
padding:.42rem .8rem;
font-size:.72rem;
letter-spacing:.12em;
}

.logo-main{
font-size:.95rem;
letter-spacing:.16em;
}

.logo-sub-top{
font-size:.62rem;
}

.logo-sub-bottom{
font-size:.56rem;
}

}






/* MOBILE */

@media(max-width:780px){

.site-header{
padding:.9rem 0;
}

.nav{
flex-direction:column;
align-items:flex-start;
}

.nav-links{
width:100%;
justify-content:flex-start;
flex-wrap:wrap;
}

.btn-main,
.btn-secondary{
width:100%;
min-height:48px;
padding:.85rem 1rem;
font-size:.76rem;
letter-spacing:.12em;
}

.card{
padding:1.25rem 1rem;
border-radius:16px;
}

.footer-inner{
flex-direction:column;
align-items:center;
text-align:center;
}

.footer-links{
justify-content:center;
}

}






/* PETIT MOBILE */

@media(max-width:520px){

.container{
padding:0 .9rem;
}

.nav{
padding:0 .9rem;
}

.site-header{
padding:.8rem 0;
}

.logo-main{
font-size:.88rem;
letter-spacing:.12em;
}

.logo-sub-top{
font-size:.56rem;
letter-spacing:.12em;
}

.logo-sub-bottom{
font-size:.52rem;
letter-spacing:.1em;
}

.nav-links{
gap:.35rem;
}

.nav-pill{
font-size:.68rem;
padding:.4rem .68rem;
letter-spacing:.08em;
}

.orb{
width:180px;
height:180px;
filter:blur(30px);
}

}