/*
Theme Name: niko26
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

*[style*='margin-top:-'] {
    position: relative;
    z-index: 1;
} 

/* main course categories */
.terms-list {
    --gap: 1.5rem;
    list-style: none;
    margin: var(--gap) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.terms-list li {
    flex-basis: 100%;
    aspect-ratio: 2/1;
    position: relative;
    background-size: cover;
    background-position: center center;
}
@media screen and (min-width: 800px) {
    .terms-list li {
        flex-basis: calc(50% - var(--gap)/2);
        aspect-ratio: 3/2;
    }    
}
.terms-list li a {
    color: var(--wp--preset--color--base);
    text-decoration: none;
    display: block;
    height: 100%;
}
.terms-list li h2 {
    background-color: var(--wp--preset--color--contrast);
    margin: 0;
    padding: .5rem;
    font-size: 1.8rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* courses by level */
div.niveau-technique.nt-debutant {
    --color: var(--wp--preset--color--custom-debutant);
    --text: var(--wp--preset--color--contrast);
}
div.niveau-technique.nt-intermediaire {
    --color: var(--wp--preset--color--custom-intermediaire);
    --text: var(--wp--preset--color--base);
}
div.niveau-technique.nt-confirme {
    --color: var(--wp--preset--color--custom-confirme);
    --text: var(--wp--preset--color--base);
}
div.niveau-technique.nt-expert {
    --color: var(--wp--preset--color--custom-expert);
    --text: var(--wp--preset--color--base);
}
div.niveau-technique h2 {
    color: var(--color);
}

.courses-list {
    --gap: 1.5rem;
    list-style: none;
    margin: var(--gap) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
.courses-list li {
    --pad: 1rem;
    --radius: 1rem;
    background-color: var(--color);
    color: var(--text);
    box-sizing: border-box;
    flex-basis: calc((100% - var(--gap)*2)/3);
    min-width: 250px;
    border-radius: var(--radius);
    padding: var(--pad);
    min-height: 400px;
}
.courses-list a {
    color: var(--text);
    text-decoration: none;
}
.courses-list h3 {
    margin: 0 0 .5rem;
}
.courses-list img { 
    width: calc(100% + var(--pad) * 2);
    margin: 1rem calc(var(--pad) * -1) calc(var(--pad) * -1);
    display: block;
    border-radius: 0 0 var(--radius) var(--radius);
}

.courses-list.h-scroll {
    flex-wrap: nowrap;
    overflow: auto;
    scroll-snap-type: x mandatory;
}
.courses-list.h-scroll li {
    scroll-snap-align: start;
}



/* BUGFIXE : link is wrapping block level elements */
.courses-list p {
    margin: 0; 
}
.courses-list br + h3 {
    margin-top: -1rem;
}

/* Course detail */
p.niveau-technique {
    display: flex;
    gap: 0.5em;
    align-items: center;
}
p.niveau-technique span {
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iaWNvbi1tb3VudGFpbi5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMGJldGEyICgyYjcxZDI1LCAyMDE5LTEyLTAzKSIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDEwOC44OTg1NiA1OS40MjU4MjMiCiAgIGhlaWdodD0iNTkuNDI1ODIzbW0iCiAgIHdpZHRoPSIxMDguODk4NTZtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjIzIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEzOTUiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMjgwIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC1yb3RhdGlvbj0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIGlua3NjYXBlOmN5PSIzNzguODg2NzIiCiAgICAgaW5rc2NhcGU6Y3g9IjE5OC44ODY3MiIKICAgICBpbmtzY2FwZTp6b29tPSIwLjM1IgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGlkPSJiYXNlIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUzLjIxMTIyMSwtNDcuOTE5NTU1KSIKICAgICBpZD0ibGF5ZXIxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IkNhbHF1ZSAxIj4KICAgIDxwYXRoCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgZD0iTSAxMjAuNjAwMTQsNDcuOTE5NTU1IDk0LjQ5NDQ2MSw4NS4yOTI5ODUgODIuMjEwMzA5LDY5LjA4NjIyMSA1My4yMTEyMjEsMTA3LjM0NTM4IEggMTYyLjEwOTc4IFoiCiAgICAgICBzdHlsZT0iZmlsbDojYmJiYmJiO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDowLjIzMDM0OTtmaWxsLW9wYWNpdHk6MSIKICAgICAgIGlkPSJyZWN0ODM3IiAvPgogIDwvZz4KPC9zdmc+Cg==) repeat 0 0;
    background-size: contain;
    display: inline-flex;
    height: 13px;
    width: 96px;
}
p.niveau-technique i {
    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgc29kaXBvZGk6ZG9jbmFtZT0iaWNvbi1tb3VudGFpbi1ibGFjay5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMy1kZXYgKDc3YmM3M2UsIDIwMjItMDUtMTgpIgogICBpZD0ic3ZnOCIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMTA4Ljg5ODU2IDU5LjQyNTgyMyIKICAgaGVpZ2h0PSI1OS40MjU4MjNtbSIKICAgd2lkdGg9IjEwOC44OTg1Nm1tIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMiIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMjMiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTM5NSIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEyODAiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3k9IjM4NC4yODU3MSIKICAgICBpbmtzY2FwZTpjeD0iNzguNTcxNDI5IgogICAgIGlua3NjYXBlOnpvb209IjAuMzUiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgaWQ9ImJhc2UiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgICBpbmtzY2FwZTpkZXNrY29sb3I9IiNkMWQxZDEiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTMuMjExMjIxLC00Ny45MTk1NTUpIgogICAgIGlkPSJsYXllcjEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpbmtzY2FwZTpsYWJlbD0iQ2FscXVlIDEiPgogICAgPHBhdGgKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBkPSJNIDEyMC42MDAxNCw0Ny45MTk1NTUgOTQuNDk0NDYxLDg1LjI5Mjk4NSA4Mi4yMTAzMDksNjkuMDg2MjIxIDUzLjIxMTIyMSwxMDcuMzQ1MzggSCAxNjIuMTA5NzggWiIKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjAuMjMwMzQ5O2ZpbGwtb3BhY2l0eToxIgogICAgICAgaWQ9InJlY3Q4MzciIC8+CiAgPC9nPgo8L3N2Zz4K) repeat 0 0;
    background-size: contain;
    display: block;
    filter: brightness(0) saturate(100%) invert(84%) sepia(39%) saturate(2850%) hue-rotate(7deg) brightness(100%) contrast(92%);
    /* filter: invert(74%) sepia(32%) saturate(911%) hue-rotate(27deg) brightness(99%) contrast(82%); */
    height: 100%;
    width: 25%;
}
p.niveau-technique.nt-intermediaire i {
    filter: brightness(0) saturate(100%) invert(55%) sepia(43%) saturate(653%) hue-rotate(51deg) brightness(99%) contrast(91%);
    /* filter: invert(80%) sepia(6%) saturate(3611%) hue-rotate(155deg) brightness(86%) contrast(93%); */
    width: 50%;
}
p.niveau-technique.nt-confirme i {
    filter: brightness(0) saturate(100%) invert(51%) sepia(72%) saturate(649%) hue-rotate(158deg) brightness(86%) contrast(93%);
    /* filter: invert(37%) sepia(86%) saturate(7393%) hue-rotate(318deg) brightness(106%) contrast(102%); */
    width: 75%;
}
p.niveau-technique.nt-expert i {
    filter: brightness(0) saturate(100%) invert(33%) sepia(46%) saturate(6040%) hue-rotate(345deg) brightness(79%) contrast(94%);
    /* filter: invert(77%) sepia(4%) saturate(5%) hue-rotate(18deg) brightness(92%) contrast(95%); */
    width: 100%;
}

/* Homepage */
body.home footer.wp-block-template-part {
    margin-top: 0;
}

/* layout */
.wp-block-navigation li.current-menu-item,
.wp-block-navigation li.current-menu-ancestor {
    border-bottom: 1px solid var(--wp--preset--color--accent-1);
}