.article {
    display: grid;

    /* Colonnes automatiques responsives */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 15px;
    padding: 15px;
    min-height: 85%;
    max-height: 85%;
    overflow: auto;
}

.onearticle {
    border: 1px solid black;
    border-radius: 8px;
    background: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s ease;
}

.onearticle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.onearticle img {
    max-height: 300px;
    border-radius: 6px;
    margin-bottom: 8px;
}


#notify-container{
position:fixed;
top:20px;
right:20px;
z-index:9999;
display:flex;
flex-direction:column;
gap:10px;
}

.notify{
min-width:260px;
max-width:320px;
padding:14px 16px;
border-radius:6px;
color:white;
font-family:Arial;
display:flex;
align-items:center;
gap:10px;
position:relative;
opacity:0;
transform:translateX(50px);
transition:all .3s ease;
overflow:hidden;
}

.notify.show{
opacity:1;
transform:translateX(0);
}

.notify-icon{
font-size:16px;
}

.notify-text{
flex:1;
}

.notify-close{
cursor:pointer;
font-size:18px;
opacity:.7;
}

.notify-close:hover{
opacity:1;
}

.notify-progress{
position:absolute;
bottom:0;
left:0;
height:3px;
width:100%;
background:rgba(255,255,255,.4);
animation:progress linear forwards;
}

.notify.success{background:#2ecc71;}
.notify.error{background:#e74c3c;}
.notify.info{background:#3498db;}

@keyframes progress{
from{width:100%;}
to{width:0%;}
}


.dlg-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
font-family:Arial;
}

.dlg-box{
background:#fff;
padding:22px;
border-radius:8px;
width:340px;
max-width:90%;
box-shadow:0 10px 25px rgba(0,0,0,.25);
animation:dlgShow .25s ease;
}

.dlg-title{
font-size:18px;
font-weight:bold;
margin-bottom:10px;
}

.dlg-message{
margin-bottom:15px;
color:#444;
}

.dlg-input{
width:100%;
padding:8px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:4px;
}

.dlg-actions{
display:flex;
justify-content:flex-end;
gap:10px;
}

.dlg-actions button{
padding:8px 16px;
border:none;
border-radius:5px;
cursor:pointer;
}

.dlg-ok{
background:#2ecc71;
color:white;
}

.dlg-cancel{
background:#e0e0e0;
}

@keyframes dlgShow{
from{transform:scale(.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}

.alert-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.alert-box{
background:white;
padding:20px;
border-radius:8px;
width:320px;
max-width:90%;
box-shadow:0 10px 25px rgba(0,0,0,.2);
font-family:Arial;
text-align:center;
animation:alertFade .25s ease;
}

.alert-title{
font-size:18px;
font-weight:bold;
margin-bottom:10px;
}

.alert-message{
margin-bottom:20px;
color:#444;
}

.alert-btn{
background:#3498db;
border:none;
color:white;
padding:10px 18px;
border-radius:5px;
cursor:pointer;
}

.alert-btn:hover{
background:#2980b9;
}

@keyframes alertFade{
from{transform:scale(.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}

/*
.notify {
  position: fixed;
  top: 50px;
  right: 20px;
  min-width: 260px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  font-family: system-ui, sans-serif;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  display: none;
  z-index: 9999999;
  text-align: center;
}

.notify.success { background:#e6f9f0; color:#1e7f55; border-left:4px solid #1e7f55; }
.notify.error   { background:#fdecea; color:#b42318; border-left:4px solid #b42318; }
.notify.info    { background:#eef4ff; color:#1d4ed8; border-left:4px solid #1d4ed8; }

.notify {
  animation: zoomIn .65s ease;
}

@keyframes zoomIn {
  from { transform: translate(-10%, -10%) scale(.9); opacity: 0; }
  to   { transform: translate(-10%, -10%) scale(1); opacity: 1; }
}
*/

    .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
}

.modal-content {
    background: #fff;
    max-width: 90%;
    margin: 8% auto;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.close {
    float: right;
    font-size: 24px;
    cursor: pointer;
}