/*
Definition des variables css.

Note:
    *-csl (color-scheme-light) = variante pour fond clair (par défaut)
    *-csd (color-scheme-dark) = variante pour fond sombre

*/
:root {
    font-size: 10px;
    accent-color: var(--background-color-evidence);
}


:root,
.sample-root {

    --teinte-rouge:     350;
    --teinte-brun:       20;
    --teinte-orange:     30;
    --teinte-jaune:      50;
    --teinte-vert:      115;
    --teinte-turquoise: 180;
    --teinte-bleu:      225;
    --teinte-violet:    270;
    --teinte-fuchsia:   310;


    --rouge-csl:  hsl(var(--teinte-rouge), 87.2%, 47%); /* hwb(350, 6%, 12%); */
    --vert-csl:   hsl(var(--teinte-vert), 71.4%, 35%); /* hwb(115, 10%, 40%); */
    --bleu-csl:   hsl(var(--teinte-bleu), 77.8%, 45%); /* hwb(225, 10%, 20%) */
    --violet-csl: hsl(var(--teinte-violet), 77.8%, 45%); /* hwb(270, 10%, 20%); */
    --marine-csl: hsl(214.5, 46.0%, 37.1%); /* hwb(214.5, 20.0%, 45.9%); #33588a; couleur legacy des icônes */
    --creme-csl:  hsl(var(--teinte-jaune), 100%, 90%); /* hwb(50,  80%, 0%); */

    --color-csl:            hsl(0, 0%,  20%);
    --color-light-csl:      hsl(0, 0%, 50%);
    --color-ultralight-csl: hsl(0, 0%, 73.3%);

    --background-color-csl:          hsl(0,  0%, 100%);
    --background-color-alt-csl:      hsl(0,  0%,  95%);
    --background-color-semidark-csl: hsl(0,  0%,  92%);
    --background-color-dark-csl:     hsl(0,  0%,  88%);

    --background-color-ok-csl:            hsl(var(--teinte-vert), 100%,  92%);
    --background-color-ok-alt-csl:        hsl(var(--teinte-vert), 59.3%,  86.5%);

    --background-color-incorrect-csl:       hsl(var(--teinte-rouge), 100%,  94%);
    --background-color-incorrect-alt-csl:   hsl(var(--teinte-rouge), 51.7%,  88.4%);


    --rouge-csd:  hsl(var(--teinte-rouge), 83%, 65%);  /* hwb(350, 35%, 6%) */
    --vert-csd:   hsl(var(--teinte-vert), 60%, 63%); /* hwb(115, 40%, 15%); */
    --bleu-csd:   hsl(var(--teinte-bleu), 100%, 80%); /* hwb(225, 60%, 0%) */
    --violet-csd: hsl(var(--teinte-violet), 100%, 80%); /* hwb(270, 60%, 0%); */
    --marine-csd: hsl(214.5, 92.2%, 66.7%); /* hwb(214.5, 36.0%, 2.6%); --marine-csl avec filter: var(--filter-icone-csd)  */
    --creme-csd:  hsl(var(--teinte-jaune), 50%, 20%); /* hwb(50,  10%, 70%); */

    --color-csd:            hsl(0, 0%, 95%);
    --color-light-csd:      hsl(0, 0%, 60%);
    --color-ultralight-csd: hsl(0, 0%, 35%);

    --background-color-csd:           hsl(0,  0%,  15%);
    --background-color-alt-csd:       hsl(0,  0%,  22%);
    --background-color-semidark-csd:  hsl(0,  0%,  27%);
    --background-color-dark-csd:      hsl(0,  0%,  32%);

    --background-color-ok-csd:            hsl(var(--teinte-vert), 100%,  20%);
    --background-color-ok-alt-csd:        hsl(var(--teinte-vert), 59.3%,  30%);

    --background-color-incorrect-csd:       hsl(var(--teinte-rouge), 100%,  15%);
    --background-color-incorrect-alt-csd:   hsl(var(--teinte-rouge), 51.7%,  20%);


    --marine-unadjusted: var(--marine-csl);

    --filter-invert:        invert(0.85) hue-rotate(180deg) saturate(1.42); /* doit mapper --background-color-csl sur --background-color-csd */


    --border-theme:            thin solid var(--color-theme);
    --border-theme-light:      thin solid var(--color-theme-light);
    --border-theme-ultralight: thin solid var(--color-theme-ultralight);
    --border-theme-large:      medium solid var(--color-theme-light);


     /* pour les paramètres d’accessibilité qui forcent les couleurs et suppriment les ombres, on met un outline transparent */
    --outline-focus        : solid medium transparent;
    --outline-offset-focus : 3px;
    --box-shadow-focus     : 0 0 2px 3px var(--color-evidence);


    --font-family-titre: Comfortaa, sans-serif;
    --font-weight-titre: normal;
    --font-size-titre-1:     2.8rem;
    --font-size-titre-2:     1.9rem;
    --font-size-titre-3:     1.6rem;
    --font-size-titre-table: 1.4rem;
    --color-titre:            var(--color-theme-light);
    --color-titre-complement: var(--color-theme-ultralight);
    --color-titre-sombre:     var(--color-theme);


    --font-family-navigation: Comfortaa, sans-serif;
    --font-size-navigation:   1.4rem;
    --font-weight-navigation: normal;
    --font-weight-navigation-actif:   normal;
    --color-navigation-light:       var(--color-light);
    --color-navigation:             var(--color);
    --color-navigation-actif:       var(--color-theme);
    --border-bottom-navigation-inactif: thin solid transparent;
    --border-bottom-navigation-actif: thin solid currentColor;


    --padding-dialog: 1rem;


    --font-size-menu-1: 1.5rem;
    --font-size-menu-2: 1.3rem;
    --font-size-menu:   1.2rem;


    --reserve-petit: 0.6rem;


    --border-frame:         thin solid var(--color-light);
    --border-input:         thin solid var(--color-ultralight);
    --border-input-field:   thin solid var(--color-light);
    --border-input-field-disabled: var(--border-input);

    --border-radius-input: 1px;
    --border-radius-search-fallback: 5px;
    --border-radius-input-field: 3px;
    --border-radius-checkbox: 3px;
    --border-radius-menulist: 5px;
    --border-radius-button: 6px;

    --border-textfield-full-border: none;
    --display-textfield-bottom-border: block;

    --background-color-input:           var(--background-color);
    --background-color-input-readonly:  var(--background-color-alt);
    --background-color-input-disabled:  var(--background-color-dark);
    --color-input:                      var(--color);
    --color-input-disabled:             var(--color-light);

    --height-input: 2.4rem;
    --height-search: 3rem;
    --height-button: 2.4rem;

    --padding-input-field: 0.5rem;
    --padding-left-search-field: 3.6rem;
    --padding-select: 1rem;
    --padding-right-select: 2.6rem;

    --font-size-pied:  1.4rem;
    --color-pied:      var(--color-light);
    --color-link-pied: inherit;


    --font-family-calendrier: var(--font-family-corps);
    --font-size-calendrier:         1.5rem;
    --font-size-calendrier-fleche:  145%;
    --font-size-calendrier-mois:    120%;
    --font-size-calendrier-semaine: 100%;
    --font-size-calendrier-jour:     95%;
    --cell-width-calendrier: 3rem;


    --color-tag-1: hsl(var(--teinte-rouge)    , 100%,  60%);
    --color-tag-2: hsl(var(--teinte-orange)   , 100%,  60%);
    --color-tag-3: hsl(var(--teinte-jaune)    ,  90%,  50%);
    --color-tag-4: hsl(var(--teinte-vert)     ,  60%,  50%);
    --color-tag-5: hsl(var(--teinte-bleu)     , 100%,  70%);
    --color-tag-6: hsl(var(--teinte-violet)   , 100%,  70%);
    --color-tag-7: hsl(0                      ,   0%,  60%);
    --color-tag-8: hsl(var(--teinte-brun)     , 100%,  30%);
    --color-tag-9-csl: hsl(0                  ,   0%,   0%);
    --color-tag-9-csd: hsl(0                  ,   0%,  90%);
}

