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

body{
background:#f3f6fb;
padding:25px;
}

.lynx-conteneur{
width:100%;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:25px;
}

.lynx-carte{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.3s;
}

.lynx-carte:hover{
transform:translateY(-6px);
}

.lynx-image{
width:100%;
height:240px;
overflow:hidden;
}

.lynx-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.4s;
}

.lynx-carte:hover img{
transform:scale(1.05);
}

.lynx-contenu{
padding:20px;
}

.lynx-date{
color:#777;
font-size:14px;
margin-bottom:12px;
}

.lynx-contenu h2{
font-size:22px;
margin-bottom:15px;
color:#222;
}

.lynx-contenu p{
line-height:28px;
color:#555;
}

.lynx-actions{
display:flex;
gap:10px;
margin-top:25px;
flex-wrap:wrap;
}

.lynx-lire,
.lynx-copier{

padding:12px 18px;
border:none;
border-radius:10px;
cursor:pointer;
font-size:15px;
transition:.3s;

}

.lynx-lire{
background:#0b57d0;
color:white;
}

.lynx-lire:hover{
background:#0949ae;
}

.lynx-copier{
background:#ececec;
}

.lynx-copier:hover{
background:#d9d9d9;
}

#hibou-popup{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);

display:none;

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

padding:20px;

z-index:99999;

}

#hibou-contenu{

background:white;

width:100%;
max-width:950px;

max-height:90vh;

overflow:auto;

border-radius:18px;

padding:25px;

position:relative;

animation:ouvrir .35s;

}

@keyframes ouvrir{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

#hibou-fermer{

position:absolute;

right:20px;

top:15px;

font-size:35px;

cursor:pointer;

font-weight:bold;

}

#hibou-resultat img{

width:100%;

border-radius:15px;

margin:15px 0;

}

#hibou-resultat video{

width:100%;

border-radius:15px;

margin:15px 0;

}

@media(max-width:768px){

body{

padding:12px;

}

.lynx-conteneur{

grid-template-columns:1fr;

}

.lynx-image{

height:220px;

}

.lynx-contenu{

padding:15px;

}

.lynx-contenu h2{

font-size:20px;

}

.lynx-actions{

flex-direction:column;

}

.lynx-lire,
.lynx-copier{

width:100%;

}

#hibou-contenu{

padding:18px;

}

}






.lynx-galerie{

display:grid;

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

gap:15px;

margin-top:20px;

}

.lynx-photo{

width:100%;

height:220px;

object-fit:cover;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.lynx-photo:hover{

transform:scale(1.04);

}





#lynx-lightbox{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.95);

display:none;

justify-content:center;

align-items:center;

z-index:999999;

padding:25px;

}

#lynx-image-grande{

max-width:95%;

max-height:95%;

border-radius:15px;

}

#lynx-fermer-image{

position:absolute;

top:20px;

right:30px;

font-size:45px;

color:white;

cursor:pointer;

font-weight:bold;

}








.lynx-videos{

display:grid;

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

gap:20px;

margin-top:20px;

}

.lynx-video{

overflow:hidden;

border-radius:15px;

background:#000;

box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.lynx-video video{

width:100%;

display:block;

border-radius:15px;

}









#lynx-toast{

position:fixed;

top:20px;

right:20px;

background:#1f2937;

color:#fff;

padding:16px 22px;

border-radius:14px;

display:flex;

align-items:center;

gap:12px;

font-size:15px;

font-weight:600;

box-shadow:0 15px 40px rgba(0,0,0,.25);

opacity:0;

visibility:hidden;

transform:translateY(-30px);

transition:.35s;

z-index:999999;

}

#lynx-toast.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#lynx-toast i{

color:#22c55e;

font-size:22px;

}

@media(max-width:768px){

#lynx-toast{

left:15px;

right:15px;

top:15px;

font-size:14px;

}

}