/* =====================================================
   annonces style  – TOUTES LES PAGES
   ===================================================== */

.hero-annonces{
  position: relative;
  min-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  background-image: url("/IMG/hero-annonces.jpg");
  background-size: cover;
  background-position: center;
}

/* Dégradé */
.hero-annonces::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  pointer-events:none;
}

/* Le bloc texte */
.hero-annonces .hero-overlay{
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 70px;   /* <<< règle ici (remonte/descend) */
  z-index: 2;
  padding: 0;     /* on peut laisser à 0 ici */
  background: none;
  pointer-events:none;
}

.hero-annonces .hero-seo{
  margin:0;
  color:#fff;
  font-size: 1rem;
  line-height: 1.4;
}


/* Un peu plus haut sur desktop */
@media (min-width: 900px){
  .hero-annonces{
    min-height: 380px;
  }
}
.hero-annonces {
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,.18);
  overflow: hidden;
}

/* .hero-overlay.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
} */

.hero-annonces .hero-overlay{
  padding: 8px 22px 28px; /* +10px en bas */
}


.wrap { 
    max-width: 1100px;
    margin: 0 auto;  
    padding: 20px; 
}

.wrap-gere { 
    max-width: 950px; 
    margin: 0 auto; 
    padding: 20px; 
}
.grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 14px; 
}

.grid1 { 
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap:12px; 
}
.grid2 { 
    display:grid; 
    grid-template-columns: 1fr; 
    gap:12px; 
}
.grid3 { 
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap:12px; 
}
.grid4 { 
    display:grid; 
    grid-template-columns: 1fr; 
    gap:12px; } 

.card { 
    background:#fff; 
    border-radius:14px; 
    box-shadow: 0 6px 18px rgba(0,0,0,.06); 
    padding:16px; 
}

.topbar { 
    display:flex; 
    flex-wrap:wrap; 
    gap:10px; 
    align-items:flex-end; 
    justify-content:space-between; 
}

.filters { 
    display:flex; 
    flex-wrap:wrap; 
    gap:10px; 
    align-items:flex-end; 
}

.filters label { 
    font-size: 13px; 
    opacity:.85; 
    display:block; 
    margin-bottom:4px; 
}

select, input { 
    padding:10px 12px; 
    border-radius:10px; 
    border:1px solid #ddd; 
    background:#fff; 
}

.btn { 
    display:inline-block; 
    padding:10px 14px; 
    border-radius:10px; 
    text-decoration:none; 
    border:1px solid #000000; 
    background:#e67070; 
    cursor:pointer;
}

.btn.danger { 
    border-color:#fa0303; 
}

.btn.primary { 
    border-color:#000000; 
    background:#03fa2c; 
}
  
.meta { 
    font-size: 13px; 
    opacity:.85; 
    margin-top:6px; 
}

.badge { 
    display:inline-block; 
    font-size:12px; 
    padding:4px 10px; 
    border-radius:999px; 
    background:#f2f2f2; 
}
.pagination { 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap; 
    margin-top:16px; 
}

.meta { 
    font-size: 13px; 
    opacity:.85; 
    margin-top:6px; 
}

  /* modal */
.modal { 
    display:none; 
    position:fixed; 
    inset:0; 
    background: rgba(0,0,0,.55); 
    padding: 20px; 
    z-index: 9999; 
}
.modal .box { 
    max-width: 560px; 
    margin: 60px auto; 
    background:#fff; 
    border-radius:14px; 
    padding:16px; 
    box-shadow: 0 20px 60px rgba(0,0,0,.25); 
}
.row { 
    display:grid; 
    gap:10px; 
}

input, textarea { 
    width:100%; 
    padding:10px 12px; 
    border-radius:10px; 
    border:1px solid #ddd; 
    background:#fff;
}

textarea { 
    min-height: 140px; 
    resize: vertical; 
}
.error { 
    color:#b00020; 
    font-size:13px; 
}

.err { 
    background:#fff2f2; 
    border:1px solid #ffd2d2; 
    padding:10px; 
    border-radius:10px; 
}


.ok { 
    color:#0a7a2f; 
    font-size:13px; 
}

.ok1 { 
    background:#f1fff4; 
    border:1px solid #c9f3d1; 
    padding:10px; 
    border-radius:10px; 
}
label { 
    font-size:13px; 
    opacity:.85; 
    display:block; 
    margin-bottom:6px; 
}


  @media(max-width:760px){ .grid{grid-template-columns:1fr;} }