/* CSS Document */

main {
    max-width: 700px;
}

main h1 {
    font-variant-caps: small-caps;
    font-size: 1.8rem;
    margin: 1rem 0;
    padding: 0;
    color: #036;
    text-align: center;
    text-shadow: 0.05rem 0.05rem 0.2rem #666;
    border-top: 1px solid #036;
    border-bottom: 1px solid #036;

}

main h2 {
    margin: 2rem 0 0 0;
    padding: 0.5rem 0 0 2.5rem;
    height: 2rem;
    font-size: 1.4rem;
    font-variant:small-caps;
    border: 2px solid #036;
    color: #036;
    background-color: #ececff;
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: 2.5rem;
    border-radius: 0.5rem;
}

main h2.problematique {
    background-image: url(/commun/icone_problematique.svg);
}
main h2.problematique::after {
    content: "Problématique";
}

main h2.competences {
    background-image: url(/commun/icone_competences.svg);
}
main h2.competences::after {
    content: "Compétences";
}

main h2.activites {
    background-image: url(/commun/icone_tp.svg);
}
main h2.activites::after {
    content: "Activités documentaires,  expérimentales...";
}

main h2.cours {
    background-image: url(/commun/icone_cours.svg);
}
main h2.cours::after {
    content: "Cours";
}

main h2.tp {
    background-image: url(/commun/icone_tp.svg);
}
main h2.tp::after {
    content: "TP";
}

main h2.exercices {
    background-image: url(/commun/icone_applications.svg);
}
main h2.exercices::after {
    content: "Exercices";
}

main h2.complements {
    background-image: url(/commun/icone_complements.svg);
}
main h2.complements::after {
    content: "Compléments";
}

main h3 {
    margin:1em 0 0 1em;
    font-style: italic;
    text-decoration: underline;
}

main ul {
    margin: 0.5em 1em 1em 3.5em;
    padding: 0;
}
main li {
    font-weight: bold;
    margin: 0.3rem 0 0.3rem 0;
}

main li.circle {
    list-style-type: '⭘ ';
}
main li.fleche {
    list-style-type: '⇨ ';
}

main a {
    cursor: pointer;
    text-decoration: none;
    padding: 0 0.3em;
    border-radius: 0.3rem;
    background-color: #f3f3ff;
    color: black;
}

main a:hover {
    background-color: #e0e0ff;
}