/**
 * Module Accessibly - Styles d'accessibilité pour nc_theme
 * --color-primary: utilise la charte graphique du thème (fallback #e40d2b)
 */
:root {
    --color-primary: var(--charte2023-rouge, var(--brand-red, #e40d2b));
}

@layer accessibilite {
    div.access * {
        font-family: Arial, sans-serif;
    }

    div.access {
        box-shadow: 0 0 12px #0003;
        font-size: 16px;
        position: fixed;
        z-index: 99999999;
        top: 0;
        bottom: 0;
        display: grid;
        grid-template-rows: 50px 1fr 70px;
        right: 0;
        border-left: 1px solid #e3e3e3;
        width: min(445px, 100%);
        background-color: #fff;
    }

    div.access button {
        text-align: center;
    }

    div.access__header {
        background-color: var(--color-primary);
        position: relative;
        color: #fff;
        display: grid;
        place-items: center;
    }

    div.access__header button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        background: none;
        color: #fff;
        cursor: pointer;
    }

    div.access__header button svg {
        width: 20px;
    }

    div.access__header button path {
        fill: currentColor;
    }

    div.access__footer {
        padding-top: 15px;
        background: #f8f9fc;
    }

    div.access__footer button {
        font-size: 16px;
        cursor: pointer;
        width: 80%;
        margin: auto;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        font-weight: 700;
        border-radius: 8px;
        height: calc(100% - 10px);
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        background-color: var(--color-primary);
        color: #fff;
        border: none;
    }

    div.access__footer button svg {
        width: 20px;
    }

    div.access__footer button svg path {
        fill: currentColor;
    }

    div.access__main {
        background: #f8f9fc;
        padding: 25px 15px;
        display: grid;
        gap: 30px;
        align-content: flex-start;
        overflow: auto;
        position: relative;
    }

    div.access__main::-webkit-scrollbar {
        background: transparent;
        width: 4px;
    }

    div.access__main::-webkit-scrollbar-thumb {
        background: var(--color-primary);
    }

    div.access__main:has(#structureHn.visible) {
        overflow: hidden;
    }

    div.access__main button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        background: #fff;
        aspect-ratio: 133/115;
        height: auto;
        display: grid;
        place-items: center;
        place-content: center;
        gap: 10px;
        padding: 5px;
        font-size: 16px;
        font-weight: 600;
        border: 1px solid rgb(242, 242, 248);
        box-shadow: #191b1e08 0 0 5px;
        border-radius: 8px;
    }

    div.access__main button svg {
        width: 20px;
        height: 20px;
    }

    div.access__main button path {
        fill: var(--color-primary);
    }

    div.access__main button:hover {
        box-shadow: var(--color-primary) 0 0 5px;
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    div.access__main button.active,
    div.access__main button:has(.acces__step.active) {
        box-shadow: var(--color-primary) 0 0 5px;
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }

    div.access__main button.active path,
    div.access__main button:has(.acces__step.active) path {
        fill: currentColor;
    }

    div.access__subsection b {
        font-size: 20px;
        font-weight: 900;
        display: block;
        margin-bottom: 15px;
    }

    div.access__buttons {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ncAccess--exergueLiens a {
        background: #000 !important;
        color: #ff0 !important;
        text-decoration: underline !important;
    }

    .ncAccess--cacherImages * {
        background-size: 0 0 !important;
        background-repeat: no-repeat !important;
    }

    .ncAccess--cacherImages :is(img) {
        opacity: 0 !important;
    }

    .ncAccess--dyslexicMode * {
        font-family: opendyslexic, Arial, sans-serif !important;
    }

    .ncAccess--lisibleMode * {
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .ncAccess--bigCursor:hover,
    .ncAccess--bigCursor * {
        cursor: url(data:image/png;base64,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),
        default;
    }

    .ncAccess--stopAnim * {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }

    .ncAccess--lineHeight * {
        line-height: 1.8;
    }

    .ncAccess--lineHeight .access * {
        line-height: 1.1;
    }

    html[class] {
        background: #fff;
    }

    html.ncAccess--grayscale {
        filter: grayscale(1);
    }

    html.ncAccess--invertColor {
        filter: invert(1);
    }

    html.ncAccess--luminosity {
        filter: brightness(75%);
    }

    html.ncAccess--saturation {
        filter: saturate(75%);
    }

    html.ncAccess--contrast header,
    html.ncAccess--contrast footer,
    html.ncAccess--contrast main {
        background: white;
        color: black;
    }

    html.ncAccess--contrast header *,
    html.ncAccess--contrast footer *,
    html.ncAccess--contrast main * {
        background: white;
        color: black;
        border-color: black;
    }

    html.ncAccess--contrast input {
        border-width: 1px;
    }

    html.ncAccess--contrast svg {
        fill: black;
    }

    html.ncAccess--contrast .homeTriangle {
        display: none;
    }

    html:has(.ncAccess--biggerText1) {
        font-size: 18px;
    }

    html:has(.ncAccess--biggerText2) {
        font-size: 20px;
    }

    html:has(.ncAccess--biggerText3) {
        font-size: 22px;
    }

    .access-steps {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .access-steps .acces__step {
        display: block;
        width: 22px;
        height: 4px;
        background: #0006;
        border-radius: 4px;
    }

    .access-steps .acces__step.active {
        background: #fff;
    }

    #ligneLecture {
        position: fixed;
        pointer-events: none;
        left: 0;
        right: 0;
        height: 5px;
        background: #000;
        z-index: 99999999;
        display: none;
    }

    #ligneLecture.visible {
        display: block;
    }

    #accessTools * {
        pointer-events: none;
    }

    #accessTools {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }

    #masqueLecture {
        position: fixed;
        pointer-events: none;
        left: 0;
        right: 0;
        height: 25lvh;
        transform: translateY(-50%);
        z-index: 99999999;
        display: none;
    }

    #masqueLecture:before {
        left: 0;
        right: 0;
        bottom: 100%;
        height: 100vh;
        position: absolute;
        content: "";
        background: #0009;
        pointer-events: none;
    }

    #masqueLecture:after {
        left: 0;
        right: 0;
        top: 100%;
        height: 100vh;
        position: absolute;
        content: "";
        background: #0009;
        pointer-events: none;
    }

    #masqueLecture.visible {
        display: block;
    }

    #structureHn {
        margin: 0;
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        list-style: none;
        align-content: flex-start;
        background: #fff;
        padding: 30px;
        gap: 5px;
    }

    #structureHn button {
        background: var(--color-primary);
        aspect-ratio: unset;
        padding: 5px 10px;
        margin-bottom: 15px;
        color: #fff;
    }

    #structureHn.visible {
        display: grid;
    }

    #structureHn li.H2 {
        padding-left: 10px;
    }

    #structureHn li.H3 {
        padding-left: 20px;
    }

    #structureHn li.H4 {
        padding-left: 30px;
    }

    #structureHn li.H5 {
        padding-left: 40px;
    }

    #structureHn li.H6 {
        padding-left: 50px;
    }

    #structureHn span {
        display: inline-block;
        padding: 2px 5px;
        background: #3e3e3e;
        color: #fff;
    }

    .ncAccess--toggleInfoBulle #infoBulle {
        display: block;
    }

    #infoBulle {
        display: none;
        position: fixed;
        box-shadow: 0 4px 8px #0003,
        0 6px 20px #00000030;
        padding: 5px 10px;
        background: #fff;
        transform: translateY(-100%);
        font-size: 1.125rem;
        opacity: 1;
    }

    #infoBulle:empty {
        opacity: 0;
    }

    /* Bouton flottant d'ouverture */
    button.accessibilite {
        position: fixed;
        @media (width > 1200px) {
            top: 20px;
            right: 20px;
        }
        @media (width <= 1200px) {
            bottom: 20px;
            right: 20px;
        }
        z-index: 99999998;
        width: 50px;
        height: 50px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--color-primary);
        color: #fff;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    button.accessibilite:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }

    button.accessibilite:focus {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    button.accessibilite svg {
        width: 28px;
        height: 28px;
    }

    button.accessibilite svg path,
    button.accessibilite svg rect {
        fill: currentColor;
        stroke: currentColor;
    }
}