/*
Nova
Le Studio, 2024, 2025
*/

@import 'vars.css';

/*
    SUMMARY :
- RESET
- DEFAULTS
- PAGE STRUCTURE & GRIDS
- NAVIGATION
- FORMS
- TABLES
- BLOCKS
- EDITORIAL
- TOOLS/UTILITIES
- MEDIA QUERIES
*/

/* ------------ RESET ---------------- */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,dfn,em,form,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,
ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,
td,html,header,footer,main,nav,aside,article,section,figure,figcaption
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ------------------- DEFAULTS ---------------- */


body {
    font: 100% var(--stack);
    font-variation-settings: var(--fvs-regular);
    color: var(--body-text);
    background-color: var(--body-bg);
}

h1 {
    font-variation-settings: var(--fvs-light);
    font-size: 1.25rem;
    font-weight: normal;
} 

h2 {
    font: normal 1.2rem var(--stack-h2);
    text-transform: uppercase;
    margin-bottom: 1em;
} 

h3 {
    font: normal 1.2rem var(--stack-h3);
    margin-bottom: 1em;

    & a {
        font-size: 90%;
    }
} 

h4 {
    font: normal 1.1rem var(--stack-h2);
    margin-bottom: 1em;
}

h5 {
    font: normal 1rem var(--stack);
    font-variation-settings: var(--fvs-bold);
    margin-bottom: 1em;
}

a {
    color: var(--h3-link);
    text-decoration: none;
    font: 100% var(--stack);
    font-variation-settings: var(--fvs-bold);
    
    & span {
        text-transform: uppercase;
    }
}

a[target]::after {
    content: 'Ouvre un nouvel onglet';
    display: inline-block;
    overflow: hidden;
    text-indent: 50px;
    white-space: nowrap;
    width: 16px;
    height: 16px;
    background: url('../svg/external-link.svg') no-repeat 0 0.1em;
}

p, li, dt, dd, th, td {
    font-size: 0.9em;
}

li p, li li, li dt, li dd {
    font-size: 100%;
}

strong {font-variation-settings: var(--fvs-bold);}

:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}


button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;    
    font: 100%/1 var(--stack);    
    text-align: center;
    color: var(--button-color);
    background-color: var(--button-bg);
    padding: 0.5rem 1rem;
    border-radius: 0.2em;
    border: 1px solid var(--button-bg);
    cursor: pointer;

    & svg {
        fill: currentColor;
        flex: 0 0 24px;
        transform: scale(0.75);
    }

    & svg.vertical {
        transform: rotate(90deg) scale(0.75);
    }
}

button:not(:disabled):hover {
    opacity: 0.8;
}

button:has(svg) {
    gap: 0.5rem;
    text-align: left;
}

.svg-only {
    width: calc(26px + 1rem);
    overflow-x: hidden;
    justify-content: start;
    white-space: nowrap;
    padding-left: 0.49rem;
    gap: 10rem;

    & svg {
        transform: none;
    }
}

button.delete {
    min-height: initial;
    background-color: transparent;
    border: none;
    padding: 0;

    & svg {
        fill: var(--primary-black);
    }
}

button.reset {
    color: var(--button-reset-text);
    background-color: var(--button-bg-reset);
    border: 1px solid var(--button-reset-border);
}

button.secondary {
    color: var(--button-sec-text);
    background-color: var(--button-bg-sec);
    border: 1px solid var(--button-sec-border);
}

.double-icon {
    padding-left: 0.5rem;

    & span.icon {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    & span.icon::before {
        display: block;
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        background-color: currentColor;
        background-color: color-mix(in srgb, currentColor, var(--main-color) 20%);
    }
}

.double-icon.svg-only {
    width: 78px;
}

button.discreete {
    width: 26px;
    height: 26px;
    min-height: 0;
    color: var(--main-color);
    background-color: var(--body-bg);
    padding: 0;
    border: none;
}

.badged {position: relative;}
span.badge {
    position: absolute;
    display: block;
    width: 1.5em;
    height: 1.5em;
    top: 8px;
    right: 8px;
    font-size: 0.75em;
    text-align: center;
    align-content: center;
    font-variation-settings: var(--fvs-bold);
    color: var(--body-bg);
    background-color: var(--body-text);
    border-radius: 1.5em;
}

button.double-icon.svg-only {
    & span.badge {
        top: -9px;
        right: -4px;
        color: var(--main-color);
        background-color: var(--body-bg);
    }
}

a.single-action {display: block;}


/* -------------------- PAGE STRUCTURE & GRIDS ------------------------ */

main {
    box-sizing: border-box;
    max-width: 1800px;
    padding: 1rem;
    margin: 0 auto;
}

.top-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;

    & h1 {
        padding: 0.2rem 0 0.25rem 0.75rem;
        border-bottom: 1px solid var(--shade-grey-1);
        border-left: 8px solid var(--shade-grey-1);
    }

    & h3 {
        font: normal 1.2rem var(--stack-h2);
        text-transform: uppercase;
        margin-bottom: 0;
    }

    & h3 small {
        display: block;
        font: 80%/2 var(--stack);
        text-transform: none;
    }
}


/* -------------------- NAVIGATION ------------------------ */


body > header {
    position: relative;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 12px 1px rgba(0, 0, 0, 0.25);
    z-index: 2000;
}

#main-nav {
    overflow: hidden;
    height: 1px;
    color: var(--main-nav-text);
    background-color: var(--main-nav-bg);
    transition: all 0.2s;
    opacity: 0;

    & ul {
        display: none;
        max-width: 1800px;
        list-style-type: none;
        padding: 0 1rem;
        margin: 0 auto;
    }

    & li {
        font-size: 0.95em;
    }

    & a, a:visited {
        display: block;
        font-variation-settings: var(--fvs-regular);
        color: var(--main-nav-text);
        background-color: var(--main-nav-bg);
        padding: 1.5rem 2rem;
    }

    & a[aria-current], a:hover {
        position: relative;
        color: var(--main-nav-selected-text);
        background-color: var(--main-nav-selected-bg);
    }
    
    & a[aria-current]::before, a:hover::before {
        display: block;
        position: absolute;
        content: "";
        width: 100%;
        height: 5px;
        top: -5px;
        left: 0;
        background-color: var(--main-color);
    }

    & a:focus-visible {outline-color: var(--main-nav-text);}
    
    & a[aria-current]:focus-visible {
        outline-color: var(--main-color);
    }

    & p.k-skip {display: none;}
}

button#nav-control {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 0.5rem;
    right: 0.5rem;
    text-align: center;
    color: var(--main-color);
    background-color: var(--main-nav-text);
    padding: 0;
    border: none;
    z-index: 1000;
}

#main-nav.active {
    height: 100%;
    top: 0;
    opacity: 1;

    & ul, p.k-skip {display: block;}
}

button#nav-control svg {fill: var(--main-color);}

/* Secondary nav */

