body {
    background: linear-gradient(
        180deg,
        #020b18 0%,
        #08192d 45%,
        #00050d 100%
    );

    font-family: "Inter", sans-serif;
    color: #F2F6FA;
    font-size: 18px;
    line-height: 1.4;

    max-width:1400px;
    margin:auto;
    padding:20px;
}

.mc-bleu {
    color: #4A98D9;
    text-shadow: 0 0 10px rgba(74,152,217,.35);
}

.glow {
    color: #F2F6FA;

    text-shadow:
        0 0 6px #F2F6FA,
        0 0 12px #F2F6FA;
}

.centre {
    text-align: center;
}

h1 {
    font-size: 4em;
    font-weight: 900;
    margin-bottom: 0;
}

h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 0.2em;
}

.icon {
    width: 100px;
}

.catalog-icon {
    width: 80px;
}

.accent-line {
    width: 100px;
    height: 4px;

    background: #4A98D9;
    border-radius: 2px;

    box-shadow:
        0 0 8px rgba(74, 152, 217, 0.35);

    margin: 2rem 0;
}

section#hero {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    padding: 100px 0;
}

div#hero-content {
    position: absolute;
}

div#animation{
    position: absolute;

    padding: 0;
    inset: 0;
    top: 100px;
    left: 0px;

    width: 100%;
    height: 100%;
    display: block;

    z-index: 0;
}

#generator {
    position: absolute;
    height: 350px;

    top: 0px;
    left: 900px;
    opacity: 0.75;
}

#ondeA, #ondeB, #ondeC {
    position: absolute;
    width: auto;
    height: 350px;
    opacity: 0.25;
    transition: opacity 5s ease;
}

#ondeA{
    right: -473px;
}

#ondeB{
    right: -1406px;
}

#ondeC{
    right: -2340px;
}


section#vision {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 24px;
    align-items:center;
}

section#vision p:first-of-type {
    border-right: 3px solid rgba(255,255,255,.40);
    padding-right: 24px;
}

div#recherche {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.card{
    padding: 10px;
    background:#0F1A29;
    border:1px solid #24384F;
    border-radius:10px;
}

.card-header{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:24px;
    align-items:center;
    margin-bottom:20px;
}

div#catalog {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:24px;
}

div#catalog article:not(:last-child) {
    border-right: 3px solid rgba(255,255,255,.40);
    padding-right: 48px;
}

.catalog-item{
    display:grid;
    grid-template-columns: 100px 1fr;
    gap:24px;
    align-items:center;
    text-align: center
}

.shaman {
    color: #FFB000;

    font-weight: 700;
    letter-spacing: .04em;

    text-shadow:
        0 0 8px rgba(255,176,0,.8),
        0 0 24px rgba(255,176,0,.5);
}

@media (max-width: 1200px) {
    div#catalog {
        grid-template-columns:1fr 1fr;
    }

    div#catalog article:not(:last-child) {
        border-right: none;
    }

    div#catalog article:nth-child(odd) {
        border-right: 3px solid rgba(255,255,255,.40);
        padding-right: 48px;
    }

}

@media (max-width: 900px) {
    section#vision {
        grid-template-columns: 1fr;
    }

    section#vision p:first-of-type {
        border-right: none;
        padding-right: 0;
        margin: 0;
    }

    div#recherche {
        grid-template-columns: 1fr;
    }

    div#catalog {
        grid-template-columns:1fr;
    }

    div#catalog article:not(:last-child) {
        border-right: none;
    }

    .icon {
        justify-self: center;
    }
}