:root,
.sample-root {
    --color-theme-sample:              hsl(var(--teinte-bleu), 77.8%, 45.0%);
    --color-theme-csl:                 hsl(var(--teinte-bleu), 77.8%, 45.0%);
    --color-theme-light-csl:           hsl(var(--teinte-bleu), 63.6%, 67.0%);
    --color-theme-ultralight-csl:      hsl(var(--teinte-bleu), 63.6%, 83.5%);
    --background-color-theme-dark-csl: hsl(var(--teinte-bleu), 63.6%, 91.8%);
    --color-theme-csd:                 hsl(var(--teinte-bleu), 100.0%, 80.0%);
    --color-theme-light-csd:           hsl(var(--teinte-bleu), 26.1%, 54.0%);
    --color-theme-ultralight-csd:      hsl(var(--teinte-bleu), 17.4%, 34.5%);
    --background-color-theme-dark-csd: hsl(var(--teinte-bleu), 12.1%, 24.7%);
    --color-theme-icon-csl:            hsl(var(--teinte-bleu), 63.6%, 56.0%);
    --color-theme-icon-csd:            hsl(var(--teinte-bleu), 48.5%, 67.0%);
    --color-colored-csl: var(--color-theme-csl);
    --color-colored-csd: var(--color-theme-csd);
    --color-colored-ultralight-csl:      hsl(var(--teinte-bleu), 63.6%, 83.5%);
    --color-colored-ultralight-csd:      hsl(var(--teinte-bleu), 17.4%, 34.5%);
}


