.center {
	text-align: center;
}

img {
		max-width: 100%;
	}
	
h2 {
	margin-top: 20px;
}

/* ============================================================
   BLOCS PEDAGOGIQUES
   ============================================================ */

.defin,
.exemple,
.rem,
.prop,
.demo,
.attention,
.methode,
.exocor,
.corrige,
.thm {

    border-radius: 8px;

    padding: 24px 20px;

    margin: 32px 0;

    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* ================================
   THEOREME
   ================================ */

.thm {
	position: relative;
    background: #e5aeae;
    border: 1px solid #c45c5c;
    border-left: 4px solid #680909;
}

.thm::before {
    content: "Théorème";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #680909;
}

.thm > span {

    color: #680909;
}


/* ================================
   DEFINITION
   ================================ */

.defin {
	position: relative;
    background: #f1f8f3;
    border: 1px solid #cfe6d5;
    border-left: 4px solid #4caf68;
}

.defin::before {
    content: "Définition";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #4caf68;
}

.defin > span {

    color: #398653;
}


/* ================================
   EXEMPLE
   ================================ */

.exemple {
	position: relative;
    background: #f1f6fb;
    border: 1px solid #cddfec;
    border-left: 4px solid #3d7eb3;
}

.exemple::before {
    content: "Exemple";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #3d7eb3;
}

.exemple > span {

    color: #326b98;
}


/* ================================
   REMARQUE
   ================================ */

.rem {
	position: relative;
    background: #f6f1fa;

    border: 1px solid #dfcfea;

    border-left: 4px solid #8a4caf;
}

.rem::before {
    content: "Remarque";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #8a4caf;
}

.rem > span {

    color: #754098;
}


/* ================================
   PROPRIETE
   ================================ */

.prop {
	position: relative;
    background: #fcf1f1;
    border: 1px solid #ebcccc;
    border-left: 4px solid #c94b4b;
}

.prop::before {
    content: "Propriété";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #c94b4b;
}

.prop > span {

    color: #b33b3b;
}


/* ================================
   DEMONSTRATION
   ================================ */

.demo {
	position: relative;
    background: #fff7ed;
    border: 1px solid #f0d5b5;
    border-left: 4px solid #d9822b;
}

.demo::before {
    content: "Démonstration";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #d9822b;
}

.demo > span {

    color: #b56b20;
}

/* ================================
   ATTENTION
   ================================ */

.attention {
	position: relative;
    background: #f4c5c5;
    border: 3px solid #801515;
}

.attention::before {
    content: "Attention!";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #801515;
}

.attention > span {

    color: #801515;
}

/* ================================
   METHODE
   ================================ */

.methode {
	position: relative;
    background: #d7d3d3;
    border: 1px solid #817f7f;
    border-left: 4px solid #545353;
}

.methode::before {
    content: "Méthode";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #545353;
}

.methode > span {

    color: #545353;
}

/* ================================
   EXOCOR
   ================================ */

.exocor {

    background: #ecead1;

    border: 1px solid #adab92;

    border-left: 4px solid #c1b627;
}

.exocor > span {

    color: #c1b627;
}

/* ================================
   CORRIGE
   ================================ */

.corrige {

    background: #c0c0c0;

    border: 1px solid #9e9999;

    border-left: 4px solid #000000;
}

.corrige > span {

    color: #000000;
}

/* ================================
   EN-TÊTES (collés à leur div)
   ================================ */

.exocor-header,
.corrige-header {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 1em 0 0 0;          /* espace au-dessus de l'en-tête, aucun en dessous */
    padding: 0.4em 0.8em;
    font: inherit;
    font-weight: bold;
    text-align: left;
    color: #ffffff;
}

/* --- Énoncé --- */
.exocor-header {
    background: #c1b627;
    border: 1px solid #adab92;
    border-left: 4px solid #c1b627;
    border-bottom: none;
}

/* --- Corrigé --- */
.corrige-header {
    background: #000000;
    border: 1px solid #9e9999;
    border-left: 4px solid #000000;
    border-bottom: none;
    cursor: pointer;
}

.corrige-header:hover {
    background: #333333;
}

/* Quand le corrigé est fermé, l'en-tête est seul : on referme sa bordure */
.corrige-header:not(.open) {
    border-bottom: 1px solid #9e9999;
}

.corrige-header::before {
    content: "▸ ";
}

.corrige-header.open::before {
    content: "▾ ";
}

/* La div se colle à son en-tête */
.exocor-header + .exocor,
.corrige-header + .corrige {
    margin-top: 0 !important;
    border-top: none;
}

.corrige[hidden] {
    display: none;
}


/* Titres des blocs */

.defin > span,
.exemple > span,
.rem > span,
.prop > span,
.demo > span,
.attention > span,
.methode > span,
.exocor > span,
.corrige > span,
.thm > span {

    display: block;

    font-weight: bold;

    margin-bottom: 15px;
}


/* ============================================================
   LISTES
   ============================================================ */

li {
    margin-bottom: 8px;
}


/* ============================================================
   CODE
   ============================================================ */

pre {

    overflow-x: auto;

    padding: 15px;

    border-radius: 6px;

    background: #f1f1f1;

    white-space: pre;
}

pre.python {

    background: #f5f5f5;
}

pre.console {

    background: #222;

    color: white;
}


/* ============================================================
   MINIPAGES
   ============================================================ */

.latex-columns {

    display: flex;

    gap: 30px;

    align-items: flex-start;

    margin: 25px 0;
}

.latex-column {

    flex: 1;

    min-width: 0;
}


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

@media (max-width: 700px) {

    .latex-columns {

        flex-direction: column;
    }

    .latex-column {

        width: 100%;
    }
}