nav.secondary {
    height: auto;
    padding: 1rem;
    margin-bottom: 1.75rem;
    border-top: 0.25rem solid var(--panel-border);
    box-shadow: 0px 8px 12px 0px #00000029;

    & button.control {
        width: 100%;
        min-height: initial;
        font: normal 1.2rem var(--stack-h2);
        justify-content: flex-start;
        text-transform: uppercase;
        color: var(--body-text);
        background-color: var(--body-bg);
        padding: 0;
        border: none;
    }

    & button.control svg {
        margin-left: auto;
        transform: rotate(180deg);
    }

    & ul {
        width: calc(100% + 1rem + 5px);
        list-style-type: none;
        margin-left: calc(-1rem + 5px);
    }

    & a, a:visited {
        display: block;
        font: 0.95em var(--stack);
        font-variation-settings: var(--fvs-regular);
        color: var(--bdy-text);
        background-color: var(--body-bg);
        background-repeat: no-repeat;
        background-position: 0.75em 0.65em;
        background-size: 24px 24px;
        padding: 1em 1em 1em calc(1rem + 34px);
    }
    & a:hover, a[aria-current] {
        background-color:var(--main-light);
        box-shadow: -5px 0 0 var(--main-color);
    }
    & a:focus-visible {
        outline-offset: -2px;
    }

    .fd-identity {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6H21V18H3V6ZM2 4C1.44772 4 1 4.44772 1 5V19C1 19.5523 1.44772 20 2 20H22C22.5523 20 23 19.5523 23 19V5C23 4.44772 22.5523 4 22 4H2ZM13 8H19V10H13V8ZM18 12H13V14H18V12ZM10.5 10C10.5 11.3807 9.38071 12.5 8 12.5C6.61929 12.5 5.5 11.3807 5.5 10C5.5 8.61929 6.61929 7.5 8 7.5C9.38071 7.5 10.5 8.61929 10.5 10ZM8 13.5C6.067 13.5 4.5 15.067 4.5 17H11.5C11.5 15.067 9.933 13.5 8 13.5Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-social-data {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3V19H21V21H3V3H5ZM20.2929 6.29289L21.7071 7.70711L16 13.4142L13 10.415L8.70711 14.7071L7.29289 13.2929L13 7.58579L16 10.585L20.2929 6.29289Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-agreements {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4H5V20H19V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H19.9997C20.5519 2 20.9996 2.44772 20.9997 3L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918ZM11.2929 13.1213L15.5355 8.87868L16.9497 10.2929L11.2929 15.9497L7.40381 12.0607L8.81802 10.6464L11.2929 13.1213Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-family {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9C8.38071 9 9.5 7.88071 9.5 6.5C9.5 5.11929 8.38071 4 7 4C5.61929 4 4.5 5.11929 4.5 6.5C4.5 7.88071 5.61929 9 7 9ZM7 11C4.51472 11 2.5 8.98528 2.5 6.5C2.5 4.01472 4.51472 2 7 2C9.48528 2 11.5 4.01472 11.5 6.5C11.5 8.98528 9.48528 11 7 11ZM17.5 13C18.6046 13 19.5 12.1046 19.5 11C19.5 9.89543 18.6046 9 17.5 9C16.3954 9 15.5 9.89543 15.5 11C15.5 12.1046 16.3954 13 17.5 13ZM17.5 15C15.2909 15 13.5 13.2091 13.5 11C13.5 8.79086 15.2909 7 17.5 7C19.7091 7 21.5 8.79086 21.5 11C21.5 13.2091 19.7091 15 17.5 15ZM20 21V20.5C20 19.1193 18.8807 18 17.5 18C16.1193 18 15 19.1193 15 20.5V21H13V20.5C13 18.0147 15.0147 16 17.5 16C19.9853 16 22 18.0147 22 20.5V21H20ZM10 21V17C10 15.3431 8.65685 14 7 14C5.34315 14 4 15.3431 4 17V21H2V17C2 14.2386 4.23858 12 7 12C9.76142 12 12 14.2386 12 17V21H10Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-center {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 20H23V22H1V20H3V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V20ZM19 20V4H5V20H19ZM8 11H11V13H8V11ZM8 7H11V9H8V7ZM8 15H11V17H8V15ZM13 15H16V17H13V15ZM13 11H16V13H13V11ZM13 7H16V9H13V7Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-tags {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.00488 6.99972L11.4502 1.36952C11.7861 1.14559 12.2237 1.14559 12.5596 1.36952L21.0049 6.99972V20.9997C21.0049 21.552 20.5572 21.9997 20.0049 21.9997H4.00488C3.4526 21.9997 3.00488 21.552 3.00488 20.9997V6.99972ZM5.00488 8.07009V19.9997H19.0049V8.07009L12.0049 3.40342L5.00488 8.07009ZM8.00488 15.9997H16.0049V17.9997H8.00488V15.9997ZM8.00488 12.9997H16.0049V14.9997H8.00488V12.9997ZM12.0049 10.9997C10.9003 10.9997 10.0049 10.1043 10.0049 8.99972C10.0049 7.89515 10.9003 6.99972 12.0049 6.99972C13.1095 6.99972 14.0049 7.89515 14.0049 8.99972C14.0049 10.1043 13.1095 10.9997 12.0049 10.9997Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-prefs {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 14V16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM14.5946 18.8115C14.5327 18.5511 14.5 18.2794 14.5 18C14.5 17.7207 14.5327 17.449 14.5945 17.1886L13.6029 16.6161L14.6029 14.884L15.5952 15.4569C15.9883 15.0851 16.4676 14.8034 17 14.6449V13.5H19V14.6449C19.5324 14.8034 20.0116 15.0851 20.4047 15.4569L21.3971 14.8839L22.3972 16.616L21.4055 17.1885C21.4673 17.449 21.5 17.7207 21.5 18C21.5 18.2793 21.4673 18.551 21.4055 18.8114L22.3972 19.3839L21.3972 21.116L20.4048 20.543C20.0117 20.9149 19.5325 21.1966 19.0001 21.355V22.5H17.0001V21.3551C16.4677 21.1967 15.9884 20.915 15.5953 20.5431L14.603 21.1161L13.6029 19.384L14.5946 18.8115ZM18 19.5C18.8284 19.5 19.5 18.8284 19.5 18C19.5 17.1716 18.8284 16.5 18 16.5C17.1716 16.5 16.5 17.1716 16.5 18C16.5 18.8284 17.1716 19.5 18 19.5Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .fd-pwd {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 8V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6ZM19 10H5V20H19V10ZM11 15.7324C10.4022 15.3866 10 14.7403 10 14C10 12.8954 10.8954 12 12 12C13.1046 12 14 12.8954 14 14C14 14.7403 13.5978 15.3866 13 15.7324V18H11V15.7324ZM8 8H16V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-email-mod {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V13H20V7.23792ZM19.501 5H4.51146L12.0619 11.662L19.501 5ZM17.05 19.5485C17.0172 19.3706 17 19.1873 17 19C17 18.8127 17.0172 18.6294 17.05 18.4515L16.0359 17.866L17.0359 16.134L18.0505 16.7197C18.3278 16.4824 18.6489 16.2948 19 16.1707V15H21V16.1707C21.3511 16.2948 21.6722 16.4824 21.9495 16.7197L22.9641 16.134L23.9641 17.866L22.95 18.4515C22.9828 18.6294 23 18.8127 23 19C23 19.1873 22.9828 19.3706 22.95 19.5485L23.9641 20.134L22.9641 21.866L21.9495 21.2803C21.6722 21.5176 21.3511 21.7052 21 21.8293V23H19V21.8293C18.6489 21.7052 18.3278 21.5176 18.0505 21.2803L17.0359 21.866L16.0359 20.134L17.05 19.5485ZM20 20C20.5523 20 21 19.5523 21 19C21 18.4477 20.5523 18 20 18C19.4477 18 19 18.4477 19 19C19 19.5523 19.4477 20 20 20Z'%3E%3C/path%3E%3C/svg%3E");
    }
    .fd-config {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 18V21H19V18H17V15H23V18H21ZM5 18V21H3V18H1V15H7V18H5ZM11 6V3H13V6H15V9H9V6H11ZM11 11H13V21H11V11ZM3 13V3H5V13H3ZM19 13V3H21V13H19Z'%3E%3C/path%3E%3C/svg%3E");
    }
}

nav.secondary.collapsed {
    box-sizing: border-box;
    overflow: hidden;
    /* width: calc(24px + 2rem); */
    height: 3.8rem;

    /* & button.control {
        overflow: hidden;
        width: 24px;
        height: 24px;
        white-space: nowrap;
    } 

    & button.control span {
        display: none;
    }*/

    & button.control svg {
        transform: none;
    }

    & a {
        box-sizing: border-box;
        overflow: hidden;
        width: calc(18px + 2rem);
        text-indent: 50rem;
        white-space: nowrap;
        padding: 1em 0;
    }
    & a:focus-visible {
        outline-offset: -4px;
    }
}


/* Nav tools items in header */
div.top-header {
    max-width: 1800px;
    padding: 1rem;
    margin: 0 auto;
}
div.tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    list-style-type: none;
    padding: 1rem 0 0.65rem;
    margin: 0 1rem;
    border-top: 1px solid var(--border-grey);

    & ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        list-style-type: none;
    }

    & dd.structure {
        font-variation-settings: var(--fvs-bold);
        text-transform: uppercase;
        margin-top: 0.25em;
    }
}

div.tools.active {
    display: none;
}


p.site-identity {
    font-size: 1.2em;
    font-variation-settings: var(--fvs-black);
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--main-color);
    background-color: var(--body-bg);
}


/* ----------------- FORMS ----------------------- */

input:not([type=radio], [type=checkbox], [type=submit], [type=reset], [type=button]) {
    font: 100%/1 var(--stack);
    background-color: var(--body-bg);
    padding: 0.25rem;
    border: 1px solid var(--body-text);
}
textarea{
    font: 100%/1 var(--stack);
}

.input-block {
    background-color: var(--input-bg);
    padding: 0.5rem 0.5rem 0.25rem 0.7rem;
    border-left: 1px solid var(--input-border);
    border-top: 1px solid var(--input-border);
    border-right: 1px solid var(--input-border);
    border-bottom: 1px solid black;

    & label {
        display: block;
        font-size: 85%;
    }

    & input {
        width: 100%;
        min-height: 2em;
        background-color: inherit;
        padding: 0.25rem 0 0;
        border: none;
    }
}

.input-block:focus label {
    color: var(--primary-green);
}

.input-block :focus-visible {
    outline: none;
}

.input-block:has(:focus-visible) {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}


p.input-block:has(input[aria-required=true]) label::after {
    content: "*";
    color: var(--primary-red);
}

.input-block.conditional {
    position: relative;
    margin-left: 20px;
}
.input-block.conditional::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: -17px;
    border-left: 1px solid var(--shade-grey-2A);
    border-bottom: 1px solid var(--shade-grey-2A);
}

select {
    appearance: none;
    min-height: 2em;
    font: 100%/1 var(--stack);
    background-color: var(--body-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H24V24H0Z' style='fill:none'/%3E%3Cpath d='M12,13.06l4.95-5,1.41,1.41L12,15.89,5.64,9.52,7.05,8.11Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px;
	background-position: right 0.25em top 50%;
    padding: 0.25rem 24px 0 0.25em;
    border: 1px solid var(--body-text);
    cursor: pointer;
}

.input-block select {
    width: 100%;
    background-color: var(--input-bg);
    background-size: 33px;
    border: none;
}

.input-block:has(select:focus) {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

.required {    
    color: var(--primary-red);
}

.comment {
    display: block;
    font-size: 85%;
    font-style: italic;
    padding-top: 0.25rem;
    margin: 0.25rem 0;
    border-top: 1px solid var(--shade-grey-3);
}


/* ERROR */

div.content .input-block.error {
    outline: 2px solid var(--primary-red);
}

.input-error {
    font-size: 90%;
    font-variation-settings: var(--fvs-medium);
    color: var(--primary-white);
    background-color: var(--primary-red);
    padding: 0.5rem 1rem 0.25rem;
    outline: 2px solid var(--primary-red);
}
fieldset > .content * + .input-error {
    margin-top: 0;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    div.content .group {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;

        p span.required {
            display: none;
        }
    }

    div.content .group .radio-group {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    div.content .group .radio-group p{
        display: inline-flex;
        align-items: end;
        gap: 0.25rem;
    }

    div.cb-block {
        display: flex;
        align-items: center;
        gap: 0.5rem 1em;

        & input {vertical-align: -0.2em;}
    }
} 

fieldset {
    container-type: inline-size;
    container-name: fieldgroup;
    border: 2px solid var(--fieldset-border);
    padding: 0 0.5rem;
}

fieldset > .content {
    position: relative;
    padding: 1rem 0.5rem;

    /*
    & > *:not([style*="display: none"],.hidden) + * {
        margin-top: 1rem;
    }
    */
}



fieldset.choice {
    padding: 0;
    border: none;

    & legend {
        font-variation-settings: var(--fvs-bold);
        text-transform: initial;
        padding: 0.5rem 0;
    }

    & input {
        vertical-align: bottom;
    }

    & .group {
        display: flex;
        gap: 1rem;
    }

    & ul {
        display: flex;
        flex-direction: column;
        gap: 0.5em 1em;
        list-style-type: none;
    }
}

fieldset.choice:has(div.along) + fieldset.choice:has(div.along) div.along {    
    padding-top: 1rem;
    border: none;
    border-top: 1px dotted var(--shade-grey-1);
}

fieldset.choice.vertical {
    & .group {
       flex-direction: column;
    }
}

fieldset.choice.flat {
    position: relative;
    min-height: 2rem;

    & legend {
        position: absolute;
        width: 50%;
    }
    & div.group {
        position: absolute;
        justify-content: end;
        width: 50%;
        right: 0;
    }
}

fieldset.legendless legend {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

fieldset.switch {
    border: none;
    padding: 0;
    margin-bottom: 1rem;
}

fieldset.switch legend {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

fieldset.switch ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}

fieldset.switch label {
    display: block;
    text-align: center;
    padding: 0.5rem 1rem;
    background-color: var(--switch-bg);
    border: 1px solid var(--switch-border);
    cursor: pointer;
}

fieldset.switch li:first-of-type label {
    border-radius: 1rem 1rem 0 0;
}

fieldset.switch li:last-of-type label {
    border-radius: 0 0 1rem 1rem;
}

fieldset.switch input:checked + label {
    background-color: var(--switch-bg-checked);
    color: var(--switch-text-checked);
}

fieldset.switch input:focus-visible + label {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

fieldset.switch input {
    position: absolute;
    left: -10000px;
    border: none;
}

fieldset.switch input[type="radio"]:checked::before {
    transform: scale(0);
}

fieldset.display-mode {
    align-content: center;
}

legend {
    font-size: 0.9em;
    text-transform: uppercase;
    color: var(--legend-text);
    padding: 0 0.5rem;
}

.block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

div.label-less {
    border: 0;
}

div.label-less label, p.label-less label {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

p.label-less select {
    margin: 0 1rem 0 1rem;
}

p.label-less input {
    padding: 0.5rem 0 0.5rem 1rem;
}

.full input:not([type="checkbox"], [type="radio"]) {
    width: calc(100% - 1rem - 2px);
}


.input-wrapper, .block-wrapper {
    display: grid;
    gap: 0.5rem;
}

.input-block.textarea-block {
    position: relative;

    & textarea {
        box-sizing: border-box;
        width: 100%;
        font-family: var(--stack);
        background: var(--input-bg);
        padding: 1rem 0 0;
        margin-top: -1px;
        border: none;
        resize: none;
    }

    & p.counter {
        font-size: 0.9em;
        text-align: right;
        margin-bottom: 0.25rem;
    }
    
    & button.discreete {
        background-color: transparent;
        margin-left: 1rem;
        vertical-align: middle;
    }
}

.whole input {
    width: calc(100% - 1.25rem);
}

.input-block.search-bar::before {
    content: url("../svg/search.svg");
    position: absolute;
    width: 25px;
    height: 25px;
    top: calc(50% - 13px);
    left: 0.9rem;
    z-index: 1;
}

.input-block.search-bar label {
    padding-left: 2rem;
}

.input-block.search-bar input {
    width: 100%;
    padding: 0.5rem 0.5rem 0.5em 2.5rem;
}

.input-block.addiction {
    position: relative;
}

.input-block.addiction::after {
    content: url("../svg/arrow-bottom.svg");
    position: absolute;
    z-index: 999;
    bottom: calc(100% - 2.5rem);
    left: calc(100% - 2.1rem);
}

.input-block:has(input:focus) label {
    color: var(--primary-green);
}

input[type=submit] {
    font: 100% var(--stack);
    color: var(--body-bg);
    background-color: var(--main-color);
    padding: 0.5rem 1rem;
    border: none;
    border: 1px solid var(--button-bg);
    border-radius: 0.2em;
    cursor: pointer;
}

p.textarea-block {
    position: relative;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);

    & textarea {
        width: calc(99% - 2rem);
        min-height: 4em;
        font: 100%/1 var(--stack);
        background-color: var(--input-bg);
        margin: 1rem 1rem 0;
        border: none;
        border-bottom: 1px solid var(--input-border);
        resize: vertical;
    }

    & label {
        position: static;
        display: block;
        font-size: 85%;
        padding: 0.7rem 0 0 1rem;
    }

    & .comments {
        display: block;
        font-size: 0.8em;
        padding: 1rem 1rem 0.7rem;
    }

    & button.info {
        position: absolute;
        right: 1rem;
        bottom: 0.5rem;
        background-color: transparent;
        padding: 0;
    }
}

p.or {
    position: relative;
    text-align: center;
    padding: 1rem 0;

    & strong {
        position: relative;
        background-color: var(--body-bg);
        padding: 0 0.5em;
        z-index: 2;
    }
}

p.or::before {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 50%;
    left: 0;
    border-bottom: 1px solid black;
    z-index: 1;
}

input[type=radio], input[type=checkbox] {
    width: 20px;
    height: 20px;
    filter: hue-rotate(-40deg);
}

input[type="radio"]:disabled {
    background-color: var(--shade-grey-3);
    border: 0.05em solid var(--shade-grey-1);
    opacity: 40%;
}

.folder-sorting {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.25rem 0;
    gap: 0.5rem;
}

input[type="checkbox"]:disabled {
    background-color: var(--shade-grey-3);
    border: 0.05em solid var(--shade-grey-1);
    opacity: 40%;
}

button[type=submit], button[type=reset] {
    justify-content: center;
    padding: 0.75rem 1.5rem;
}

p.switch-check {
    position: relative;
    overflow-x: hidden;
    padding: 0.5em 0 0.5em 70px;

    & input {
        position: absolute;
        left: -50em;
    }

    & label::before, & label::after {
        display: block;
        position: absolute;
        content: "";
    }
    
    & label::before {
        top: 0.3em;
        left: 1px;
        width: 28px;
        height: 28px;
        background-color: var(--shade-grey-2A);
        border-radius: 28px;
        box-shadow: 0 2px 2px rgba(0,0,0,0.2);
        transition: all 0.1s;
        z-index: 2;
    }
    & label::after {
        top: 0.5em;
        left: 1px;
        width: 52px;
        height: 20px;
        background-color: var(--shade-grey-3);
        border-radius: 19px;
        box-shadow: 0 2px 2px rgba(0,0,0,0.2);
        z-index: 1;
    }

    & input:checked + label:before {
        background-color: var(--main-color);
        transform: translateX(30px);
    }
}

/* For radios or checkboxes in buttons form */

fieldset.choice-buttons {

    & > div.content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1rem;

        & > * + * {margin-top: 0;}
    }

    & p label {
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.5em 1em;
        border: 1px solid currentColor;
        border-radius: 0.2em;
        cursor: pointer;
    }

    & input {
        position: absolute;
        left: -50em;
    }

    & input:checked + label {
        color: var(--text-inv);
        background-color: var(--main-color);
        border-color: var(--main-color);
    }

    & input:checked + label svg {
        fill: currentColor;
    }
}



/* -------------------- COLLAPSIBLE --------------------- */

.collapsible {

    & button.control {
        overflow: visible;
        text-align: left;
        text-transform: uppercase;
        color: var(--legend-text);
        background-color: transparent;
        padding: 0 0.5rem;
        border: none;
    }
    
    & button.control::after {
        content: "";
        display: inline-block;
        position: relative;
        left: 10px;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,0C5.37,0,0,5.37,0,12s5.37,12,12,12,12-5.37,12-12S18.63,0,12,0ZM12,16.89l-6.36-6.36,1.41-1.41,4.95,4.95,4.95-4.95,1.41,1.41-6.36,6.36Z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        transform-origin: center center;
        transform: scale(0.8);
    }
    & button.control[aria-expanded=true]::after {
        transform: scale(0.8) rotate(180deg);
    }

    & > div.content {
        display: none;
    }
}

.collapsible.active {
    & > div.content {
        display: block;
    }
}


/* -------------------- TABLES --------------------- */


.table-wrapper {
    overflow: auto;
}

table {
    width: 100%;
    border-spacing: 0;
}

tr:nth-child(even) {
    background-color: var(--table-even-bg);
}

th {
    text-align: start;
    text-transform: uppercase;
    padding: 0.5rem 0 0.5rem 0.3rem;
    color: var(--table-th);
}

thead {
    background-color: var(--body-bg);
    border-bottom: 2px solid var(--shade-grey-2A);

    & tr.filter-row {
        background-color: var(--shade-grey-3);
    }
 
    & tr.filter-row td {
        font-size: 90%;
        padding: 0.5rem;
    }

    & tr.filter-row label {  
        clip: rect(1px, 1px, 1px, 1px) !important;
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        overflow: hidden !important;
        margin: -1px !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        white-space: nowrap !important;
    }

    & td {border: none;}
}

td {
    border: 1px solid var(--table-border);
    padding: 1rem 0.5rem;
}

tr.selected td {
    background-color: var(--table-tr-selected);
}

table th > button {
    display: block;
    width: 100%;
    min-height: initial;
    text-transform: uppercase;
    text-align: left;
    color: var(--shade-grey-2);
    background-color: var(--body-bg);
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5664 10.2003L10.9727 11.7941V2.85138H10.0872V11.7941L8.49349 10.2003L7.8737 10.8201L10.5299 13.4764L13.1862 10.8201L12.5664 10.2003ZM4.33203 2.85138L1.67578 5.50763L2.29557 6.12742L3.88932 4.53367V13.4764H4.77474V4.53367L6.36849 6.12742L6.98828 5.50763L4.33203 2.85138Z' fill='%23707070'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom 0.5rem right 0.5rem;
    padding: 0.5rem 30px 0.5rem 0.3rem;
    border: none;
}

table th > button[aria-sort=ascending] {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.55295 2.85138L4.8967 5.50763L5.51649 6.12742L7.11024 4.53367V13.4764H7.99566V4.53367L9.58941 6.12742L10.2092 5.50763L7.55295 2.85138Z' fill='%23707070'/%3E%3C/svg%3E");
}

table th > button[aria-sort=descending] {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.55295 10.7386L6.2092 8.08234L5.58941 7.46254L3.99566 9.05629L3.99566 0.113586L3.11024 0.113586L3.11024 9.05629L1.51649 7.46254L0.896698 8.08234L3.55295 10.7386Z' fill='%23707070'/%3E%3C/svg%3E");
}

table:not(.cards) tr {
    position: relative;
}

table:not(.cards) a::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: none;
}

table:not(.cards) a:hover::after {
    /* border-bottom: 3px solid var(--shade-grey-3); */
    background-color: rgba(0,0,0,0.03);
}


/* Table data cards */

table.cards tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 1.5rem;
}

table.cards tr:has(th) {
    display: none;
}

table.cards tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--card-bg);
    padding: 1rem 1rem 0;
    border-radius: 0.25rem;
}

table.cards thead tr.filter-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;

    & td {padding: 0;}

    & label {  
        display: block;
        clip: initial !important;
        -webkit-clip-path: initial !important;
        clip-path: initial !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        position: static !important;
        width: auto !important;
        white-space: initial !important;
    }
}

table.cards td {
    display: block;
    font-variation-settings: var(--fvs-bold);
    padding: 0;
    border: none;
    margin-bottom: 0.8rem;
}

table.cards td.extra {
    background-color: var(--description-bg);
    padding: 0.5rem 0.7rem;
}

table.cards td.division {
    position: relative;
    margin-top: 1rem;
}

table.cards td.division::after {
    content: '';
    display: block;
    position: absolute;
    top: -1rem;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--shade-grey-3);
}

table.cards td.tag-like {
    display: flex;
    width: fit-content;
    padding: 0.2rem 0.6rem;
    background-color: var(--tag-info);
    border-radius: 3em;
    gap: 0.5rem;
}

table.cards.dossiers tr td[data-header='Patient UID :'] {
    order: 5;
}

table.cards td.nom {
    display: none;
}

table.cards td.prenom a {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.45em;
    background: url('../svg/external-link.svg') no-repeat right -2px;
    padding-right: 30px;
}

table.cards td.prenom a::before {
    content: attr(data-name);
}

table.cards td.prenom a::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: none;
}

table.cards td:not(.nom, .prenom)::before {
    display: block;
    content: attr(data-header);
}

table.cards td.extra::before {
    display: inline-block;
}

table.cards td::before {
    font-variation-settings: var(--fvs-regular);
}


/* -------------- BLOCKS ---------------------- */

div.h-group {
    margin-bottom: 2rem;

    & :is(h2, h3, h4, h5) {
        margin-bottom: 0.5rem;
    }
}


details {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-top: 0.25rem solid var(--panel-border);
    box-shadow: 0 8px 12px 0 #00000029;
}

details:only-child {margin-bottom: 0;}

summary {
    position: relative;
    display: grid;
    grid-template-columns: auto 24px;
    gap: 0.5rem;
    list-style: none;
    cursor: pointer;

    & h2 {margin-bottom: 0;}
}

details[open] > summary {
    margin-bottom: 1.5rem;

    & svg.control {
        transform: rotate(180deg);
    }
}

details::details-content {
    opacity: 0;
    transition:
      opacity 500ms,
      content-visibility 500ms allow-discrete;
  }
  
  details[open]::details-content {
    opacity: 1;
  }

details.with-conditional span.conditional {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
details.with-conditional[open] span.conditional {
    display: none;
}


div.panel {
    width: 100%;
    padding: 1.5rem 1rem;
    margin-bottom: 1.75rem;
    border-top: 0.25rem solid var(--panel-border);
    box-shadow: 0px 8px 12px 0px #00000029;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

div.cards {
    display: grid;
    gap: 1.5rem;

    & h3 {margin-bottom: 1rem;}
}

.card {
    padding: 1rem;
    background-color: var(--card-bg);

    & dt {
        font-variation-settings: var(--fvs-bold);
        margin-bottom: 1em;
    }

    & dd + dd {
        margin-top: 0.25em;
    }

    & dd + dd.tag {
        margin-top: 1em;
    }

    & .tag {
        font-variation-settings: var(--fvs-bold);
    }
}

div.card + div.card {
    margin-top: 1rem;
}

.card.active {
    border: 1px solid var(--alert);
}

dl.data-list {

    & div.tag-info {
        background-color: var(--tag-info);
    }

    & div + div.division {
        padding-top: 0.8rem;
        border-top: 1px solid var(--shade-grey-3);
    }

    & div.division div {
        padding: 0.5rem 0.7rem;
        background-color: var(--description-bg);
        border-radius: 0.25rem;
    }

    & div.list-wrapper {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    & dd {
        font-variation-settings: var(--fvs-bold);
    }

    div.list-wrapper:has(input[type="checkbox"]) {
        dt {
            margin-top: 0.25rem;
        }
    }

    & div.list-wrapper + h3 {
        padding-top: 1rem;
        border-top: 1px solid black;
        margin-bottom: 1rem;
        text-transform: uppercase;
    }

    & h4 {
        font-family: var(--stack-h4);
        padding-bottom: 1rem;
    }

    & div.tag-like {
        display: flex;
        width: fit-content;
        padding: 0.2rem 0.6rem;
        background-color: var(--tag-info);
        border-radius: 3em;
        gap: 0.5rem;

        & dt, dd {margin-bottom: 0;}
    }

    & div.data-level-2 {
        padding-top: 1rem;
        border-top: none;
    }
    
    & div.data-level-2 dt {
        padding-left: 20px;
    }
    div.data-level-2 dd {
        padding-left: 35px;
    }
    
    & div.data-level-2 dt::before {
        content: "";
        display: inline-block;
        position: relative;
        width: 15px;
        height: 15px;
        top: -5px;
        left: -5px;
        border-left: 1px solid var(--shade-grey-2A);
        border-bottom: 1px solid var(--shade-grey-2A);
    }
}

.comments {
    grid-column: 1/span 2;
    max-width: 50em;
    font-variation-settings: initial;
    color: var(--body-text);
    background-color: var(--input-bg);
    padding: 0.25em 0.5em;
    margin: 0.5rem 0 1rem;
}

.width-padd {padding: 0 1.5rem;}

dl.data-list.simple {
    & dt, dd {
        margin-bottom: 0.25rem;
    }
    
    & div + div:not(.data-level-2) {
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px dotted var(--shade-grey-2);
    }
}

dl.data-list.main-list {
    background-color: var(--main-light);
    padding: 1.5rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
}

dl.data-list.highlight {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    background-color: var(--shade-grey-4);
    padding: 0.5rem;
    margin-bottom: 1.5rem;
}


dl.recall {
    background-color: var(--shade-grey-4);
    padding: 1.2rem 1.5rem;

    & dt {font-variation-settings: var(--fvs-bold);}

    & dd + dt {
        margin-top: 1rem;
    }
}

div.card.in-progress {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 0;
    border: 1px solid var(--alert);

    & dd:has(strong.status) {text-align: center;}
}

strong.status {
    display: inline-block;
    position: relative;
    top: 0.8rem;
    font-size: 90%;
    color: var(--body-bg);
    background-color: var(--alert);
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5001 1.66675C10.9603 1.66675 11.3334 2.03985 11.3334 2.50008V5.00008C11.3334 5.46031 10.9603 5.83341 10.5001 5.83341C10.0398 5.83341 9.66675 5.46031 9.66675 5.00008V2.50008C9.66675 2.03985 10.0398 1.66675 10.5001 1.66675ZM10.5001 14.1667C10.9603 14.1667 11.3334 14.5398 11.3334 15.0001V17.5001C11.3334 17.9603 10.9603 18.3334 10.5001 18.3334C10.0398 18.3334 9.66675 17.9603 9.66675 17.5001V15.0001C9.66675 14.5398 10.0398 14.1667 10.5001 14.1667ZM18.8334 10.0001C18.8334 10.4603 18.4603 10.8334 18.0001 10.8334H15.5001C15.0398 10.8334 14.6667 10.4603 14.6667 10.0001C14.6667 9.53983 15.0398 9.16675 15.5001 9.16675H18.0001C18.4603 9.16675 18.8334 9.53983 18.8334 10.0001ZM6.33341 10.0001C6.33341 10.4603 5.96031 10.8334 5.50008 10.8334H3.00008C2.53985 10.8334 2.16675 10.4603 2.16675 10.0001C2.16675 9.53983 2.53985 9.16675 3.00008 9.16675H5.50008C5.96031 9.16675 6.33341 9.53983 6.33341 10.0001ZM16.3927 15.8927C16.0672 16.2181 15.5396 16.2181 15.2142 15.8927L13.4463 14.1248C13.1209 13.7994 13.1209 13.2718 13.4463 12.9463C13.7718 12.6209 14.2994 12.6209 14.6248 12.9463L16.3927 14.7142C16.7181 15.0396 16.7181 15.5672 16.3927 15.8927ZM7.55381 7.05381C7.22836 7.37924 6.70073 7.37924 6.37529 7.05381L4.60752 5.28604C4.28209 4.9606 4.28209 4.43296 4.60752 4.10752C4.93296 3.78209 5.4606 3.78209 5.78604 4.10752L7.55381 5.87529C7.87924 6.20073 7.87924 6.72836 7.55381 7.05381ZM4.60752 15.8927C4.28209 15.5672 4.28209 15.0396 4.60752 14.7142L6.37529 12.9463C6.70073 12.6209 7.22836 12.6209 7.55381 12.9463C7.87924 13.2718 7.87924 13.7994 7.55381 14.1248L5.78604 15.8927C5.4606 16.2181 4.93296 16.2181 4.60752 15.8927ZM13.4463 7.05381C13.1209 6.72836 13.1209 6.20073 13.4463 5.87529L15.2142 4.10752C15.5396 3.78209 16.0672 3.78209 16.3927 4.10752C16.7181 4.43296 16.7181 4.9606 16.3927 5.28604L14.6248 7.05381C14.2994 7.37924 13.7718 7.37924 13.4463 7.05381Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.45rem 0.05rem;
    padding: 0.25rem 1rem 0.25rem 2rem;
    border-radius: 2rem;
}

strong.status.edit {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1066 5.97999L9.92808 4.80148L2.16667 12.5629V13.7414H3.34517L11.1066 5.97999ZM12.2851 4.80148L13.4636 3.62298L12.2851 2.44446L11.1066 3.62298L12.2851 4.80148ZM4.03553 15.4081H0.5V11.8725L11.6958 0.676692C12.0213 0.351259 12.5489 0.351259 12.8743 0.676692L15.2314 3.03372C15.5568 3.35915 15.5568 3.88679 15.2314 4.21223L4.03553 15.4081Z' fill='white'/%3E%3C/svg%3E ");
}

div.folder-data {
    box-sizing: border-box; 
    position: relative;
    width: calc(100% + 2rem); 
    top: -2.5rem;
    left: -1rem; 
    line-height: 1.5;
    background-color: var(--secondary-l-green);
    padding: 1rem 3rem 1rem 1rem;
    z-index: 1; 

    & button {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
}

div.level5 {
    position: relative;
    padding-left: 1rem;
    margin: 1.5rem 0;
}

div.level5::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    width: 5px;
    height: 100%;
    border-top: 1px solid var(--shade-grey-1);
    border-bottom: 1px solid var(--shade-grey-1);
    border-left: 1px solid var(--shade-grey-1);
}



/* --------------------- TABS -----------------------*/

div.tabs-block {
    text-align: left;
    margin: 2rem 0;
}

ul.tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    list-style-type: none;
    padding: 4px 4px 0;
    margin: 0;
    
    & li {
        padding-bottom: 14px;
        margin-right: 0.5rem;
    }

    & button {
      display: block;
      overflow: visible;
      min-height: initial;
      text-decoration: none;
      color: var(--body-text);
      background-color: var(--shade-grey-3);
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 3rem;
    }

    & button.with-alert::after {
        top: -5px;
        right: 0;
    }
}

ul.tabs [aria-selected=true], ul.tabs button:hover {
    color: var(--text-inv);
    background-color: var(--main-color);
    opacity: 1;
}

ul.tabs li:has(button[aria-selected=true], button:hover) {
    position: relative;
    padding-bottom: 14px;
}
ul.tabs li:has(button[aria-selected=true], button:hover)::after {
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    bottom: -4px;
    left: calc(50% - 12px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23026A7F'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
}
  
  div.tab-content {
    box-sizing: border-box;
    display: block;
    background-color: var(--main-u-light);
    padding: 1rem 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  div.tab-content[hidden] {display: none;}


/* --------------------- EDITORIAL -----------------------*/


/* ---------------- TOOLS/UTILITIES ------------------------ */

.k-skip {
    font-size: 0.8em;
    text-align: center;
    margin: 0;

    & a {
        display: block;
        position: absolute;
        overflow: hidden;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
    }
    & a:focus {
        position: static;
        width: auto;
        height: auto;
    }
}

.no-break {
    white-space: nowrap;
}

.go-along {
    display: flex;
    align-items: center;
}

.buttons-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

ul.buttons-bar {list-style-type: none;}

div.buttons-bar {
    font-size: 0.85em;
}

.buttons-bar button:not(.svg-only) {
    width: 100%;
}

div.buttons-bar.save {
    justify-content: center;
    padding-top: 1rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--tag-info);
    padding: 0 0.6rem 0.2em;
    border-radius: 3em;
}

span.tag, dd.tag, h2.tag {
    font-size: 90%;
}

.tag:has(svg) {
    svg:not(.control) {
        flex: 0 0 24px;
        transform: scale(0.7);
    }
}

.tag-info {
    background-color: var(--tag-info);
}

/* DROPDOWNS */
div.dropdown {
    position: relative;

    & ul {
        display: none;
        position: absolute;
        right: 0;
        width: 100%;
        min-width: 13rem;
        max-width: 25rem;
        list-style-type: none;
        background-color: var(--body-bg);
        border: 1px solid var(--main-color);
        padding: 0 0.5rem;
        z-index: 1000;
    }

    & li {font-size: 0.95em;}

    & button.control {
        width: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z' fill='%23FFF'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: top 0.55em right 0.53em;
        background-size: 24px 24px;
        padding: 0.5rem 2.5rem 0.6rem 0.7rem;
    }

    & ul button, a {
        display: block;
        width: 100%;
        font-variation-settings: var(--fvs-regular);
        text-align: left;
        color: var(--body-text);
        background-color: var(--body-bg);
        padding: 0.75em 0.5em;
        border: none;
        border-bottom: 1px solid var(--shade-grey-3);
        border-radius: 0;
    }
    & ul li:last-of-type button {border: none;}
}

.buttons-bar div.dropdown button:not(.svg-only, .control) {
    width: 100%;
}

div.dropdown.active ul {    
    display: block;
}
div.dropdown.active button.control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z' fill='%23FFF'%3E%3C/path%3E%3C/svg%3E");
}

div.dropdown ul button:hover, div.dropdown ul a:hover {
    background-color: var(--shade-grey-3);
}

div.dd-combo {
    position: relative;
    display: flex;
    gap: 1px;

    & > button {
        border-radius: 0.2em 0 0 0.2em;
    }

    & div.dropdown button.control {
        height: 100%;
        min-height: initial;
        padding: 0.8rem 2.5rem 0.8rem 0;
        border-radius: 0 0.2em 0.2em 0;
    }
}

/* DISCLOSURES/TAGS LIST */

details.tags-list {
    background-color: var(--shade-grey-4);
    padding: 0;
    border: none;
    border: 1px solid var(--shade-grey-3);
    box-shadow: none;

    & summary {
        display: block;
        padding: 0.5rem 0.7rem 0.7rem;
    }

    & h3 {
        display: grid;
        grid-template-columns: auto 24px;
        align-items: center;
        gap: 0.5rem;
        font-size: 85%;
    }

    & .content {
        border-top: 1px solid var(--main-color);
    }

    & summary ul {
        overflow-y: auto;
        max-height: 15em;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25em 0.5em;
        list-style-type: none; 
    }

    & div.content ul {
        list-style-type: none;        
        padding: 0.8rem 1rem;
    }

    & div.content li + li {margin-top: 0.8em;}

    & .tag {
        background-color: var(--secondary-l-green);
    }

    & p.option {font-size: 110%;}

    & p.filter {
        font-size: 0.9em;
        color: var(--text-inv);
        background-color: var(--main-color);
        padding: 0.25rem 1rem;
    }
}

fieldset details.tags-list:last-child {
    margin-bottom: 0;
}
details.tags-list + details.tags-list {
    margin-top: -1rem;
}

details.tags-list[open] {
    border: 1px solid var(--main-color);
    
    & summary {margin-bottom: 0;}
}

details.tags-list :is(h2, h3, h4, h5) {
    font-family: var(--stack);
}

details.discrete {
    padding: 0;
    border: none;
    box-shadow: none;

    & summary {
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--shade-grey-1);
    }

    & :is(h2, h3, h4, h5) {
        text-transform: uppercase;
    }
}


/* SCREEN READER ONLY */
.no-display {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }


/* MODAL */

div.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;

    & h2 {
        font-size: 1.5em;
        text-transform: none;
        margin: 1rem 0 0 1.5rem;
    }
}

div.modal.active {display: block;}

div.modal header {
    margin-bottom: 1rem;
    border-top: 5px solid var(--shade-grey-1);
}
  
div.modal div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(57, 119, 62,0.8);
}