:root,
.sample-root {
    --color-link: var(--color);
    --color-link-visited: var(--color);
    --color-link-active: var(--color);
}

:root,
.sample-root {
    --color-icon: var(--color-theme-icon);
    --filter-icone-csl: none;
    --filter-icone-csd: none;
}

:root,
.sample-root {
    --background-color-evidence-csl:      hsl(var(--teinte-bleu), 100%, 94%);
    --background-color-evidence-alt-csl:  hsl(var(--teinte-bleu), 51.7%,  88.4%);

    --background-color-incorrect-evidence-csl:      hsl(var(--teinte-violet), 100%, 94%);
    --background-color-incorrect-evidence-alt-csl:  hsl(var(--teinte-violet), 51.7%,  88.4%);

    --color-evidence-csl: hsla(var(--teinte-bleu), 100%, 80%, 0.5);


    --background-color-evidence-csd:      hsl(var(--teinte-bleu), 80%, 15%);
    --background-color-evidence-alt-csd:  hsl(var(--teinte-bleu), 40%, 20%);

    --background-color-incorrect-evidence-csd:      hsl(var(--teinte-violet), 100%, 15%);
    --background-color-incorrect-evidence-alt-csd:  hsl(var(--teinte-violet), 51.7%,  20%);

    --color-evidence-csd:   hsla(var(--teinte-bleu), 100%, 70%, 0.5);
}
:root,
.sample-root {
    --font-family-corps: Montserrat, sans-serif;
    --font-size-corps:   1.3rem;

    --font-family-input: Montserrat, sans-serif;
    --font-size-input: 1.15rem;
    --font-size-input-large: 1.3rem;
    --font-size-input-xlarge: 1.5rem;
}

:root,
.sample-root {
    color-scheme: light;

    --rouge: var(--rouge-csl);
    --vert: var(--vert-csl);
    --bleu: var(--bleu-csl);
    --violet: var(--violet-csl);
    --marine: var(--marine-csl);
    --creme: var(--creme-csl);

    --color:            var(--color-csl);
    --color-light:      var(--color-light-csl);
    --color-ultralight: var(--color-ultralight-csl);

    --background-color:          var(--background-color-csl);
    --background-color-alt:      var(--background-color-alt-csl);
    --background-color-semidark: var(--background-color-semidark-csl);
    --background-color-dark:     var(--background-color-dark-csl);

    --color-theme:                 var(--color-theme-csl);
    --color-theme-light:           var(--color-theme-light-csl);
    --color-theme-ultralight:      var(--color-theme-ultralight-csl);
    --background-color-theme-dark: var(--background-color-theme-dark-csl);

    --color-colored: var(--color-colored-csl);
    --color-colored-ultralight: var(--color-colored-ultralight-csl);

    --background-color-evidence:      var(--background-color-evidence-csl);
    --background-color-evidence-alt:  var(--background-color-evidence-alt-csl);

    --background-color-ok:            var(--background-color-ok-csl);
    --background-color-ok-alt:        var(--background-color-ok-alt-csl);

    --background-color-incorrect:       var(--background-color-incorrect-csl);
    --background-color-incorrect-alt:   var(--background-color-incorrect-alt-csl);

    --background-color-incorrect-evidence:      var(--background-color-incorrect-evidence-csl);
    --background-color-incorrect-evidence-alt:  var(--background-color-incorrect-evidence-alt-csl);

    --color-evidence:   var(--color-evidence-csl);

    --background-button: var(--background-button-csl);
    --background-button-hover: var(--background-button-hover-csl);
    --background-button-active: var(--background-button-active-csl);
    --background-button-disabled: var(--background-button-disabled-csl);

    --background-button-evidence: var(--background-button-evidence-csl);
    --background-button-evidence-hover: var(--background-button-evidence-hover-csl);
    --background-button-evidence-active: var(--background-button-evidence-active-csl);
    --background-button-evidence-disabled: var(--background-button-evidence-disabled-csl);

    --color-button: var(--color-csl);
    --color-button-hover: var(--color-csl);
    --color-button-active: var(--color-csl);
    --color-button-disabled: var(--color-light-csl);
    --color-button-evidence: var(--color-csl);
    --color-button-evidence-hover: var(--color-csl);
    --color-button-evidence-active: var(--color-csl);
    --color-button-evidence-disabled: var(--color-light-csl);

    --background-buttonlike: var(--background-buttonlike-csl);
    --background-buttonlike-active: var(--background-buttonlike-active-csl);
    --background-buttonlike-checked: var(--background-buttonlike-checked-csl);
    --background-buttonlike-evidence: var(--background-buttonlike-evidence-csl);
    --background-buttonlike-evidence-active: var(--background-buttonlike-evidence-active-csl);

    --background-color-select-option: var(--background-color-select-option-csl);

    --background-color-hover:      hsla(60, 100%, 50%, 0.10);

    --background-color-backdrop: hsl(0, 0%, 20%);

    --color-theme-icon: var(--color-theme-icon-csl);
    --filter-icone: var(--filter-icone-csl);

    --filter-invert-if-csd: invert(0); /* équivalent à none, mais peut être composé avec d'autres filtres */

    --color-tag-9: var(--color-tag-9-csl);

    --background-color-priorite-1:  hsl(  0, 80%,  90%);
    --background-color-priorite-2:  hsl( 60, 80%,  90%);
    --background-color-priorite-3:  hsl(  0,  0%, 100%);
    --background-color-priorite-4:  hsl(120, 80%,  90%);
    --background-color-priorite-5:  hsl(240, 80%,  95%);

    --background-color-priorite-1-alt:  hsl(  0, 60%,  80%);
    --background-color-priorite-2-alt:  hsl( 60, 60%,  80%);
    --background-color-priorite-3-alt:  hsl(  0,  0%,  94%);
    --background-color-priorite-4-alt:  hsl(120, 60%,  80%);
    --background-color-priorite-5-alt:  hsl(240, 60%,  90%);
}
::backdrop {
    --background-color-backdrop: hsl(0, 0%, 20%);
}

