/* BEGIN BULLETS */

/* generic bullets */

.ul {
    margin-top: 20px;
    border-bottom: 1px solid;
    border-color: var(--grey-lighterer);
    width: fit-content;
    padding-bottom: 2px;
}


ol[type="custom"] > li > * {
    border-bottom: 1px solid var(--blue-text);
    width: fit-content;
}

.dark {
    ol[type="custom"] > li > * {
        border-bottom: 1px solid var(--blue-text);
    }
}

ul[type="square"] > li {
    list-style-type: square;
}

ul[type="none"] > li::before, ul[type="none"] > li::marker {
    content: '' !important;
}


ol[type="Alpha"] {
    list-style-type: lower-greek;
}

h1 ~ ol[type="1"] > li::marker {
    content: counter(ol1Item) ') ';
}

h1 ~ ol[type="1"] > ol[type="a"] li::marker {
    content: counter(ol1Item) '-' counter(olaItem) ') ';
}

h1 ~ ol[type="1"] > ol[type="a"] > ol[type="1"] li::marker {
    content: counter(ol1Item) '-' counter(olaItem) '-' counter(olaItemBis) ') ';
}

ol[type="1"] > ol[type="a"] > li::marker {
    font-style: italic;
}

ul[type="light-ul"] > li > * {
    border-bottom: 1px solid;
    width: fit-content;
}

ol > li::marker, ol > li > * {
    color: var(--blue-text);
}

ol > li > * {
    font-size: var(--paragraph-font-size);
    border-bottom: 1.5px solid var(--blue-light-2);
}

ol > li mjx-container {
    color: var(--blue-text);
}

ol > li > * {
    width: fit-content;
    padding-bottom: 3px;
}

@media (width <= 450px) {
    h1 ~ ul {
        position: relative;
        left: -5%;
    }

    h1 ~ ol[type="1"] > ol[type="a"] {
        padding-inline-start: 20px;
    }
    
    h1 ~ ol[type="1"] > ol[type="a"] > ol[type="1"] {
        padding-inline-start: 30px;
    }
    
    h1 ~ ol[type="1"] > *:not(ul):not(ol):not(li):not(.aside):not(.focus):not(.flex-img):not(canvas) {
        position: relative;
        left: -10%;
    }

    h1 ~ ol[type="1"] {
        > .focus {
            position: relative;
            left: -7%;
        }
        > ul {
            position: relative;
            left: -7%;
        }
    }

    h1 ~ ol[type="a"] > *:not(ul):not(ol):not(li):not(.aside):not(.focus):not(.flex-img):not(canvas) {
        position: relative;
        left: -10%;
    }

    h1 ~ ol[type="1"] > ol[type="a"] > *:not(ul):not(ol):not(li):not(.aside):not(.focus):not(.flex-img):not(canvas) {
        position: relative;
        left: -12%;
    }

    h1 ~ ol[type="1"] > ol[type="a"] {
        > .focus {
            position: relative;
            left: -10%;
        }
        > ul {
            position: relative;
            left: -12%;
        }
    }

    h1 ~ ol[type="1"] > ol[type="a"] > ol[type="1"] > *:not(ul):not(ol):not(li):not(.aside):not(.focus):not(.flex-img):not(canvas) {
        position: relative;
        left: -24%;
    }
    
    h1 ~ ol[type="1"] > .demo-img {
        position: relative;
        left: -35px;
    }

    h1 ~ ol[type="1"] .aside, h1 ~ ol[type="a"] .aside {
        position: relative;
        left: -10%;
        width: 70vw;
    }
    
}


/* .point-title::before {
    font-family: 'nb-scholar', 'scholar', sans-serif;
}

.tnw {
    .point-title::before {
        font-family: 'tnw', 'Times New Roman', sans-serif;
    }
} */

/* propsCount */
h1 {
    counter-reset: propsCount;
}

h1 ~ .point-title {
    counter-increment: propsCount;
}

#demos {
    counter-reset: ol1Item olaItem olaItemBis propsCount subFamilyCount;
} 

#exemple {
    counter-reset: ol1Item olaItem olaItemBis propsCount;              
} 