div.modal div.dialog {
    box-sizing: border-box;
    position: relative;
    left: 0;
    right: 0;
    width: 90vw;
    height: 90vh;
    max-width: 800px;
    background-color: #FFF;
    padding: 0.5rem;
    margin: 5vh auto;
    z-index: 2010;

    & > div.content {
        overflow-y: auto;
        height: 79vh;
        padding: 1.5rem;
    }
}

div.modal.small div.dialog {
    max-width: 350px;
    height: auto;
    margin: 20vh auto 0;
    
    & > div.content {
        overflow-y: initial;
        height: auto;
    }
}

div.modal p {line-height: 1.45;}

button.bt-close {
    overflow: hidden;
    position: absolute;
    top: 0.65rem;
    right: 0.5rem;
    width: 37px;
    height: 35px;
    font-size: 0.8em;
    text-indent: 50em;
    white-space: nowrap;
    text-transform: uppercase;
    background-color: var(--body-bg);
    background-image: linear-gradient(45deg, var(--body-bg) 50%, transparent, var(--shade-grey-1) 50%);
    padding: 0;
    border: none;
    border-radius: 0;

    & svg {
        position: absolute;
        top: -2px;
        right: 0;
    }
}


/* =========================
   MODAL EVENT - AVAILABILITIES  
   ========================= */

