main {
    h1 {
        color: var(--mc);
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
    }
    h2 {
        color: var(--mc);
        font-size: 18px;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .module {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
        background: rgba(200, 0, 0, 0.1);
        color: var(--ec);
        text-align: left;
        border-left: 5px solid var(--ec);
    }
    .link-pdf {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        span {
            color: var(--dc);
        }
        a {
            color: var(--qc);
        }
    }
    .info-sujet {
        background: rgba(0, 0, 0, 4%);
        padding: 10px 20px;
        color: var(--dc);
        ul {
            margin-left: 20px;
        }
    }
    .only-pdf {
        display: none;
    }
    .bloc-info-ressources {
        width: 90%;
        margin: 20px auto 10px auto;
        text-align: center;
        color: var(--dc);
        background: rgba(0, 0, 0, 4%);
        padding: 5px 0;
    }
    .ressources {
        width: 90%;
        display: flex;
        justify-content: center;
        gap: 50px;
        margin: 20px auto;
        a {
            all: unset;
            display: inline-block;
            background: var(--dc);
            color: var(--lc);
            outline: 1px solid var(--dc);
            padding: 10px 20px;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.2s ease-in-out;
            text-align: center;
            flex: 1;
            &:hover {
                color: var(--dc);
                background: var(--lc);
                border-radius: 5px;
                flex: 1.1;
            }
        }
    }
    .ressources-annexes {
        width: 90%;
        display: flex;
        justify-content: center;
        gap: 50px;
        margin: 20px auto;
        a {
            all: unset;
            display: inline-block;
            background: var(--cc);
            color: var(--lc);
            outline: 1px solid var(--cc);
            padding: 10px 20px;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.2s ease-in-out;
            text-align: center;
            flex: 1;
            &:hover {
                color: var(--cc);
                background: var(--lc);
                border-radius: 5px;
                flex: 1.1;
            }
        }
    }
    .ressources-corrigees {
        width: 90%;
        display: flex;
        justify-content: center;
        gap: 50px;
        margin: 20px auto;
        a {
            all: unset;
            display: inline-block;
            background: var(--vc);
            color: var(--lc);
            outline: 1px solid var(--vc);
            padding: 10px 20px;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.2s ease-in-out;
            text-align: center;
            flex: 1;
            &:hover {
                color: var(--vc);
                background: var(--lc);
            }
        }
    }
    .question {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
        background: rgba(0, 0, 0, 4%);
        color: var(--dc);
        h3 {
            color: var(--mc);
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .consigne {
            margin-bottom: 20px;
            color: var(--cc);
        }
        .reponse {
            &.text {
                color: var(--rc);
                text-align: justify;
                width: 98%;
                position: relative; 
                left: 50%;
                transform: translateX(-50%);
                margin-bottom: 5px;
            }
            &.code {
                margin-bottom: 10px;
                pre[class*="language-"] {
                    padding: 0 20px 10px 20px;
                    margin: 0;
                }
                pre {
                    background: var(--lc);
                    width: 98%;
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);
                }
                .token {
                    &.comment {
                        color: #dd0000;
                    }
                    &.keyword {
                        color: #ff7700;
                    }
                    &.string {
                        color: #00aa00;
                    }
                    &.number {
                        color: #000;
                    }
                    &.function {
                        color: #0000ff;
                    }
                    &.operator {
                        color: #000000;
                        background: none;
                    }
                    &.builtin {
                        color: #900090;
                    }
                    &.class-name {
                        color: #0000ff;
                    }
                }
            }
        }
        .reponse-images {
            width: 98%;
            position: relative;
            left: 50%;
            transform: translate(-50%);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin: 15px 0;
            img {
                max-width: 300px;
                object-fit: auto;
            }
        }
    }
    .legal {
        text-align: center;
        font-size: 14px;
        margin: auto 0;
        color: rgb(150, 150, 150);
        width: 100%;
    }
}

@media print {
    .out-pdf {
        display: none!important;
    }
    .only-pdf {
        display: block!important;
    }

    pre,
    code {
        white-space: pre-wrap !important;   /* retour ligne */
        word-break: break-word !important;  /* coupe longs mots */
        overflow: visible !important;       /* enlève scroll */
        background: rgba(0, 0, 0, 2%);
    }

    .question {
        page-break-inside: avoid;
    }
    pre {
        page-break-inside: avoid;
    }
}

@page {
  size: A4;
  margin: 10mm;
}