:root,
.sample-root {
    --border-radius-tag-1:  50%;
    --transform-tag-1:  none;
    --border-radius-tag-2:  50%;
    --transform-tag-2:  none;
    --border-radius-tag-3:  50%;
    --transform-tag-3:  none;
    --border-radius-tag-4:  50%;
    --transform-tag-4:  none;
    --border-radius-tag-5:  50%;
    --transform-tag-5:  none;
    --border-radius-tag-6:  50%;
    --transform-tag-6:  none;
    --border-radius-tag-7:  50%;
    --transform-tag-7:  none;
    --border-radius-tag-8:  50%;
    --transform-tag-8:  none;
    --border-radius-tag-9:  50%;
    --transform-tag-9:  none;
}

:root,
.sample-root {
    --background-button-csl: var(--background-color-alt-csl);
    --background-button-hover-csl: var(--background-color-semidark-csl);
    --background-button-active-csl: var(--background-color-evidence-csl);
    --background-button-disabled-csl: var(--background-color-dark-csl);

    --background-button-evidence-csl: hsl(var(--teinte-vert), 58%, 82%);
    --background-button-evidence-hover-csl: hsl(var(--teinte-vert), 58%, 76%);
    --background-button-evidence-active-csl: var(--background-color-evidence-csl);
    --background-button-evidence-disabled-csl: hsl(var(--teinte-vert), 30%, 85%);

    --background-buttonlike-csl: var(--background-color-alt-csl);
    --background-buttonlike-active-csl: var(--background-color-evidence-csl);
    --background-buttonlike-checked-csl: var(--background-color-evidence-csl);
    --background-buttonlike-evidence-csl: var(--background-color-evidence-csl);
    --background-buttonlike-evidence-active-csl: var(--background-color-evidence-csl);

    --background-color-select-option-csl: var(--background-color-alt-csl);


    --background-button-csd:  var(--background-color-alt-csd);
    --background-button-hover-csd:  var(--background-color-semidark-csd);
    --background-button-active-csd: var(--background-color-evidence-csd);
    --background-button-disabled-csd: var(--background-color-dark-csd);

    --background-button-evidence-csd: hsl(var(--teinte-vert), 50%, 25%);
    --background-button-evidence-hover-csd: hsl(var(--teinte-vert), 50%, 30%);
    --background-button-evidence-active-csd: var(--background-color-evidence-csd);
    --background-button-evidence-disabled-csd: hsl(var(--teinte-vert), 25%, 20%);

    --background-buttonlike-csd: var(--background-color-alt-csd);
    --background-buttonlike-active-csd: var(--background-color-evidence-csd);
    --background-buttonlike-checked-csd: var(--background-color-evidence-csd);
    --background-buttonlike-evidence-csd: var(--background-color-evidence-csd);
    --background-buttonlike-evidence-active-csd: var(--background-color-evidence-csd);

    --background-color-select-option-csd: var(--background-color-alt-csd);
}

:root,
.sample-root {
    --background-header: linear-gradient(var(--background-color-theme-dark), var(--background-color));
}