div#event.modal div.dialog > div.content {
  padding: 0; 
}

div#event.modal div.dialog > div.content > form {
  padding: 1.5rem;
}

div#event.modal .modal-availabilities {
  position: sticky;*/
  top: 0;          
  z-index: 30;
  background: var(--body-bg);
  border-bottom: 1px solid var(--shade-grey-3);
  box-shadow: 0 6px 10px rgba(0,0,0,0.06);
  padding: 0.5rem 1.5rem 1.5rem;
}

div#event.modal .modal-availabilities-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}

div#event.modal .modal-availabilities-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: visible;
}

div#event.modal .modal-availabilities-title {
  font: normal 1rem var(--stack-h3);
  margin: 0;
}

div#event.modal .modal-availabilities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

div#event.modal .modal-availabilities-center {
    margin-right: 0.25rem;
    font-variation-settings: var(--fvs-regular);

 }

div#event.modal .modal-availabilities-time {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 0.8em;
  font-variation-settings: var(--fvs-bold);
  background: var(--secondary-l-blue);
  color: var(--body-text);
  padding: 0.15rem 0.7rem;
  border-radius: 2rem;
  white-space: nowrap;
}


/* UTILITARY STYLES */

.m-bottom-half {margin-bottom: 0.5rem;}
.m-bottom-simple {margin-bottom: 1rem;}
.m-bottom-medium {margin-bottom: 1.5rem;}
.m-bottom-double {margin-bottom: 2rem;}

