:root {
    --color-definition: #EAF3DE;
    --color-definition-border: #3B6D11;
    --color-definition-text: #27500A;

    --color-theoreme: #EEEDFE;
    --color-theoreme-border: #534AB7;
    --color-theoreme-text: #3C3489;

--color-exemple: #F5F4F0;        /* Fond gris-blanc */
--color-exemple-border: #A09F9A; /* Bordure grise */
--color-exemple-text: #5F5E5A;   /* Texte gris */

    --color-demonstration: #E1F5EE;
    --color-demonstration-border: #0F6E56;
    --color-demonstration-text: #085041;

    --color-propriete: #E6F1FB;
    --color-propriete-border: #185FA5;
    --color-propriete-text: #0C447C;

    --color-remarque: #FFF9E6;
    --color-remarque-border: #854F0B;
    --color-remarque-text: #633806;

    --color-question: #FAECE7;
    --color-question-border: #993C1D;
    --color-question-text: #712B13;
}

.definition,
.theoreme,
.exemple,
.demonstration,
.propriete,
.remarque,
.question {
    margin: 1.5rem 0;
    padding: 0.5rem 0.5rem 0.5rem;
    border-left: 4px solid;
    border-radius: 6px;
    position: relative;
}

.definition::before,
.theoreme::before,
.exemple::before,
.demonstration::before,
.propriete::before,
.remarque::before,
.question::before {
    position: absolute;
    top: -1rem;
    left: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid;
}

.definition {
    background-color: var(--color-definition);
    border-left-color: var(--color-definition-border);
    color: var(--color-definition-text);
}

.definition::before {
    content: "Définition";
    background-color: var(--color-definition);
    border-color: var(--color-definition-border);
    color: var(--color-definition-text);
}

.theoreme {
    background-color: var(--color-theoreme);
    border-left-color: var(--color-theoreme-border);
    color: var(--color-theoreme-text);
}

.theoreme::before {
    content: "Théorème";
    background-color: var(--color-theoreme);
    border-color: var(--color-theoreme-border);
    color: var(--color-theoreme-text);
}

.exemple {
    background-color: var(--color-exemple);
    border-left-color: var(--color-exemple-border);
    color: var(--color-exemple-text);
}

.exemple::before {
    content: "Exemple";
    background-color: var(--color-exemple);
    border-color: var(--color-exemple-border);
    color: var(--color-exemple-text);
}

.demonstration {
    background-color: var(--color-demonstration);
    border-left-color: var(--color-demonstration-border);
    color: var(--color-demonstration-text);
}

.demonstration::before {
    content: "Démonstration";
    background-color: var(--color-demonstration);
    border-color: var(--color-demonstration-border);
    color: var(--color-demonstration-text);
}

.propriete {
    background-color: var(--color-propriete);
    border-left-color: var(--color-propriete-border);
    color: var(--color-propriete-text);
}

.propriete::before {
    content: "Propriété";
    background-color: var(--color-propriete);
    border-color: var(--color-propriete-border);
    color: var(--color-propriete-text);
}

.remarque {
    background-color: var(--color-remarque);
    border-left-color: var(--color-remarque-border);
    color: var(--color-remarque-text);
}

.remarque::before {
    content: "Remarque";
    background-color: var(--color-remarque);
    border-color: var(--color-remarque-border);
    color: var(--color-remarque-text);
}

.question {
    background-color: var(--color-question);
    border-left-color: var(--color-question-border);
    color: var(--color-question-text);
}

body {
    counter-reset: question-counter;
}
.question {
    counter-increment: question-counter;
}
.question::before {
    content: "Question " counter(question-counter);
    background-color: var(--color-question);
    border-color: var(--color-question-border);
    color: var(--color-question-text);
}