@font-face {
    font-family: "Scolar";
    src: url("../fonts/Scolar.otf");
  }
.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pour centrer les éléments */
    margin-bottom: 10px;
    /* Ajustez selon l'espacement souhaité */
}

.cadre-icon {
    display: flex;
    flex-direction: row;
    /* Alignement horizontal par défaut */
    place-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne suivante si nécessaire */
}

/* Media Query pour les écrans plus petits */
@media screen and (max-width: 600px) {
    .cadre-icon {
        flex-direction: column;
        /* Change en disposition verticale sur les petits écrans */
    }

}


.gravityButton {

    display: grid;
    place-items: center;
    width: 252px;
    aspect-ratio: 1;
    border-radius: 50%;

    &>button {
        font: inherit;
        width: 94px;
        aspect-ratio: 1;
        background: none;
        border-radius: 50%;
        border: 2px solid #0065a3;
        /* Couleur cercle icon */
        transform: translate(var(--tx, 0), var(--ty, 0));
        opacity: var(--opacity, 0.25);
        cursor: pointer;
        transition: all 0.2s ease-out;

        &:hover,
        &:focus-visible {
            --_fill: var(--color, #ffffff);
            border: 2px solid var(--color, #ffffff);
            /* Couleur cercle icon */

        }

        &:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
            opacity: 1;

        }
    }
}

.buttonIcon {
    width: 50%;
    fill: var(--_fill, #0fa3ff);
    /* Couleur icon */
    transition: all 0.2s ease-out;


}


.titres {
    color: #0065a3;
    font-size: 20px;
    font-family: 'Scolar', "Catamaran"; 

    transition: all 0.2s ease-out;
}