.m-top-half {margin-top: 0.5rem;}
.m-top-simple {margin-top: 1rem;}
.m-top-medium {margin-top: 1.5rem;}
.m-top-double {margin-top: 2rem;}

.data-group {
    border: 2px solid var(--fieldset-border);
    padding: 0 1rem 1rem;
    margin-bottom: 2rem;

    & :is(h2, h3, h4, h5) {
        display: inline-block;
        position: relative;
        top: -0.85em;
        font: 100% var(--stack);
        text-transform: uppercase;
        color: var(--legend-text);
        background-color: var(--body-bg);
        padding: 0 0.5rem;
        margin-bottom: 0.5rem;
    }
}

.data-group.collapsible {
    padding-bottom: 0;

    & button.control {min-height: initial;}
}

.data-group.collapsible.active {
    padding-bottom: 1rem;
}

.with-alert {
    position: relative;
}

.with-alert::after {
    display: block;
    position: absolute;
    overflow: hidden;
    content: "Alerte";
    width: 18px;
    height: 18px;
    top: 6px;
    right: 6px;
    text-indent: 50rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff;'/%3E%3Cpolygon points='3.97 18.03 20.03 18.03 12 3.97 3.97 18.03' style='fill:%23d81212;'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

/* STATUS */
.status-complete {background-color: var(--st-complete);}
.status-late {background-color: var(--st-late);}
.status-todo {background-color: var(--st-todo);}
.status-sector {background-color: var(--st-sector);}
.status-onhold {background-color: var(--st-onhold);}
.status-vaccin {background-color: #FFCD82;}


/* ------------------------ EDITORIAL --------------------------- */

.editorial {
    max-width: 45em;

    & h2 {
        margin-top: 1.5em;
    }

    & ul {
        margin: 1.5rem;
    }

    & p, li {
        line-height: 1.58;
    }

    & p + p, li + li {
        margin-top: 0.8em;
    }
}


/* ------------------------ AGENDA --------------------------- */

/* Filter */
ul.filter-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
    list-style-type: none;

    & li {
        min-height: 38px;
        align-content: center;
        white-space: nowrap;
        background-color: var(--shade-grey-4);
        padding: 0.25em 1em;
        border-radius: 2em;
    }

    & li.svg-only {
        display: inline-flex;
        align-items: center;
        width: 57px;
    }

    & li.svg-only.double-icon {
        width: 94px;
    }
    & li.svg-only svg {
        fill: currentColor;
        flex: 0 0 24px;
    }
}

div.agenda {
    position: relative;
    font-family: var(--stack-h3);

    & strong {
        font-family: var(--stack-h2);
        font-weight: normal;
    }

    & table {border-spacing: 6px 0;}

    & table.three-col-grid th[scope=col] {
        width: 33%;
    }
    & table.five-col-grid th[scope=col] {
        width: 20%;
    }

    & table tr:nth-child(2n) {
        background-color: var(--body-bg);
    }

    & caption {
        font-size: 1em;
        text-align: left;
        padding: 0 0 1rem;
    }
    & caption p:first-of-type {
        font: 1.2em var(--stack-h2);
    }
    & caption p + p {
        margin-top: 0.5rem;
    }
    & caption span {text-transform: uppercase;}
    & caption svg {
        position: relative;
        top: 0.25rem;
    }

    & th {text-transform: none; padding: 0.5em;}

    & td:not(.available) {padding: 0;}

    & tr:nth-child(2n+1) > td {        
        border: none;
        border-bottom: 1px dashed var(--shade-grey-2);
        border-left: 3px solid var(--body-bg);
    }

    & tr:nth-child(2n) > td {        
        border: none;
        border-bottom: 1px solid var(--shade-grey-2);
        border-left: 3px solid var(--body-bg);
    }
    

    & td + td {border-left: 1px solid var(--shade-grey-3);}

    & tr:first-of-type td:first-of-type {border: none;}

    & th[scope=row] {
        width: 2em;
        font-family: var(--stack-h2);
        font-weight: normal;
        text-align: right;
        color: var(--body-text);
        padding-left: 0;
        border-right: 1px solid var(--shade-grey-1);
    }

    & tr:has(+ tr.mid-day) td {
        border-bottom: 2px solid var(--primary-red);
    }

    & th[scope=col] {
        text-align: center;
        padding-bottom: 1.3rem;
    }
    
    & th.mid {color: var(--body-bg);}

    & .available {
        background-color: var(--shade-grey-4);
        padding: 0.5rem;
    } 
    & td.available {
        word-break: break-all;
        border: none;
        vertical-align: top;
    }    

    & .available dt, & .available dd {
        display: inline; 
        font-size: 100%;
        word-break: keep-all;
    }
    & .available dd + dt {margin-top: 0.35em;}
    & .available dt {
        display: block;
        font-family: var(--stack-h2);
    }
    
    & td.unavaiable {
        background-color: #EEE;
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0, 0.04) 5px, rgba(0,0,0, 0.04) 20px);
    }

    & td.mid-day {border-top: 2px solid var(--agenda-san-red);}

    & button:not(.svg-only) {
        display: block;
        width: 100%;
        min-height: 2em;
        font-family: var(--stack-h3);
        text-align: left;
        color: var(--body-text);
        background-color: var(--body-bg);
        padding: 0.3em;
        border: none;
    }
    & button:not(.svg-only, .responsive):hover {
        background-color: var(--secondary-l-blue);
    }
    & button:not(.svg-only):focus-visible {outline-offset: -2px;}

    & button.rdv {
        background-color: var(--rdv-classic);
    }
    & button.rdv-urgent {
        background-color: var(--rdv-urgent);
    }
    & button.rdv-pending {
        background-color: var(--rdv-pending);
    }
    & button.rdv-confirmed {
        background-color: var(--rdv-classic-confirmed);
    }
    & button.rdv-urgent-confirmed {
        background-color: var(--rdv-urgent-confirmed);
    }
    & button.rdv-pending-confirmed {
        background-color: var(--rdv-pending-confirmed);
    }
    & button.rdv-done {
        background-color: var(--rdv-classic-done);
    }
    & button.rdv-urgent-done {
        background-color: var(--rdv-urgent-done);
    }
    & button.rdv-pending-done {
        background-color: var(--rdv-pending-done);
    }
    & button.rdv-extra {
        background-color: var(--rdv-extra);
    }
    & button.rdv-collective {
        background-color: var(--rdv-collective);
    }
    & button.rdv-unaccomplished {
        background-color: var(--rdv-unaccomplished);
    }
    & button.rdv-absent {
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0, 0.04) 5px, rgba(0,0,0, 0.04) 20px);
    }

    button.rdv.modal-trigger p {
        font-size: 100%;
}
    button.rdv.modal-trigger.elsewhere svg {
        color: var(--body-text);
        flex: 0 0 auto;
}

    & button.elsewhere {
        background-color: var(--body-bg);
        background-image:
        linear-gradient(
        45deg,
        rgba(0,0,0,0.05) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0,0,0,0.05) 75%,
        rgba(0,0,0,0.05)
        ),
        linear-gradient(
        45deg,
        rgba(0,0,0,0.05) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0,0,0,0.05) 75%,
        rgba(0,0,0,0.05)
        );

    background-size: 22px 22px;
    background-position: 0 0, 10px 10px;
    background-repeat: repeat;
}

    & table.multi {
        position: relative;
        width: calc(100% - 2rem);
        margin-left: 3rem;
    }

    & table.multi caption {
        position: absolute;
        width: 3rem;
        height: 100%;
        top: 0;
        left: -3rem;
        border-right: 1px solid;
    }

    time {display: block;}
}