h1 ~ .point-title::before {
    content: counter(propsCount, decimal) ') ';
}

.point-title.prop a::before  {
    content: 'Propriété ' counter(propsCount, decimal) ' - ' ;
}

.point-title.prop.en a::before  {
    content: 'Property ' counter(propsCount, decimal) ' - ';
}

.point-title.criteria a::before  {
    content: 'Critère ' counter(propsCount, decimal) ' - ' ;
}

.point-title.criteria.en a::before  {
    content: 'Criteria ' counter(propsCount, decimal) ' - ';
}

.point-title.prop, .point-title.criteria {
    font-family: 'scholar', sans-serif;
}

.tnw {
   .point-title.prop, .point-title.criteria {
        font-family: 'tnw', 'Times New Roman', sans-serif;
    } 
}




/* subElementsPropsCount */

h1 ~ ol[type="1"] {
    counter-reset: ol1Item;
}

h1 ~ ol[type="1"] > li {
    counter-increment: ol1Item;
}

h1 ~ .point-title ~ ol[type="1"] > li::marker {
    content: counter(propsCount, decimal) '-' counter(ol1Item, decimal) ') ';
} 

@media print {
    h1 ~ .point-title ~ ol[type="1"] > ol[type="a"] {
        padding-inline-start: 20px;
    }
}


h1 ~ ol[type="1"] > ol[type="a"] {
    margin-top: 20px; margin-bottom: 30px;
    counter-reset: olaItem;
}

h1 ~ ol[type="1"] > ol[type="a"] > li {
    counter-increment: olaItem;
    counter-reset: olaItemBis;
}

h1 ~ .point-title ~ ol[type="1"] > ol[type="a"] > li::marker {
    content: counter(propsCount, decimal) '-' counter(ol1Item, decimal) '-' counter(olaItem, lower-alpha) ') ';
} 



h1 ~ ol[type="1"] > ol[type="a"] > ol[type="1"] > li {
    counter-increment: olaItemBis;
}

h1 ~ .point-title ~ ol[type="1"] > ol[type="a"] > ol[type="1"] > li::marker {
    content: counter(propsCount, decimal) '-' counter(ol1Item, decimal) '-' counter(olaItem, lower-alpha) '-' counter(olaItemBis, decimal) ') ';
} 

h1 ~ ol[type="1"] > ol[type="a"] > ol[type="1"] {
    margin-top: 20px; margin-bottom: 30px;
}


h1 ~ ol[type="1"] {
    margin-top: 30px; margin-bottom: 30px;
}

h1 ~ ol[type="1"] > li {
    margin-top: 30px;
}


h1 ~ ol li::marker {
    font-family: 'nb-scholar', 'scholar', sans-serif;
}

.tnw {
    h1 ~ ol li::marker {
        font-family: 'tnw', 'Times New Roman', sans-serif;
    }
}


h1 ~ #exemple ~ ol[type="1"] > li::marker {
    content: counter(ol1Item, decimal) ') ';
} 
h1 ~ #exemple ~ ol[type="1"] > ol[type="a"] > li::marker {
    content: counter(ol1Item, decimal) '-' counter(olaItem, lower-alpha) ') ';
} 
h1 ~ #exemple ~ ol[type="1"] > ol[type="a"] > ol[type="1"] > li::marker {
    content: counter(ol1Item, decimal) '-' counter(olaItem, lower-alpha) '-' counter(olaItemBis, decimal) ') ';
} 

/* h1 ~ #exemple ~ ol[type="1"] {
    font-family: 'scholar', sans-serif;
}

.tnw {
    h1 ~ #exemple ~ ol[type="1"] {
        font-family: 'tnw', 'Times New Roman', sans-serif;
    }
} */


h1 ~ ol[type="a"] {
    margin-top: 20px; margin-bottom: 20px;
    counter-reset: olaItemBis;
}

h1 ~ ol[type="a"] > li {
    counter-increment: olaItemBis;
}

/* h1 ~ .point-title ~ ol[type="1"] > li::marker {
    content: counter(propsCount, decimal) '-' counter(ol1Item, lower-alpha) ') ';
}  */


