.acp-avis-liste {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.acp-cols-1 {
  grid-template-columns: 1fr;
}
.acp-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.acp-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.acp-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.acp-avis {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.acp-note {
  font-size: 1.2em;
  color: #f5b301;
}

.acp-btn-load {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.acp-btn-load:hover {
  background: #005c8c;
}


.acp-avis-item { border-bottom: 1px solid #ddd; padding: 10px 0; 
}
.acp-success {
    background: #dbffdc;
    padding: 30px;
    margin: 20px 0;
    color: #4CAF50;
    font-weight: 700;
}
#acp-form label {
    font-weight: 700;
    color: #333;
}

h5.bottom-right{
  text-align: right;
    font-style: italic;
}

p.acp-error {
    padding: 30px;
    background: #ffe7e7;
    color: #ff0000;
    margin: 20px 0;
    font-weight: 500;
}


input[type=text], input[type=url], select, textarea {
    width: 100%;
    border: 1px solid #dfdfdf !important;
}



p.aime {
    color: #2a6f77;
    font-style: italic;
}
p.attente {
    color: #BB9016;
    font-style: italic;
}



/* Par défaut, utilise les colonnes spécifiées dans la classe acp-cols-* */
.acp-avis-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* Sur mobile (par exemple, pour les écrans de 768px ou moins), forcer une seule colonne */
@media (max-width: 768px) {
    .acp-avis-liste {
        grid-template-columns: 1fr !important;  /* Forcer 1 colonne */
    }
}


.acp-avis p.avis {
    font-size: 14px;
    font-style: italic;
}



.acp-avis i.icon.icon-quote {
    font-size: 30px;
    float: right;
    color: #bb9016;
}