/* Floating rdv */
div.agenda table.planning {
    border-spacing: 0;

    & div.rdv-wrap {
        display: flex;
    }

    & td:nth-child(5n+2) {
        border-left: 1px solid var(--shade-grey-2A);
    }
    & td:nth-child(2) {border-left: none;}
    
    & tr.ps td {
        width: 6.5%;
        padding: 0.5em 0.25em;
    }
    & tr.ps span {
        display: block;
        text-transform: uppercase;
    }
    & tr.ps p {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 4em;
    }
    & td {
        position: relative;        
        height: 4.85em;
        font-size: 0.8em;
    }
    & td + td {
        border-left: 1px solid var(--shade-grey-3);
    }

    & button {
        box-sizing: border-box;
        position: absolute;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0;
        top: 0.2em;
        left: 0;
        width: 100%;
        height: 95%;
        z-index: 1;
    }
    & button.one-half {
        width: 48%;
    }
    & button.one-third {
        width: 30%;
    }
    & button[class*=rdv] {z-index: 200}
}

table.planning.five-col-grid button.rdv {
    width: 18%;
}

.cal-day-col {
    text-align: center;

    & abbr {
        display: block;
        font-family: var(--stack-h3);
        font-size: 130%;
        font-weight: normal;
        text-align: center;
        color: var(--body-text);
        margin-bottom: 0.25rem;
    }
    & time.today {
        display: inline-block;
        color: var(--body-bg);
        background-color: var(--body-text);
        padding: 0 0.5em;
        border-radius: 2em;
    }
}

