/* Wrapper des colonnes */
.colonne {
    display: flex;
    max-width: 75rem;
    gap: 4.3rem;
    justify-content: center;
    align-items: start;
    margin: auto;
    flex-flow: row wrap;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 1000;
}

.colonne-row {
    text-align: center;
    padding: 1rem;
    width: 60px;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:.5em;
	text-align: center;
    transition: .3s all;
    font-size: .9em;
    line-height: 1.2em;
    color: var(--white);
}

.colonne-row::before {
    transform: translateY(0);
	text-align: center;
	content:'';
	width: 60px;
	height: 60px;
	display: block;
    background-image: var(--image-url);
	background-color: var(--secondary-500);
	background-repeat: no-repeat;
	background-position: center;
    background-size: 50%;
	border-radius: 50%;	
}

.colonne-row:hover::before {
    transition: .3s all;
	transform: translateY(3px);
}

.colonne-row.image-s {
    flex:0 0 6.875rem;
}

.colonne-row.image-m {
    flex:0 0  11.5rem;
    padding: 0;
 
}

.colonne-row.image-l {
    flex:0 0 15rem;

}


.colonne-row .col-image {
      aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1.5rem;
}

.col-image img,
.col-image svg {
    width: 100%;
    height: 100%;
       object-fit: contain;
}



.col-link {text-decoration: none;}
.home .colonne a  {color: var(--white);}
.home .colonne a:visited, .home .colonne a:focus  {color: var(--white);} 


.mon-svg {
    padding: 4px;
    transition: all 0.5s ease;
}

.col-row.image-s .mon-svg {
    max-width: 5.61063rem;
    
}

.col-row.image-m .mon-svg {
    max-width: 8.61063rem;
  
}

.col-row.image-l .mon-svg {
    max-width: 12rem;
   
}

a .mon-svg path,
a .mon-svg circle,
a .mon-svg rect,
a .mon-svg polygon  {
   transition: all .5s;
}




@media (max-width:768px) {

.colonne {
    display: flex;
    max-width: 75rem;
    gap: 1rem;
    justify-content: center;
    align-items: start;
    margin: auto;
    flex-flow: row wrap;
    position: relative;
    top:-50px;
    width: 100%;
    z-index: 1000;
}
.col-wrapper {
    flex-wrap: wrap;
    gap: 0;
    padding: 0.5rem;

}
.col-row {flex: 0 1 40%;}
.col-row.image-s {
    flex:40%;
}

.col-row.image-m {
    flex:40%;
   
 
}

.col-row.image-l {
    flex:40%;

}
}