@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1, h2 {
    font-family: "Archivo Black", sans-serif;
}
button, a {
    font-family: "Space Grotesk", sans-serif;
}
span {
    font-family: "Geist Mono", monospace;
}

:root {
    --vert: #c8f03a;
    --rouge: #ff6b5c;
    --rose: #ffa3d1;
    --jaune: #ffd93d;
    --creme: #fff5d9;
    --bleu: #8fdfff;
    --noir: #111111;
    --blanc: #ffffff;
    --violet: #7c5cff;

    --fond: #111111;
    --texte: #e9e9e9;
    --vert-syntaxe: #c8f03a;
    --bleu-syntaxe: #8fdfff;
    --orange-syntaxe: #ffb47a;
    --rose-syntaxe: #ffa3d1;
    --gris-dim: #888888;

    /*
        Bordure : 3px solid #111 (partout)
        Ombre standard : 6px 6px 0 #111
        Ombre large (hero, CTA, footer) : 10px 10px 0 #111
        Ombre petite (boutons header) : 4px 4px 0 #111
        Rayon de bordure : 18px (grands blocs) / 12px (cartes) / 999px (pills)
    */
}

body {
    background-color: var(--violet);
    font-family: "Space Grotesk", sans-serif;
    padding: 10px 20px;
}

.container {
    max-width: 75%;
    margin: 0 auto;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 30px 20px;
    width: 100%;

    img {
        width: 200px;
        height: auto;
    }
    & .title {
        font-size: 2em;
        color: var(--creme);
    }

    & .onglets {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 1.5rem;
        list-style: none;

        & a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 1em;
            color: var(--noir);
            text-decoration: none;
            padding: 5px 20px;
            border: 3px solid var(--noir);
            border-radius: 20px;
            background-color: var(--blanc);
            box-shadow: 6px 6px 0 #111;
            transition: all 0.2s ease-in-out;

            &:hover {
                background-color: var(--blanc);
                color: var(--noir);
                box-shadow: 0 0 0 #111;
            }
        }
        .doc {
            background-color: var(--noir);
            color: var(--blanc);
        }
    }
}

header {
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 90vh;
    width: 100%;
    background-color: var(--rouge);
    border: 3px solid var(--noir);
    border-radius: 20px;
    box-shadow: 10px 10px 0 #111;
    transition: all 0.2s ease-in-out;

    .row {
        display: flex;
        align-items: center;
        flex-direction: row;
        height: 100%;
        width: 100%;
    }
    .column {
        float: left;
        height: 100%;
        width: 100%;
        padding: 40px;
    }

    .left {
        width: 45%;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .left .title {
        display: flex;
        flex-direction: column;
        letter-spacing: -0.02em;
        gap: 5px;
    }
    .title h1 {
        font-family: "Archivo Black", sans-serif;
        font-weight: bold;
        font-size: 3.5em;
        color: var(--noir);
    }
    .server {
        display: flex;
        font-family: "Archivo Black", sans-serif;
        font-weight: bold;
        font-size: 3.5em;
        color: var(--noir);
        background-color: var(--vert);
        border-radius: 20px;
        padding: 5px 20px;
        border: 3px solid var(--noir);
        transform: rotate(-2deg);
        box-shadow: 6px 6px 0 #111;
        justify-content: center;
        text-align: center;
        width: 100%;
    }
    .etapes {
        display: flex;
        font-family: "Archivo Black", sans-serif;
        font-weight: bold;
        font-size: 3.5em;
        color: var(--noir);
        background-color: var(--jaune);
        border-radius: 20px;
        padding: 5px 20px;
        border: 3px solid var(--noir);
        transform: rotate(2deg);
        box-shadow: 6px 6px 0 #111;
        width: 100%;
    }
    .left-body p {
        font-size: 1em;
        color: var(--noir);
        line-height: 1.5;
        font-family: "Space Grotesk", sans-serif;
        font-weight: bold;
    }
    .left-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        box-shadow: 10px 10px 0 #111;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.2s ease-in-out;

        & p {
            font-size: 1em;
            color: var(--noir);
            font-family: "Space Grotesk", sans-serif;
            font-weight: bold;
            padding: 10px;
            width: 80%;
            background-color: var(--blanc);
            border: 3px solid var(--noir);
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }

        & a {
            font-size: 1em;
            color: var(--noir);
            text-decoration: none;
            padding: 5px 20px;
            background-color: var(--noir);
            transition: all 0.2s ease-in-out;
            height: 100%;
            align-content: center;
            border: 3px solid var(--noir);
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;

            &:hover {
                background-color: var(--vert);
                color: var(--noir);
                box-shadow: 0 0 0 #111;
            }
        }
    }
    &:hover {
        box-shadow: 0 0 0 #111;
    }

    .right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55%;
        border-radius: 20px;

        .right-body {
            position: absolute;
            width: 40%;
            height: 75%;
            transform: translateX(40px);
            background-color: var(--vert);
            border: 3px solid var(--noir);
            border-radius: 30px;
            box-shadow: 10px 10px 0 #111;
            padding: 20px;
        }

        .command {
            width: 100%;
            height: 100%;
            background-color: var(--noir);
            border: 3px solid var(--noir);
            border-radius: 20px;
            padding: 20px;
            display: flex;
            gap: 20px;
            flex-direction: column;
            font-family: "Geist Mono", monospace;
            font-size: 1em;
            color: var(--vert);

            & span {
                color: var(--blanc);
            }
        }
    }
}

