.stars {
     display: inline-block;
     user-select: none;
 }

 .stars span {
     font-size: 2rem;
     cursor: pointer;
     color: #ccc;
     padding: 0 2px;
     transition: color .15s;
     outline: none;
 }

 .stars span.selected {
     color: gold;
 }

 .stars span.hover {
     color: #ffdc73;
 }

 h2 {
     font-family: 'Comfortaa', sans-serif;
     text-align: center;
 }

 .laisse_avis {
     display: flex;
     align-items: center;
     flex-direction: column;
 }

 #formAvis {
     display: flex;
     flex-direction: column;
 }


 #nom {
     border: 2px dashed #12086F;
     ;
     margin-top: 10px;
     padding: 5px;
     font-family: 'Comfortaa', sans-serif;
 }

 #nom:focus {
     background-color: #ccc;
     border: 2px solid #12086F;

 }

 #message {
     border: 2px dashed #12086F;
     ;
     margin-top: 10px;
     padding: 5px;
     font-family: 'Comfortaa', sans-serif;
 }

 #message:focus {
     background-color: #ccc;
     border: 2px solid #12086F;
 }

 .button_avis {
     margin-top: 10px;
     padding: 5px;
     font-family: 'Comfortaa', sans-serif;
     background-color: #12086F;
     color: white;
     border: none;
     border-radius: 50px;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .button_avis:hover {
     cursor: pointer;
     transform: translateY(-3px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }

 .button_avis:active {
     transform: translateY(0px);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

.avis{
    text-align: center;
}