/* AFFICHAGE DE LA BARRE DE TITRE */
header  {
    display: block;
/*     align-items: center; */
/*     justify-content: center; */

    border-bottom: solid 0.3em black;
    margin-bottom: 1.5em;

    & h1 {
        width: min(fit-content, 80%);
        margin: auto;
        padding: 0.5em;
    }

    & .chapter {
        display: flex;
        flex-flow: column;
        align-items: center;
    }
}


/* AFFICHAGE GENERAL DU BODY */
body {
    width: clamp(min(100vw, 75ch), 83vw, 95ch);
    background: white;
    margin: auto;
    padding-bottom: 1em;

    font-family: Comfortaa, Helvetica, Arial, sans-serif;

}

main {
    margin: max(1em, 20px);
    text-align: justify;
    counter-reset: section;
    counter-reset: subsection;
}

dl {
    /* Pour afficher les éléments sur la mêe ligne */
    display: grid;
    grid-template-columns: max-content auto;

    dt {
        font-weight: bold;
        grid-column-start: 1;
    }
    dt::after {content: " : ";}

    dd {
          grid-column-start: 2;
    }
}

.block {
    display: inline-block;
    padding: 0.25em;
}

table {
    display: block;
    border-collapse: collapse;
    margin: 25px 0;

    thead tr {background: #222; color: #eee;}
    & :is(td, th) {padding: 12px 15px;}

    & tbody tr:nth-of-type(even) { background-color:#e6e6e6;}
    & tbody tr:nth-of-type(odd) { background-color:#fff;}
    & tbody tr:last-of-type {
        border-bottom: 2px solid #222;
    }

    & > caption:before {
        content: "Tableau : ";
        font-weight: bold;
    }
}

.center, .math, .intro {
    width: fit-content;
    margin: auto;
}

.intro {
    font-size: larger;
}

h1 {
    font-size: 200%;
    width: fit-content;
    margin: 2em auto;
}

/* Seul les headers dans le body sont numérotés de la sorte */
main h1:not(.unnumbered) {
    counter-increment: section;
    counter-reset: subsection;
}
main h1:not(.unnumbered):before {
/*     content: counter(section, upper-roman) ". "; */
}

main h2:not(.unnumbered):before {
    content: counter(subsection, upper-alpha) ". ";
    counter-increment: subsection;
}

:not(header, .box, details, slide) > :is(h1, h2, h3, h4)  {
    box-shadow: 0 8px 6px -6px grey;
    padding: 0.25em;
}

:is(h1, h2, h3, h4)[data-tag]:after,
:is(h1, h2, h3, h4) > span[data-tag]:after {
    content: " #" attr(data-tag);
    color: #555;
    font-size: 50%;
}

img {
    max-width: 100%;
    & + figcaption {
        width: max(50%, 60ch);
        margin: auto;
    }
    & + figcaption:before {
        content: "Image : ";
        font-weight: bold;
    }
}


/**************************************
 * APPARENCE GLOBALE DES BOITES
 ***************************************/
details {
    summary {
        cursor: pointer;
    }
}

.box, details {
    background-color: var(--box-color, white) !important;
    border-color: var(--box-border, #000);
    padding: 0.5em 1.5em;
    margin: 0.5em 0;
    border-width: 3px 3px  3px 1em;
    border-style: solid;
    border-radius: 5px;
    text-align: left;
    overflow: scroll;

     & > :is(p, span, h1, h2, h3, h4, h5, h6):first-child {display: inline; }
     & :is(h2, h3, h4, h4) {color: var(--box-border, #000);}
}

.box:before, details summary:before, .hint:before {
    font-weight: bold;
    font-size: larger;
    color: var(--box-border, #000);
    content: var(--box-name, '');
    display: inline;
}

/* Différents types de boites */
/* (Fonctionne avec classe box et avec details) */
.warning { --box-name: "⚠";}
.remark {--box-name: "Remarque"}
.warning, .remark {
    --box-color: #ffdfab;
    --box-border: #d9682f;
}


.info {--box-name: "🛈";}
.doc { --box-name: "📄";}
.info, .doc {
    --box-color: #c1fae4;
    --box-border: #1d7b90;
}


.success {--box-name: "✅";}
.definition { --box-name: "Définition";}
.success, .definition {
    --box-color: #d2fabc;
    --box-border: #489047;
}



.error { --box-name: "❌";}
.know{--box-name:"♥️";}
.error, .know{
    --box-color: #fad9cf;
    --box-border: #901e1e;
}

.hint {
    color: var(--box-border, #000);
    display: inline-block;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    margin: -0.5em 0;
    transition: width 0.5s ease 2s, height 0.5s ease, opacity 1s ease 1s;
}

.exemple {--box-name: "Exemple";}
.exercice {--box-name: "Exercice";}
.exercice, .exemple{
    --box-color: #cbd3ff;
    --box-border: #7272ab;
}

/*****************************
 * APPARENCE DES CARDS
 ******************************/
.cardsContainer {
    display: flex;
    flex-flow: row wrap;

    .card {
        flex: 1 1 max(20vw, 30ch);
        max-width: max(50%, 30ch);
        padding: 0.5em;
        margin: 1em;
        box-shadow: 1px 1px 1px black;
        transition: all 0.1s ease;
    }

    .card:hover {
        box-shadow: 1px 1px 5px orange;
    }
}


/**************/
/* QUESTIONS */
/**************/
.questions {
    & > :is(ol, ul):before {
        content: "Questions";
        color: #666;
        font-weight: bold;
    }
    & > :is(ol, ul) li::marker {
        color: #666;
        font-weight: 1000;
        font-size: 200%;
    }
}