* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;

}

body{
    display: flex;
    justify-content: center;
    align-items: center;
  min-height: 100vh;
background: url('objet/moi.jpg') no-repeat ;
background-size: cover;
background-position: center;

}


header {
position: fixed;
top:0;
left:0;
width:100%;
padding:20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
background: rgba(255,255,255,.1);
backdrop-filter: blur(20px);
border-bottom: 2px solid skyblue;

}

.logo {
font-size: 2em;
color: white;
user-select: none;
}

.drawer-logo{
font-size: 2em;
color: white;
display: none;
}

/* Hamburger button (hidden on large screens) */
.menu-toggle{
background: transparent;
border: 2px solid skyblue;
color: white;
font-size: 2rem;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
padding: 6px 10px;
}

.menu-close{
background: transparent;
border: 1px solid rgba(255,255,255,.25);
color: white;
font-size: 1.25rem;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
padding: 6px 10px;
}


.navigation a {
position: relative;
font-size: 1.1em;
color: white;
text-decoration: none;
font-weight: 500;
margin-left: 40px;
}

/* Keep nav items inline but allow graceful wrapping on small screens */
.navigation {
display: flex;
align-items: center;
flex-wrap: wrap;
}

/* Mobile nav hidden by default; shown when active */
.navigation.is-collapsed{
display: none;
}
.navigation.is-open{
display: flex;
}

.navigation a::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 55px;
height: 3px;
background: white;
border-radius: 3px;
transform-origin: right;
transform: scaleX(0);
transition: transform .5s;
}

.navigation a:hover::after {
transform:  scaleX(1);
transform-origin: left;
}


.navigation  .btnlongin-popup {
    width: 90px;
    height: 40px;
    background: transparent;
    border: 2px solid white;
    outline:none;
    border-radius:6px;
    cursor:pointer;
    font-size:1.1em;
    color: white ;
    font-weight:500;
    margin-left:40px;
    transition:.5s;
}


.navigation .btnlongin-popup:hover{
background: white;
color: black;

}

.wrapper{

position: relative;
width: 400px;
height: 440px;
background: transparent;
border: 2px solid skyblue;
border-radius: 20px;
backdrop-filter: blur(20px);
box-shadow: 0 0 30px rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items:center;
overflow: hidden;
transform: scale(0);
transition: height .2s ease;
transform: translateX(0);
}


.wrapper.active-popup {
    transform: scale(1);
}



.wrapper.active {
    height: 520px;
}

.wrapper .form-box{
    width:350px;
    padding: 40px;

}

.wrapper .form-box.longin {

transition: transform .18s ease;
transform: translateX(0);
}

.wrapper.active .form-box.longin {
transition: none;
transform: translateX(-400px);
}




.wrapper .form-box.register {
    position: absolute;
    transition: none;
    transform: translateX(400px);

}

.wrapper.active .form-box.register {
    transition: transform .10s ease;

    transform: translateX(0);
}




.wrapper .icon-close {
    position: absolute;
    top:0;
    right: 0;
    width: 40px;
    height: 40px;
    background: black;
    font-size: 1em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius:20px;
    cursor: pointer;
    z-index: 1;

}

.form-box h2 {
    font-size: 2em;
    color: black;
    text-align: center;

}

.input-box{
    position:relative;
    width:300px;
    height:45px;
    border-bottom: 2px solid  black ;
    margin:30px 0;
}


.input-box label {
    position:absolute;
    top: 22px;
    left:5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: black;
    font-weight: 500;
    pointer-events: none;
    transition: .3s ease;
}

.input-box input:focus~label,
.input-box input:valid~label {
    top: 6px;
}

.input-box input{
    width: 250px;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: black;
    font-weight: 600;
    padding: 0 35px 5px;
}

.input-box .icon {
    position:absolute;
    right: 2px;
    font-size: 1em;
    color: black;
    line-height: 40px;
    
}

