.directions{
	display:flex;
	gap:5px;
	
} 
.container2 {
    display: flex;
    flex-direction: column;
    align-items: center;
	gap:5px;
	flex-wrap:wrap;
}

.viewport {
    max-width: clamp(200px,100%,820px); /* Ajustez la largeur selon vos besoins */
    overflow: hidden;
    margin: 0 10px;	
	align-items:center;
}
@media (max-width: 599px) {
    .viewport {
        max-width: 200px; /* permet 1 box seulement */
    }
}

.inner {
    display: flex;
    transition: transform 0.3s ease;
}

.box {
    width: 190px; /* Ajustez la largeur des divs */
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid #000;	
    margin: 5px;	
	border-radius: 6px;
	box-shadow: 0px 3px 5px 0px #888888;
}
.box a{
    text-decoration:none;
	color:black;
}
.insideBox{
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	gap:7px;
}
.insideBox > div{
	padding: 5px;
	
}
.titleBox{
	background-color:#01D0FB;
	color:white;
	text-align:center;		
	border-radius: 5px 5px 0 0;
}
.titleBox:hover{
    background-color:#FED402;
}
.description{
	
	min-height:75px;
	
}
.cus-button {
	
	width:30px;
	height:30px;
	border: none;
	
}

.cus-button:hover {
    background-color: #6B5E62; /* Couleur de fond plus foncée au survol */
	color:white;
    transform: scale(1.05); /* Légère augmentation de la taille au survol */
}

.cus-button:active {
    background-color: #4caf50; /* Couleur encore plus foncée lors du clic */
    transform: scale(0.95); /* Réduction de la taille lors du clic */
}
.cus-button {
	
	border: none;
	
}

.cus-button:hover {
    background-color: #6B5E62; /* Couleur de fond plus foncée au survol */
	color:white;
    transform: scale(1.05); /* Légère augmentation de la taille au survol */
}

.cus-button:active {
    background-color: #4caf50; /* Couleur encore plus foncée lors du clic */
    transform: scale(0.95); /* Réduction de la taille lors du clic */
}