/* For multiple practioners */

.grid-1, .grid-3, .grid-5, .grid-6, .grid-7 {
    display: grid;
    gap: 0.25rem;
    min-height: 13rem;
}
.grid-1 {
    grid-template-columns: auto 1fr;
}
.grid-3 {
    grid-template-columns: auto 1fr 1fr 1fr;
}
.grid-5 {
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr;
}
.grid-6 {
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid-7 {
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}


div.multi div.buttons-bar.cal-nav {
    position: absolute;
    top: 1.8rem;
    width: 2rem;
    gap: 1px;
}

div.single-cal {
    margin-top: 1rem;
}

div.single-cal + div.single-cal {
    padding-top: 1rem;
    border-top: 1px dashed var(--shade-grey-1);

    & section h3 {
        top: 0;
        height: 100%;
    }
    & section h3 span {
        top: 15rem;
    }
    
    & dt.cal-day-col {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        overflow: hidden !important;
        margin: -1px !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        white-space: nowrap !important;
    }
}

div.single-cal section {

    & h3 {
        position: relative;
        top: 3.3rem;
        width: 2rem;
        height: calc(100% - 3.3rem);
        padding-right: 0.25rem;
        margin-right: 0.25rem;
        border-right: 1px solid;
    }

    & h3 span {
        display: block;
        position: absolute;
        min-width: 12em;
        top: 15rem;
        text-align: right;        
        overflow: hidden;
        text-overflow: ellipsis;
        font-variation-settings: var(--fvs-medium);
        white-space: nowrap;
        transform-origin: 0 0;
        transform: rotate(-90deg);
    }

    & dl {
        container-type: inline-size;
        container-name: day-col;
    }

    & dt.cal-day-col {
        margin-bottom: 0.75rem;
    }

    & dd:first-of-type button {
        background-color: var(--shade-grey-4);
    }
    & dd + dd {margin-top: 0.25rem;}

    & dd.available dl {display: none;}

    & button:not(.svg-only) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.25em;
        padding-top: 0.35em;
    }

    & button.responsive {
        position: relative;
        overflow: hidden;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-family: var(--stack);
        color: var(--button-color);
        background-color: var(--button-bg);
    }

    & button.responsive span {
        position: absolute;
        top: -5rem;
    }
}

