/* Conteneur */
.container{ 
  width:100%; 
  max-width:1200px; 
  margin: 30px auto 30px; 
  padding:0 16px; 
}

.layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centre les enfants sur la ligne */
  gap: var(--gap);
}

/* Cartes */
.zone{
  background: color-mix(in srgb, #d1a5ac 42%, var(--surface) 58%);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  height: auto;
}
.zone h1, .zone p{ text-align:center; }
.zone p{ margin:.25rem 0 .5rem; }

/* Les lignes de boutons par zone */
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-top:.5rem;
}

.btn-item{
  display:block;
  font-size: 12px;
  align-items:center;
  text-align: center;
  width: 200px;
  height: 200px;
}

/* Bouton avec libellé visible AU-DESSUS de l'image */
.img-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem;
  border:1px solid #dcdcdc;
  border-radius:10px;
  background:#fff;
  text-decoration:none;
  width:130px;
  height:130px;
  bottom: 0px;
}
.img-btn img{
  display:block;
  width:100%;
  height:100%;
}
.img-btn:hover{ transform: translateY(-2px); filter: brightness(1.02); }
.img-btn:focus{ outline:none; border-color: var(--ring); box-shadow: var(--shadow), 0 0 0 6px var(--ring); }