.remember-forgot {
    font-size: .9em;
    color: black;
    font-weight: 500;
    margin: -15px 0 15px;
    display: flex;
    justify-content: space-between;

}

.remember-forgot label input {
    accent-color: black;
    margin-right: 3px;
}

.remember-forgot a {
    color: black ;
    text-decoration: none;
}

.remember-forgota:hover {
    text-decoration: underline;

}

.btn{
    width: 300px;
    height: 30px;
    background:black;
border: none;
outline: none;
border-radius: 6px;
cursor:pointer;
font-size: 1em;
color: white;
font-weight: 500;
 }


 .longin-register {
    font-size: .9em;
    color: black;
    text-align: center;
    font-weight: 500;
    margin: 25px 0 10px;
 }

 .longin-register p a {
    color: black;
    text-decoration: none;
    font-weight: 400;
 }


 .longin-register p a:hover{
    text-decoration: underline;
 }

/* Responsive navbar adjustments: preserve look, just adapt spacing/wrapping */
@media (max-width: 992px) {
header {
padding: 16px 24px;
}
.logo { font-size: 1.8em; }
/* hide top logo so logo appears inside drawer on mobile */
.logo { display: none; }
.navigation a { margin-left: 24px; }
.navigation .btnlongin-popup { margin-left: 24px; }
.menu-toggle{ display: inline-flex; }
/* convert nav to left slide-out drawer on tablet and below */
.navigation {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 260px;
background: #0d0d0d;
box-shadow: 2px 0 12px rgba(0,0,0,.4);
padding: 80px 24px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 16px;
z-index: 100;
transform: translateX(-100%);
transition: transform .3s ease;
}
.drawer-logo{ display: block; }
.menu-close{ display: inline-flex; position: absolute; top: 20px; right: 20px; }
.navigation.is-open{ transform: translateX(0); }
.navigation a, .navigation .btnlongin-popup { margin-left: 0; margin-right: 0; }
}

@media (max-width: 600px) {
.navigation { row-gap: 10px; width: 240px; }
.navigation a { margin-left: 16px; font-size: 1em; }
.navigation .btnlongin-popup {
width: 84px;
height: 36px;
font-size: 1em;
margin-left: 16px;
}
}

 .recherche{
    width: 1500px;
    height: 150px;
 }


 #texte
{
    width:695px;
    height: 615px;
margin: 0 auto;
background: aliceblue;
border: 1px solid grey;
box-shadow: 0px 0px 10px  white;
float:left;
overflow: scroll;
}

h1 {
    float:right;
    text-align:center ;
    text-transform: capitalize;
    }
    .add{
        width: 490px;
        height:250px;
        border: 1px outset #dddd ;
        border-radius: 7px outset;
    margin-right: 10px;
    }
.image{
    width: 490px;
    height: 250px;
    background-size: cover;
    
}


.partage{
    height: 97px;
    width: 693px;
    background-color: rgb(12, 197, 12);
    color: white;
 
}

.sous{
    color: rgb(224, 60, 60);
    margin-left: 12px;
}


.para{
color: black;
margin-left: 10px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}


p{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.br{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}



h2 {
    
    color: rgb(0, 14, 207);
    }

    h3{
        margin-top: -560px;
        
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        color: #ffff;
        
    }




    .p1{
        background-color:#ffff;
        width:305px;
        height: 39px;
        color: black;
        position: absolute;
        margin-top: 210px;
    }

    .h{
        position: absolute;
      
        margin-right: 900px;
        align-items: center;
    }
 .p{
    position: absolute;
    margin-top: -19px;
    margin-left: 75px;
 }



 .sidebar{
    background-color: black;
    height: 641px;
    width:250px;
    position: fixed;
    top: 0;
    z-index: 1000;
    overflow-x: hidden;
    margin-top:- 50px;
    transition: 0.5s;
    margin-left:- 70px;
    flex-direction: column;

 }
 .sidebar img{
    width: 30px;
 }
 .sidebar a{
    padding: 05px;
    font-size:10px;
    color: #ffff;


 }