section {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 60px 0px;

    .section-header {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;

        & p {
            display: inline-flex;
            align-items: center;
            background-color: var(--noir);
            width: fit-content;
            font-size: 0.8em;
            justify-content: center;
            color: var(--blanc);
            padding: 10px 20px;
            border-radius: 20px;
        }

        & h2 {
            font-size: 2.5em;
            color: var(--blanc);

            & span {
                color: var(--noir);
                font-family: "Archivo Black", sans-serif;
                font-weight: bold;
                border-bottom: 10px solid var(--vert);
            }
        }
    }

    .section-body {
        display: flex;
        flex-direction: row;
        margin-top: 30px;
        gap: 30px;
        width: 100%;
        height: 100%;

        & .card {
            display: flex;
            align-items: start;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
            height: 250px;
            border-radius: 20px;
            border: 3px solid var(--noir);
            padding: 10px;

            & .card-buble {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--blanc);
                top: -20px;
                right: 25px;
                width: 55px;
                height: 55px;
                border-radius: 50%;
                background-color: var(--noir);
            }
            & .card-header {
                position: relative;
                display: flex;
                align-items: start;
                justify-content: start;
                top: -55px;
                left: 40px;
                color: var(--noir);
                font-size: 1.2em;
            }

            & .card-body {
                position: relative;
                top: -40px;
                display: flex;
                padding: 10px;
                text-align: start;
                flex-direction: column;
                color: var(--noir);
            }

            & .card-footer {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;

                & a {
                    display: inline-block;
                    max-width: 100%;
                    border: 3px solid var(--noir);
                    border-radius: 10px;
                    padding: 5px 10px;
                    background-color: var(--noir);
                    color: var(--blanc);
                    font-family: "Geist Mono", monospace;
                    font-size: 0.8em;
                    text-align: center;
                    word-break: break-word;
                    cursor: default;
                }
            }
        }
    }

    .section2-body {
        display: flex;
        flex-direction: row;
        float: left;
        margin-top: 30px;
        height: 100%;
        width: 100%;
        padding: 10px;
        gap: 20px;

        .section-right {
            display: flex;
            flex-direction: column;
            width: 50%;
            height: 100%;
            background-color: transparent;
            gap: 20px;
            border-radius: 10px;
            color: var(--noir);
        }
        .section-left {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 50%;
            height: 100%;
            background-color: transparent;
            border-radius: 10px;
            color: var(--noir);
        }

        .section2-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            flex-direction: row;
            width: 100%;
            height: 70px;
            border-radius: 10px;
            border: 3px solid var(--noir);
            background-color: var(--blanc);
            overflow: hidden;
            box-shadow: 6px 6px var(--noir);
            transition: all 0.2s ease-in-out;
            

            & .section-wrap {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 20px;
            }

            & .section-ok {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background-color: var(--vert);
                border: 3px solid var(--noir);
            }

            & p {
                font-size: 1em;
                font-family: "Archivo Black", sans-serif;
            }
            & span {
                font-size: 0.8em;
            }
        }
    }

    .section3-body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        padding: 10px;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        gap: 20px;
        color: var(--noir);

        & .section3-card {
            width: 320px;
            height: 200px;
            border: 3px solid var(--noir);
            border-radius: 10px;
            box-shadow: 6px 6px var(--noir);
            padding: 20px;

            & .section3-card-header {
                display: inline-flex;
                align-items: center;
                padding: 5px 15px;
                background-color: var(--blanc);
                border: 3px solid var(--noir);
                width: fit-content;
                border-radius: 30px;
                font-size: 0.8em;
            }

            & .section3-card-body {
                margin-top: 20px;
                display: flex;
                align-items: start;
                justify-content: start;
                flex-direction: column;
                gap: 10px;

                & h3 {
                    font-size: 1.5em;
                }
                & p {
                    font-size: 0.8em;
                }
            }
        }
    }

    .section4-body {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: var(--noir);

        & .section4-card {
            display: flex;
            width: 100%;
            height: 200px;
            background-color: var(--vert);
            border: 3px solid var(--noir);
            border-radius: 20px;
            float: left;
            overflow: hidden;
            padding: 20px;

            & .section4-card-left {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                width: 60%;

                & h2 {
                    font-size: 2.5em;
                    font-family: "Geist Mono", monospace;
                    font-weight: bold;
                }
            }

            & .section4-card-right {
                display: flex;
                width: 40%;
                height: 100%;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                .section4-footer {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    align-items: center;
                    justify-content: center;

                    & p {
                        font-size: 1em;
                        color: var(--noir);
                        font-family: "Space Grotesk", sans-serif;
                        font-weight: bold;
                        padding: 10px;
                        width: 80%;
                        background-color: var(--blanc);
                        border: 3px solid var(--noir);
                        border-top-left-radius: 20px;
                        border-bottom-left-radius: 20px;
                    }

                    & span {
                        font-size: 1em;
                        color: var(--noir);
                        text-decoration: none;
                        padding: 5px 20px;
                        background-color: var(--noir);
                        transition: all 0.2s ease-in-out;
                        height: 50%;
                        align-content: center;
                        border: 3px solid var(--noir);
                        border-top-right-radius: 20px;
                        border-bottom-right-radius: 20px;

                        &:hover {
                            background-color: var(--vert);
                            color: var(--noir);
                            box-shadow: 0 0 0 #111;
                        }
                    }
                }

                .documentation {
                    display: flex;
                    background-color: var(--noir);
                    width: 100%;
                    border-radius: 20px;
                    padding: 20px;
                    box-shadow: 6px 6px var(--noir);
                    align-items: center;
                    justify-content: space-around;
                    transition: all 0.2s ease-in-out;

                    color: var(--blanc);
                    & a {
                        color: var(--blanc);
                        text-decoration: none;
                    }
                    & i {
                        color: var(--noir);
                        background-color: var(--blanc);
                        padding: 10px;
                        border-radius: 50%;
                        width: 10%;
                        transition: all 0.5s ease-in-out;
                    }
                    &:hover {
                        box-shadow: 0px 0px var(--noir);
                        justify-content: space-between;
                    }
                }
            }
        }
    }
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 3px solid var(--noir);
    height: 100px;
    color: var(--noir);

    .footer-left {
        padding: 10px;

        & p {
            font-size: 1em;
            color: var(--noir);
            font-family: "Geist Mono", monospace;
        }
    }

    .footer-right {
        display: flex;
        padding: 10px;
        gap: 20px;

        & a {
            font-family: "Geist Mono", monospace;
            text-decoration: none;
            color: var(--noir);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
    }
}

