/* =========================================================
   BLOCS DE CODE C / C++
   ========================================================= */

.code-c-block {
    max-width: 55em;
    margin: 1.5em auto;
    border-radius: 6px;
    overflow: hidden;
    background-color: #1e2225;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Titre du bloc de code */

.code-title {
    padding: 0.55em 1em;
    background-color: #2b3036;
    color: #d8dce1;
    font-size: 0.9em;
    font-weight: 600;
    border-bottom: 1px solid #3b4148;
}

/* Zone contenant le code */

.code-c-block pre {
    margin: 0;
    padding: 1em 1.2em;
    overflow-x: auto;

    font-family:
        "SFMono-Regular",
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.75em;
    line-height: 1.25;

    color: #e6e6e6;
    background-color: #1e2225;

    tab-size: 4;
}

/* Le code lui-même */

.code-c-block code {
    font-family: inherit;
    white-space: pre;
}


/* =========================================================
   NUMÉROS DE LIGNES
   ========================================================= */

.code-lines {
    counter-reset: line;
}

.code-lines code {
    display: block;
}

.code-lines code span.line {
    display: block;
    counter-increment: line;
}

.code-lines code span.line::before {
    content: counter(line);

    display: inline-block;
    width: 2.5em;
    margin-right: 1em;

    text-align: right;
    color: #707780;

    user-select: none;
}


/* =========================================================
   PRISM.JS
   ========================================================= */
/* On conserve la structure de Prism mais on adapte
 * les couleurs à l'aspect général du site. */

.code-c-block code[class*="language-"],
.code-c-block pre[class*="language-"] {
    background: transparent;
    text-shadow: none;
}

/* Commentaires */

.code-c-block .token.comment,
.code-c-block .token.prolog,
.code-c-block .token.doctype,
.code-c-block .token.cdata {
    color: #7f8994;
    font-style: italic;
    border: none;
    outline: none;
}


/* Mots-clés */

.code-c-block .token.keyword {
    color: #82aaff;
}


/* Types, classes */

.code-c-block .token.class-name,
.code-c-block .token.builtin {
    color: #89ddff;
}


/* Fonctions */

.code-c-block .token.function {
    color: #c3e88d;
}


/* Nombres */

.code-c-block .token.number {
    color: #f78c6c;
}


/* Chaînes */

.code-c-block .token.string,
.code-c-block .token.char {
    color: #c3e88d;
}


/* Opérateurs */

.code-c-block .token.operator {
    color: #89ddff;
}


/* Ponctuation */

.code-c-block .token.punctuation {
    color: #d6deeb;
}


/* Préprocesseur */

.code-c-block .token.directive,
.code-c-block .token.directive-hash {
    color: #c792ea;
}


/* Constantes */

.code-c-block .token.constant,
.code-c-block .token.boolean {
    color: #ffcb6b;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.code-c-block pre::-webkit-scrollbar {
    height: 8px;
}

.code-c-block pre::-webkit-scrollbar-track {
    background: #1e2227;
}

.code-c-block pre::-webkit-scrollbar-thumb {
    background: #4a5058;
    border-radius: 4px;
}

.code-c-block pre::-webkit-scrollbar-thumb:hover {
    background: #626a74;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .code-c-block {
        width: 100%;
        margin: 1.2em auto;
        border-radius: 4px;
    }

    .code-c-block pre {
        padding: 0.8em;
        font-size: 0.78em;
        line-height: 1.5;
    }

    .code-title {
        font-size: 0.85em;
    }

}