/* General */

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-underline-offset: 0.4rem;
}

h1,
h2,
h3,
h4,
a,
button,
input {
    font-size: unset;
    font-weight: unset;
    font-family: "Gabarito";
}

body {
    font-size: 100%;
    background-color: #efefef;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chart_container {
    background-color: white;
    border-radius: 20px;
    padding: 10px;
}


.row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* ====== FONT ======*/
.gabarito_title {
    font-size: 1.9rem
}

/* ====== BORDERS ======*/
.cmj_border {
    padding-bottom: 10px;
    border-bottom: 5px solid;
    border-image: linear-gradient(to right, yellow 33%, cyan 33%, cyan 66%, magenta 66%, magenta 100%) 1;
    font-size: 2.2rem;
}

/* ====== BUTTONS ======*/
.black_btn input:checked+.black_btn {
    background-color: white;
    color: black;
    border: 1px solid black;
}

.black_btn input {
    display: none;
    /* Masque le bouton radio */
}

.black_btn {
    margin: 11px 0px;
}

/* État non sélectionné */
.black_btn span {
    background-color: black;
    color: white;
    border: 1px solid black;
    padding: 11px 0px;
    width: 16rem;
    border-radius: 11px;
    cursor: pointer;
    text-align: center;
    display: block;
}

/* État sélectionné */
.black_btn input:checked+span {
    background-color: white;
    padding: 9px 0px;
    width: 15rem;
    color: black;
    font-weight: bold;
}

/* État au survol */
.black_btn:hover span {
    background-color: #333;
}

.chart_section {
    display: flex;
    flex-direction: column;
}

.chart_section title {
    width: 100%;
}

.chart_section .content {
    display: flex;
    flex-direction: row;
}

.chart_section .info {
    flex: 1;
}

.title_logo {
    margin: 0px 0rem;
    border-radius: 11px;
}

/* Animation de haut en bas */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
        /* Position initiale */
    }

    50% {
        transform: translateY(15px);
        /* Déplacement vers le bas */
    }
}

/* Appliquer l'animation à l'élément */
.bounce_animation {
    animation: bounce 2s infinite ease-in-out;
    /* Durée 1s, boucle infinie */
    font-size: 2rem;
}