/* ------------------ AUTOCOMPLETE ----------------------- */

div.autocomplete-block {
    margin-bottom: 1.5rem;

    & ul {
        display: none;
        position: absolute;
        width: calc(100% - 1rem);
        list-style-type: none;
        background-color: var(--body-bg);
        padding: 0.5rem 0.7rem;
        border: 1px solid var(--shade-grey-3);
        box-shadow: 0 2px 3px rgb(0,0,0,0.3);
        z-index: 10;
    }
    & li {
        font-size: 1em;
        padding: 0.25em 0;
        cursor: pointer;
    }
    & li:hover {
        background-color: var(--secondary-l-green);
    }

    & button.adv-search {
        width: 100%;
        min-height: initial;
        font-size: 90%;
        justify-content: flex-start;
        color: var(--body-text);
        background-color: var(--input-border);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 12L10 18V6L16 12Z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 1.5em;
        background-position: center left 0.25rem;
        padding: 0.35rem 0.7rem 0.35rem 1.7rem;
        border-radius: 0;
        border: none;
    }
    & button.adv-search:hover {
        color: var(--text-inv);
        background-color: var(--main-color);
    }

    & button.delete-auto {
        width: 24px;
        background-color: transparent;
        padding: 0;
        border: none;
    }
    & button.delete-auto svg {
        fill: var(--body-text);
        transform: scale(0.8);
    }

    & .input-block {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23707070'%3E%3Cpath d='M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: 0.5rem 0.7rem;
        backdrop-filter: opacity(20%);;
    }

    & .input-block label {
        padding-top: 0.5em;
        padding-left: 28px;
    }

    & .input-block input {
        width: calc(100% - 28px);
    }
    
    & .input-block:has(input:focus) + ul {
        display: block;
    }
    
    & input:placeholder-shown + button {
        display: none;
    }
    & input:not(:placeholder-shown) + button {
        display: inline-block;
    }
}


/* ------------------------ MEDIA QUERIES --------------------------- */

@container day-col (width > 200px) {
    div.single-cal section button.responsive span {
        position: static;
    }
    div.single-cal section dd.available dl {
        display: block;
    }
    div.single-cal section dd.available button {
        display: none;
    }
}

@media (min-width: 22.6rem) {
    .input-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, 10rem);
        gap: 0.5rem;
    }

    fieldset.switch ul {
        flex-direction: row;
    }
    fieldset.switch label {display: inline-block;}
    fieldset.switch li:first-of-type label {
        display: inline-block;
        border-radius: 2rem 0 0 2rem;
    }

    fieldset.switch li:last-of-type label {
        border-radius: 0 2rem 2rem 0;
    }

    input[type="checkbox"]::before {
        width: 1em;
        height: 1em;
    }

    .buttons-bar button:not(.svg-only, .control) {
        width: auto;
    }

    .wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, 0.5fr);
        gap: 0.5rem;
    }
}

@media (min-width: 44rem) {
    .block-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr;
        gap: 0.5rem;
    }

    div.agenda {position: relative;}
    div.cal-nav {
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: calc(100% - 2.5rem);
        left: 3rem;
    }
    
    div.multi div.buttons-bar.cal-nav {
        width: calc(100% - 3.5rem);
        top: 3rem;
        left: 3rem;
    }
    
    div.folder-data dl {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        gap: 0.5rem 1rem;
    }
    div.folder-data dd:first-of-type {
        grid-column: 2/span 2;
    }
    div.folder-data dd {
        padding-left: 1rem;
        border-left: 1px solid var(--shade-grey-2);
    }
}


@media screen and (min-width: 50rem) {
    div.along {
        display: grid;
        grid-template-columns: 20rem auto;
        gap: 2rem;
        
        & legend {padding: 0;}

        & ul {
            flex-direction: row;
        }
    }
    
    dl.data-list.simple div {
        display: grid;
        grid-template-columns: 20rem auto;
        gap: 0.75rem 1rem;
    }
    
    dl.data-list div.data-level-2 dd {
        padding-left: 0;
    }
}


@media screen and (min-width: 62.5rem) {
    html, body {
        overflow: hidden;
        height: 100%;
    }

    div.top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header div.tools {
        position: absolute;
        top: 0.8rem;
        right: 0;
        padding: 0;
        margin: 0 65px 0 0;
        border: none;
    }

    div.tools dl {
        text-align: right;
        padding-right: 1rem;
        margin-right: 1rem;
        border-right: 1px solid var(--border-grey);
    }
    div.tools ul {gap: 1.5rem;}

    p.site-identity {font-size: 1.6em;}

    .auto-scroll {
        overflow-y: auto;
        padding-right: 10px;
    }

    thead {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    h1 {
        font-size: 170%;
    }

    .panels {        
        display: grid;
        grid-template-columns: 470px auto;
        gap: 2rem;
    }
    .panels.with-nav {
        display: flex;

        & nav.secondary {
            flex-basis: 335px;
        }
        & nav.secondary.collapsed {
            flex-basis: calc(24px + 2rem);
        }
    }

    .panels.dashboard {
        grid-template-columns: 1fr 1fr;

        & .panel.main-panel {
            grid-row: 1/span 2;
        }
    }

    details.side {
        box-sizing: border-box;
        width: calc(24px + 2rem);
        transition: all 0.1s;

        & summary {height: 100%;}
    }
    details.side[open] {width: 100%;}

    details.side summary h2 {display: none;}

    details.side svg {
        transform: rotate(-90deg);
    }

    details.side[open] summary {
        height: auto;

        & h2 {display: block;}

        & svg {
            transform: rotate(90deg);
        }
    }
    
    div.panels:has(details.side:not([open])) {
        grid-template-columns: calc(24px + 2rem) auto;

        & form {
            display: none;
        }
        & summary h2 {
            display: none;
        }

        .panel {
            margin-bottom: 0;
            height: fit-content;
        }
    }

    nav.secondary {
        width: auto;
        height: auto;
        padding: 1.5rem 1rem;

        & button.control svg {
            transform: rotate(90deg);
        }
    }
    nav.secondary.collapsed {
        width: calc(24px + 2rem);
        height: auto;
    
        & button.control {
            overflow: hidden;
            width: 24px;
            height: 24px;
            white-space: nowrap;
        } 
    
        & button.control span {
            display: none;
        }
        & button.control svg {
            transform: rotate(270deg);
        }
    }

    fieldset.switch ul {
        padding: 0.5rem;
    }

    .top-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    main > .top-content {
        padding: 0.2rem 0 0.25rem 0.75rem;
        border-bottom: 1px solid var(--shade-grey-1);
        border-left: 8px solid var(--shade-grey-1);

        & h1 {
            padding: 0;
            border: none;
        }
    }

    .block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .block.name {
        grid-template-columns: 1fr 1fr;
    }

    .input-block.search-bar input {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 2.5rem;
    }

    div.agenda table:not(.multi) caption {font-size: 1.1em;}
    div.agenda caption svg {top: 0.15em;}
    div.agenda table:not(.planning) td {font-size: 1.1em;}
    div.cal-nav {
        width: calc(100% - 3.5rem);
        left: 4rem;
    }
    div.single-cal section h3 {
        top: 3.8rem;
        height: calc(100% - 3.8rem);
        font-size: 1.2em;
    }

    div.ref {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5vw;
    }

    div.folder-data dl {
        display: flex;
    }
}


@media (min-width: 78rem) {
    div.header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1800px;
        margin: 0 auto;
    }
    
    #main-nav {
        overflow: visible;
        height: auto;
        background-color: var(--body-bg);
        opacity: 1;
    }
    #main-nav ul {
        display: flex;
        margin: 0;
    }

    #main-nav a, #main-nav a:visited {
        color: var(--body-text);
        background-color: var(--body-bg);
        padding: 1rem 1.5rem;
    }

    #main-nav a[aria-current], #main-nav a:hover {
        background-color: var(--main-light);
    }
    
    #main-nav a[aria-current]::before, #main-nav a:hover::before {
        top: auto;
        bottom: -7px;
    }

    #main-nav a:focus-visible {
        outline-color: var(--main-color);
        outline-offset: -4px;
    }

    #nav-control {display: none;}

    div.top-header {margin: 0;}
    
    header div.tools {
        position: static;
        margin: 0 1rem 0 0;
    }
}


@media (min-width: 90rem) {
    main {
        gap: 1.25rem;
    }

    main.add-event div.panels, main.folder-search div.panels {
        display: grid;
        grid-template-columns: 503px auto;
        align-items: stretch;
        gap: 2rem;

        & details {margin-bottom: 0;}
        & div.panel {margin-bottom: 0;}
    }

    div.cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    table.cards {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    table.cards td.prenom {
        font-size: 1.1em;
        padding-bottom: 0.35em;
    }

    form.medical {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        grid-template-rows: min-content;
    }

    .folder-sorting {
        padding: 1rem 0;
    }
}