:root {
    --navy: #06245c;
    --yellow: #ffe000;
    --yellow-deep: #ffd900;
    --green-soft: #dbffe7;
    --green-halo: #66f2a0;
    --line: #e5e5e5;
    --text-soft: #58709a;
    --bg: #f7f6ef;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Quicksand", sans-serif;
}
.font16{
    font-size: 16px !important;
}
.font17{
    font-size: 17px;
}
.font14{
    font-size: 14px;
}

p{
    color: #001F55;
}

a, a:hover, a:focus {
    text-decoration: none;
}

.couleurBleu{
    color:#001F55;
}

.couleurBleuClair{
    color:#86A9F7;
}
.couleurBlanc{
    color:white;
}
.couleurJaune{
    color:#FEEA02;
}

.backgroundVert{
    background-color: #6EF8AC;
}
.backgroundJaune{
    background-color: #FEEA02;
}
.backgroundBleu{
    background-color: #001F55;
}
.backgroundBleuClair{
    background-color: rgba(134, 169, 247, 0.1);
}

.bouton{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    height: 57px;
    padding: 0 20px;

    background: #ffffff;
    border-radius: 999px;
}

.boutonVert{
    border: 1px solid #5ef0ac;
    box-shadow: 0 4px 0 #5ef0ac;
}

.boutonBleu{
    border: 1px solid #86A9F7;
    box-shadow: 0 4px 0 #86A9F7;
}

.boutonJaune{
    border: 1px solid #FEEA02;
    box-shadow: 0 4px 0 #FEEA02;
}

.shadowVert{
    box-shadow: 6px 7px 0 #6EF8AC;
    border: solid #6EF8AC;
}
.shadowBleu{
    box-shadow: 6px 7px 0 #86A9F7;
    border: solid #86A9F7;
}
.shadowJaune{
    box-shadow: 6px 7px 0 #FFEB00;
    border: solid #FFEB00;
}

.souligner {
    position: relative;
    display: inline-block;

    color: #002b66;
    font-weight: 700;
    line-height: 1;

    z-index: 0;
    isolation: isolate;
}

.souligner::after {
    content: "";
    position: absolute;

    left: -3px;
    right: -5px;
    bottom: 5px;

    height: 8px;

    background: #48e6a0;
    border-radius: 999px;

    z-index: -1;

    transform: scaleX(0);
    transform-origin: left center;

    animation: souligner-animation 0.7s ease-out forwards;
}

@keyframes souligner-animation {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}