.coming-soon {
    position: relative;
    opacity: 0.95;
    cursor: not-allowed;
    pointer-events: none;
}

.coming-soon .badge {
    display: inline-block;
    padding: 2px 10px;
    margin-left: 8px;
    border-radius: 999px;
    background-color: var(--jaune);
    color: var(--noir);
    border: 2px solid var(--noir);
    font-family: "Geist Mono", monospace;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.4;
}

.left-footer.coming-soon p {
    flex: 1;
    width: auto;
}

.left-footer.coming-soon .badge {
    margin-left: 0;
    border-radius: 0;
    border: 3px solid var(--noir);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 10px 20px;
    font-size: 0.9em;
    height: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section4-footer.coming-soon {
    height: auto;
    width: 80%;
    align-items: stretch;
    justify-content: space-between;
}

.section4-footer.coming-soon p {
    flex: 1;
    width: auto;
}

.section4-footer.coming-soon .badge {
    margin-left: 0;
    background-color: var(--jaune);
    color: var(--noir);
    border: 3px solid var(--noir);
    border-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 10px 20px;
    font-size: 0.9em;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    flex-shrink: 0;
}

.section4-card-right .documentation.coming-soon {
    justify-content: space-between;
}

.section4-card-right .documentation.coming-soon .badge {
    background-color: var(--jaune);
    color: var(--noir);
    border: 2px solid var(--noir);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Écran large 1920x1080 (desktop bureau) */
@media (min-width: 1600px) {
    .container {
        max-width: 1280px;
    }

    nav img {
        width: 170px;
    }

    nav .onglets a {
        font-size: 0.95em;
    }

    header {
        height: 72vh;
        max-height: 740px;
        margin-top: 30px;
    }

    header .column {
        padding: 40px;
    }

    header .left {
        justify-content: flex-start;
        gap: 28px;
    }

    header .right {
        position: relative;
        padding: 30px 40px;
    }

    header .right .right-body {
        position: relative;
        width: 100%;
        height: 95%;
        transform: translateX(80px);
    }

    header .title h1,
    header .server,
    header .etapes {
        font-size: 3em;
    }

    header .left-body p {
        font-size: 1.05em;
    }

    header .right .right-body {
        width: 100%;
        height: 100%;
    }

    header .right .command {
        font-size: 0.95em;
        gap: 16px;
    }

    section {
        margin: 50px 0;
    }

    section .section-header h2 {
        font-size: 2.2em;
    }

    section .section-body {
        margin-top: 25px;
        gap: 25px;
    }

    section .section-body .card {
        height: 220px;
        padding: 12px;
    }

    section .section-body .card .card-header {
        font-size: 1.1em;
    }

    section .section-body .card .card-body p {
        font-size: 0.95em;
        line-height: 1.4;
    }

    section .section-body .card .card-footer a {
        font-size: 0.85em;
    }

    section .section2-body {
        margin-top: 25px;
    }

    section .section2-body .section2-card {
        height: 72px;
    }

    section .section2-body .section2-card p {
        font-size: 1.05em;
    }

    section .section2-body .section2-card span {
        font-size: 0.85em;
    }

    section .section3-body {
        margin-top: 30px;
        gap: 22px;
    }

    section .section3-body .section3-card {
        width: calc(33.333% - 16px);
        max-width: 100%;
        height: 190px;
    }

    section .section3-body .section3-card .section3-card-body h3 {
        font-size: 1.4em;
    }

    section .section3-body .section3-card .section3-card-body p {
        font-size: 0.9em;
    }

    section .section4-body .section4-card {
        height: 180px;
    }

    section .section4-body .section4-card .section4-card-left h2 {
        font-size: 2.2em;
    }
}

/* Tablette ≤ 1024px */
@media (max-width: 1024px) {
    .container {
        max-width: 92%;
    }

    nav {
        padding: 25px 10px;
    }

    header {
        height: auto;
    }

    header .row {
        flex-direction: column;
        align-items: stretch;
    }

    header .column {
        padding: 30px;
    }

    header .left,
    header .right {
        width: 100%;
    }

    header .right {
        height: 420px;
    }

    header .right .right-body {
        position: relative;
        width: 80%;
        height: 100%;
        transform: none;
        margin: 0 auto;
    }

    header .title h1,
    header .server,
    header .etapes {
        font-size: 2.6em;
    }

    section .section-body {
        flex-direction: column;
    }

    section .section-body .card {
        height: auto;
        min-height: 220px;
    }

    section .section-header > p {
        width: auto;
        min-width: 180px;
        align-self: flex-start;
    }

    section .section3-body .section3-card {
        width: calc(50% - 10px);
    }
}

/* Mobile ≤ 768px */
@media (max-width: 768px) {
    body {
        padding: 5px 10px;
    }

    .container {
        max-width: 100%;
    }

    nav {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }

    nav .title {
        font-size: 1.6em;
    }

    nav .onglets {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        padding: 0;
        align-items: stretch;
    }

    nav .onglets li {
        width: 100%;
    }

    nav .onglets a {
        width: 100%;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    header {
        box-shadow: 6px 6px 0 #111;
    }

    header .column {
        padding: 25px 20px;
    }

    header .left {
        gap: 25px;
    }

    header .title h1,
    header .server,
    header .etapes {
        font-size: 1.9em;
    }

    header .left-footer {
        width: 100%;
        box-shadow: 6px 6px 0 #111;
    }

    header .left-footer p {
        font-size: 0.9em;
    }

    header .right {
        height: 320px;
        padding: 20px;
    }

    header .right .right-body {
        width: 90%;
        height: 100%;
        box-shadow: 6px 6px 0 #111;
        padding: 15px;
    }

    header .right .command {
        gap: 10px;
        font-size: 0.85em;
        padding: 15px;
    }

    section {
        margin: 40px 0;
    }

    section .section-header h2 {
        font-size: 1.9em;
    }

    section .section-header h2 span {
        border-bottom-width: 6px;
    }

    section .section-header > p {
        width: auto;
        min-width: 160px;
        align-self: flex-start;
    }

    section .section-body {
        gap: 20px;
    }

    section .section2-body {
        flex-direction: column;
        padding: 0;
    }

    section .section2-body .section-right,
    section .section2-body .section-left {
        width: 100%;
    }

    section .section2-body .section2-card {
        height: auto;
        min-height: 70px;
        flex-wrap: wrap;
        gap: 8px;
    }

    section .section3-body {
        padding: 0;
    }

    section .section3-body .section3-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 180px;
    }

    section .section4-body .section4-card {
        flex-direction: column;
        height: auto;
        padding: 25px 20px;
        gap: 25px;
    }

    section .section4-body .section4-card .section4-card-left,
    section .section4-body .section4-card .section4-card-right {
        width: 100%;
    }

    section .section4-body .section4-card .section4-card-left h2 {
        font-size: 1.8em;
        text-align: center;
    }

    .section4-footer.coming-soon {
        width: 100%;
    }

    .section4-card-right .documentation {
        width: 100%;
        padding: 15px;
    }

    footer {
        flex-direction: column;
        gap: 16px;
        height: auto;
        padding: 25px 0;
        text-align: center;
    }

    footer .footer-right {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Très petit écran ≤ 480px */
@media (max-width: 480px) {
    header .title h1,
    header .server,
    header .etapes {
        font-size: 1.5em;
    }

    header .right {
        height: 280px;
    }

    header .right .right-body {
        width: 100%;
        transform: none;
    }

    header .right .command {
        font-size: 0.75em;
    }

    section .section-header h2 {
        font-size: 1.5em;
    }

    nav .title {
        font-size: 1.4em;
    }
}