<style>

*, *::before, *::after{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Inter',sans-serif;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:white;

background:
radial-gradient(circle at 20% 20%,#1e1b4b,transparent 40%),
radial-gradient(circle at 80% 70%,#312e81,transparent 40%),
linear-gradient(135deg,#020617,#020617);
}

.wrapper{
display:flex;
gap:40px;
align-items:stretch;
justify-content:center;
}

/* ===== STYLE COMMUN ===== */

.card, .rules{
padding:45px;
border-radius:26px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 40px 120px rgba(0,0,0,.9);
display:flex;
flex-direction:column;
justify-content:center;
}

/* tailles */

.rules{
width:92%;
max-width:900px;
}

.card{
width:420px;
}


.card{
flex:1;
}


/* ===== RULES ===== */

.rules h2{
margin-top:0;
font-size:26px;
}

.rules ul{
padding-left:22px;
line-height:1.8;
opacity:.9;
}

.rules li{
margin-bottom:8px;
}

/* ===== LOGIN ===== */

.logo{
text-align:center;
}

.logo img{
width:260px;
margin-bottom:10px;
}

.subtitle{
opacity:.8;
margin-bottom:25px;
text-align:center;
}

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

input, button{
width:100%;
padding:16px;
border-radius:14px;
border:none;
font-size:15px;
}

input{
background:rgba(255,255,255,0.05);
color:white;
border:1px solid rgba(255,255,255,.1);
}

button{
font-weight:700;
cursor:pointer;
background:linear-gradient(135deg,#7c3aed,#49256D);
color:white;
transition:.2s;
}

button:hover{
transform:translateY(-2px);
}

.error{
background:#ef4444;
padding:12px;
border-radius:10px;
margin-bottom:15px;
text-align:center;
}

.help{
font-size:13px;
opacity:.75;
text-align:center;
}

/* ===== MOBILE ===== */

@media(max-width:900px){

.wrapper{
flex-direction:column-reverse;
align-items:stretch;

}

.rules{
width:100%;
}

}

.admin-link{
position:fixed;
bottom:12px;
right:18px;
opacity:.25;
font-size:12px;
}

.admin-link a{
color:white;
text-decoration:none;
transition:.3s;
}

.admin-link a:hover{
opacity:.8;
}

.register-btn{
display:block;
text-align:center;
padding:14px;
border-radius:14px;
font-weight:600;
text-decoration:none;
color:white;
margin-top:6px;

background:transparent;
border:1px solid rgba(255,255,255,.2);
transition:.2s;
}

.register-btn:hover{
background:rgba(255,255,255,.08);
transform:translateY(-2px);
}


/* AJOUT bouton inscription */

.register-btn{
display:block;
text-align:center;
padding:16px;
border-radius:14px;
margin-top:10px;
font-weight:600;
text-decoration:none;
color:white;
border:1px solid rgba(255,255,255,.15);
transition:.25s;
}

.register-btn:hover{
background:rgba(255,255,255,.06);
transform:translateY(-2px);
}


/* TON CSS ORIGINAL CONSERVÃ‰ */

*, *::before, *::after{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Inter',sans-serif;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:white;

background:
radial-gradient(circle at 20% 20%,#1e1b4b,transparent 40%),
radial-gradient(circle at 80% 70%,#312e81,transparent 40%),
linear-gradient(135deg,#020617,#020617);
}

.wrapper{
display:flex;
gap:40px;
align-items:stretch;
flex-wrap:wrap;
justify-content:center;
padding:20px;
max-width:1400px;
width:100%;
}

.card{
width:420px;
max-width:92%;
}


.logo img{
width:260px;
margin-bottom:10px;
}

.subtitle{
opacity:.8;
margin-bottom:25px;
text-align:center;
}

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

input, button{
width:100%;
padding:16px;
border-radius:14px;
border:none;
font-size:15px;
}

input{
background:rgba(255,255,255,0.05);
color:white;
border:1px solid rgba(255,255,255,.1);
}

button{
font-weight:700;
cursor:pointer;
background:linear-gradient(135deg,#7c3aed,#49256D);
color:white;
}

.error{
background:#ef4444;
padding:12px;
border-radius:10px;
margin-bottom:15px;
text-align:center;
}

.hero{
flex:1;
min-width:320px;
max-width:650px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
}

.hero-logo{
width:420px;
max-width:90%;
margin-bottom:30px;

filter:
drop-shadow(0 20px 60px rgba(0,0,0,.8))
drop-shadow(0 0 40px rgba(124,58,237,.35));
}

.hero h1{
font-size:42px;
margin-bottom:10px;
}

.hero p{
opacity:.8;
font-size:18px;
line-height:1.6;
}

@media (max-width:900px){

body{
align-items:flex-start; /* 🔥 IMPORTANT */
}

.wrapper{
flex-direction:column;
gap:18px;
padding:14px;
}

/* règles scrollables */
.rules{
/*max-height:180px;*/
overflow:visible;
padding:22px;
}


.card{
width:100%;
max-width:none; /* 🔥 LA LIGNE MAGIQUE */
}

.rules{
width:100%;
max-width:none;
}

}


}

</style>