h1 ~ ol[type="a"] > li::marker {
    content: counter(propsCount, decimal) '-' counter(olaItemBis, lower-alpha) ') ';
} 

h1 ~ .sub-family {
    counter-reset: propsCount;
    counter-increment: subFamilyCount;
}

h1 ~ .sub-family::before {
    content: counter(subFamilyCount, upper-alpha) ' - ';
}

h1 ~ .sub-family ~ .point-title {
   counter-increment: propsCount;
}

h1 ~ .sub-family ~ .point-title::before {
    content: counter(subFamilyCount, upper-alpha) '-' counter(propsCount, decimal) ') ';
    color: var(--blue-text);
}


h1 ~ .sub-family ~ .point-title ~ ol[type="1"] > li::marker {
    content: counter(subFamilyCount, upper-alpha) '-' counter(propsCount, decimal) '-' counter(ol1Item, decimal) ') ';
    text-decoration: underline;
} 

h1 ~ .sub-family ~ .point-title ~ ol[type="1"] > ol[type="a"] > li::marker {
    content: counter(subFamilyCount, upper-alpha) '-' counter(propsCount, decimal) '-' counter(ol1Item, decimal) '-' counter(olaItem, lower-alpha) ') ';;
    text-decoration: underline;
} 


h1 ~ .sub-family ~ .point-title ~ ol[type="1"] {
    padding-inline-start: 65px;
}

@media (width <= 450px) {
    h1 ~ .sub-family ~ .point-title ~ ol[type="1"] > ol[type="a"] {
        padding-inline-start: 10px;
    }

    h1 ~ .sub-family ~ .point-title ~ ol[type="1"] > *:not(ol):not(li):not(.aside):not(.focus) {
        position: relative;
        left: -22% !important;
        width: 82vw;
    }

    h1 ~ .sub-family ~ .point-title ~ ol[type="1"] .aside {
        position: relative;
        left: -20%;
        width: 70vw;
    }

}

.example, .further {
    border: 2px solid var(--grey-lighter);
    box-shadow: 5px 2px 8px 1px var(--grey-lighter);
    font-size: calc(var(--paragraph-font-size)*1);
    padding: 20px;
    text-align: center;
    width: fit-content;
    margin: 40px auto;
    counter-reset: exampleCount;
}

.example ~ .point-title {
    counter-increment: exampleCount;
}

.example ~ .point-title::before {
    content: 'Exemple ' counter(exampleCount) ' : ' !important;
}

.example ~ ol[type="a"] {
    counter-reset: subExampleCount;
} 

.example ~ ol[type="a"] > li {
    counter-increment: subExampleCount;
} 

.example ~ ol[type="a"] > li::marker {
    content: counter(subExampleCount, lower-alpha) ') ';
} 

h1 ~ .example ~ ol[type="1"] > li::marker {
    content: counter(exampleCount, decimal) '-' counter(ol1Item, decimal) ') ';
} 

h1 ~ .example ~ ol[type="1"] > ol[type="a"] > li::marker {
    content: counter(exampleCount, decimal) '-' counter(ol1Item, decimal) '-' counter(olaItem, lower-alpha) ') ';
} 


/* bodyExempleCount (body) */
.no-num::before {
    content: '' !important;
}

.no-num {
    display: list-item;
    margin-left : 1em;
}

.no-num::marker {
   color: var(--blue-light-2);
}

.no-num  ~ p {
    margin-left : 1em;
}

ul > li {
    margin-top: 0px;
    list-style-type: circle;
    font-style: italic ;    
}

ul > li::marker {
    color: var(--blue-text);
}


ul > li::marker {
    vertical-align: middle;
}


ul > li {
    vertical-align: middle;
}

ul.aligned, ol.aligned {
    padding-inline-start: 10px;
}

ol[type="circle"]::marker,  li[type="circle"]::marker {
    color: grey;
}


.case {
    border-bottom: 1px solid var(--green-darker-2) !important;
    width: fit-content;
    color: var(--green-darker) !important;
    font-style: italic;
    padding-bottom: 2px;
}

.case-title {
    font-style: normal;
}

li:has(> .case)::marker {
    color: var(--green-darker);
}

/* END BULLETS */