/* theme et illustration par Jérémie Fontaine pour Avignon Université */
:root {
    --color-transparent: transparent;
    --color-light: #fff;
    --color-blue-light7: #e7eff9;
    --color-blue-light6: #E3E6EF;
    --color-blue-light5: #ccd2e5;
    --color-blue-light4: #C3D2FD;
    --color-blue-light3: #bfd3ef;
    --color-blue-light2: #a2b1e8;
    --color-blue-light: #899ec8;
    --color-blue: #6E99FC;
    --color-blue-dark: #0052bd;
    --color-blue-dark2: #3952AC;
    --color-blue-dark3: #00377d;
    --color-blue-dark4: #273a76;
    --color-blue-dark5: #101d5e;
    --color-blue-dark6: #020b27;
    --color-tan: #f6a500;
    --color-tan-dark: #c58800;
    --color-red: #e85145;
    --color-red-dark: #ba4745;
    --url-image: url("../img/illustration-claire.webp");
    --color-page: var(--color-light);
    --color-panel: var(--color-page);
    --color-panel-title: var(--color-blue-dark);
    --color-panel-focus: var(--color-blue-light);
    --color-text: var(--color-blue-dark6);
    --color-title: var(--color-blue-dark6);
    --color-separator: var(--color-blue-light3);
    --color-selection: var(--color-light);
    --color-selection-background: var(--color-blue);
    --color-focus: var(--color-blue);
    --color-button-focus: var(--color-blue-light3);
    --color-input: var(--color-blue-dark3);
    --color-input-background: var(--color-blue-light3);
    --color-input-hover: var(--color-text);
    --color-input-background-hover: var(--color-blue-light7);
    --color-placeholder: var(--color-text);
    --color-placeholder-hover: var(--color-text);
    --color-button: var(--color-blue-light3);
    --color-button-background: var(--color-blue-dark3);
    --color-button-hover: var(--color-light);
    --color-button-background-hover: var(--color-blue-dark);
    --color-option: var(--color-blue-dark3);
    --color-option-background: var(--color-light);
    --color-link: var(--color-blue-dark3);
    --color-link-hover: var(--color-blue);
    --color-logo-primary: var(--color-tan);
    --color-logo-secondary: var(--color-red);
    --transition: 0.3s color ease-in-out,  0.3s outline-color ease-in-out,  0.3s background-color ease-in-out;
    --size-fixed: 1.6;
    --size-fluid: 1;
    --size-small: 0.7;
    --size-border: 2px;
}
@font-face {
    font-family: "Filson";
    src: url("/cas/themes/avignon/FilsonPro-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Filson";
    src: url("/cas/themes/avignon/FilsonPro-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*, *:after, *:before {
    box-sizing: inherit;
}
a, body, div, footer, form, h1, h2, h3, h4, h5, h6, header, html, img, label, main, p, span {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
aside, footer, header, main, section {
    display: block;
}
html {
    box-sizing: border-box;
    height: 100%;
    font-family: "Filson", sans-serif;
}
button, input {
    border: none;
    font-family: inherit;
    color: inherit;
}
::selection {
    color: var(--color-selection);
    background-color: var(--color-selection-background);
}
::placeholder {
    opacity: 1;
    transition: var(--transition);
    color: var(--color-placholder);
    background-color: transparent;
}
:focus-visible::placeholder, :focus::placeholder, :hover::placeholder {
    color: var(--color-placeholder-hover);
}
:focus, :focus-visible, [type="submit"]:focus-visible {
    outline: var(--size-border) solid var(--color-focus);
}
[type="submit"]:focus-visible {
    outline-color: var(--color-button-focus);
}
body {
    font-size: 62.5%;
    display: flex;
    justify-content: flex-start;
    line-height: 1.2;
    align-items: center;
    min-height: 100%;
    color: var(--color-text);
    background-color: var(--color-page);
    background-image: var(--url-image);
    background-repeat: no-repeat;
    background-position: center 8vh;
    background-size: contain;
    padding: 0 calc(1 / var(--size-fixed) * 1rem);
    background-clip: border-box;
    min-height: 100%;
    scrollbar-width: thin;
    font-family: inherit;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.25em;
    margin-bottom: 1em;
}
P + p {
    margin-top: 1em;
}
a {
    color: var(--color-link);
}
a:focus, a:focus-visible, a:hover {
    color: var(--color-link-hover);
}
.lien {
    color: var(--color-link);
    fill: var(--color-link);
    white-space: nowrap;
    text-decoration: none;
}
.lien:focus, .lien:focus-visible, .lien:hover {
    color: var(--color-link-hover);
    fill: var(--color-link-hover);
}
.lien, button, input {
    transition: var(--transition);
}
.titre {
    text-transform: uppercase;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1;
    color: var(--color-title);
}
button, input {
    outline-width: var(--size-border);
    outline-color: var(--color-transparent);
    border-radius: 1.75em;
    padding: calc(1 / var(--size-fluid) * 1em) calc(1.5 / var(--size-fluid) * 1em);
    font-size: calc(1.2 / var(--size-fluid) * 1em);
    vertical-align: middle;
    line-height: 1;
    max-width: 100%}
input {
    color: var(--color-input);
    background-color: var(--color-input-background);
}
input[type="search"] {
    font-size: 1em;
    width: 12rem;
    max-width: 100%}
input:focus, input:focus-visible, input:hover {
    color: var(--color-input-hover);
    background-color: var(--color-input-background-hover);
}
button {
    position: relative;
    text-transform: uppercase;
    align-self: center;
    cursor: pointer;
    overflow: hidden;
    margin-top: calc(1 / var(--size-fixed) * 1rem);
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
    max-width: 100%;
    color: var(--color-button);
    background-color: var(--color-button-background);
}
button:focus, button:focus-visible, button:hover {
    color: var(--color-button-hover);
    background-color: var(--color-button-background-hover);
}
button:focus, button:focus-visible {
    outline-color: var(--color-light);
}
::-webkit-validation-bubble {
    background-color: yellow;
}
select > option {
    color: var(--color-option);
    background-color: var(--color-option-background);
}
#main-content {
    text-align: center;
    font-size: calc(var(--size-fluid) * 1em);
    min-width: calc(20 / var(--size-fixed) * 1rem);
    width: 100%;
    max-width: calc(40 / var(--size-fluid) * 1em);
    padding: calc(4 / var(--size-fixed) * 1rem) calc(2 / var(--size-fixed) * 1rem);
    border-radius: calc(4 / var(--size-fixed) * 1rem);
    z-index: 3;
}
#content {
    display: flex;
    gap: 1em;
    flex-direction: column;
    margin-top: calc(2 / var(--size-fixed) * 1rem);
}
#content > h2 {
    margin-bottom: 0;
}
#loginForm {
    max-width: 100%}
#login-form-controls {
    display: flex;
    gap: 1em;
    flex-direction: column;
}
#login-form-controls .banner-dismissible {
    padding-right: 1rem;
}
#login-form-controls [type="submit"] {
    margin-top: 0;
}
#content.banner.m-auto, #content.card.m-auto {
    margin-top: 2rem !important;
}
.login #content .card {
    border: none;
    background: none;
    align-self: auto;
    padding: 0;
}
.intro {
    display: flex;
    flex-direction: column;
    gap: calc(1.5 / var(--size-fixed) * 1rem);
}
.logo {
    display: block;
    padding: calc(2 / var(--size-fixed) * 1rem);
    border-radius: calc(4 / var(--size-fixed) * 1rem);
}
.logo__svg {
    width: 5em;
}
.logo__initiale-u, .logo__universite {
    fill: var(--color-logo-primary);
}
.logo__avignon, .logo__initiale-a {
    fill: var(--color-logo-secondary);
}
.caps-warn {
    display: none;
}
.banner, .card {
    border: none;
    padding: 0.5rem 1rem;
    box-shadow: none;
    border-radius: 1rem;
    text-align: left;
    align-self: center;
}
.banner {
    margin-bottom: 1.2rem;
    display: inline-block;
}
.banner-danger {
    color: var(--color-page);
    background-color: var(--color-logo-secondary);
}
.card {
    border: var(--size-border) solid var(--color-panel-focus);
    background-color: var(--color-page);
}
.card h2 {
    color: var(--color-panel-title);
}
.card.p-4 {
    padding: 2.5rem !important;
}
.card.banner-danger {
    border-color: var(--color-logo-secondary);
    color: var(--color-text);
    background-color: var(--color-panel);
}
.card.banner-danger > h2 {
    color: var(--color-logo-secondary);
}
.infos {
    display: flex;
    font-size: 0.875em;
    gap: 1.2em;
    align-items: flex-start;
    line-height: 1.2;
    color: var(--color-text);
    margin-top: calc(4 / var(--size-fixed) * 1rem);
}
.infos__lien {
    flex: 1 1 auto;
    gap: calc(0.25 / var(--size-fluid) * 1em) calc(2 / var(--size-fluid) * 1em);
    text-align: left;
}
.infos__texte {
    flex: 1 1 auto;
    text-align: left;
    margin-top: 0;
}
.ico {
    width: 1em;
    height: 1em;
}
.lien .ico, .lien:focus .ico, .lien:focus-visible .ico, .lien:hover .ico {
    fill: inherit;
    vertical-align: middle;
}
.lien__text {
    text-decoration: underline;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,  0,  0,  0);
    white-space: nowrap;
    border: 0;
}
.mdc-text-field-helper-text {
    margin: 0 auto;
}
.mdc-text-field {
    justify-content: center;
    max-width: 100%;
    width: 100%}
.mdc-text-field > input {
    width: 100%}
.mdc-text-field--outlined {
    height: auto;
}
.mdc-text-field-helper-text {
    font-family: inherit;
}
@supports (top: max(0%)) {
    .mdc-text-field--outlined, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
    padding-left: 0;
    padding-right: 0;
}
}.mdc-text-field + .mdc-text-field-helper-line {
    padding-right: 0;
    padding-left: 0;
}
.mdc-typography {
    font-family: inherit;
}
.mdc-text-field-helper-text[aria-hidden="true"] {
    width: 0;
    height: 0;
    overflow: hidden;
}
.mdc-tab-bar {
    margin-top: 1em;
}
.mdc-tab-bar button {
    border-radius: 0;
    padding: calc(.25 / var(--size-fluid) * 1em) calc(1 / var(--size-fluid) * 1em) calc(.5 / var(--size-fluid) * 1em);
}
.mdc-tab-bar button:focus, .mdc-tab-bar button:focus-visible, .mdc-tab-bar button:hover {
    color: var(--color-button-hover);
    background-color: var(--color-button-background-hover);
    outline: none;
}
.mdc-tab .mdc-tab__text-label {
    color: var(--color-text);
}
.mdc-tab--active .mdc-tab__text-label {
    color: var(--color-panel-title);
}
.mdc-tab-bar button:focus-visible.mdc-tab .mdc-tab__text-label, .mdc-tab-bar button:focus.mdc-tab .mdc-tab__text-label, .mdc-tab-bar button:hover.mdc-tab .mdc-tab__text-label {
    color: var(--color-button-hover);
}
.mdc-tab-indicator .mdc-tab-indicator__content--underline {
    border-color: var(--color-panel-title);
}
.mdc-data-table {
    border: none;
    background-color: var(--color-page);
}
.mdc-data-table.my-4 {
    margin-bottom: 0 !important;
}
.mdc-data-table__cell {
    font-size: calc(var(--size-small) * 1em);
}
.mdc-data-table__cell, .mdc-data-table__header-cell, .mdc-data-table__pagination-rows-per-page-label, .mdc-data-table__pagination-total {
    color: var(--color-text);
}
.mdc-data-table__header-cell {
    background-color: var(--color-page);
}
.mdc-data-table__cell, .mdc-data-table__header-cell {
    border-bottom-color: var(--color-separator);
}
.mdc-button--raised:not(:disabled) {
    outline-width: var(--size-border);
    outline-color: var(--color-transparent);
    border-radius: 1.75em;
    padding: calc(1 / var(--size-fluid) * 1em) calc(2.5 / var(--size-fluid) * 1em);
    font-size: calc(1.2 / var(--size-fluid) * 1em);
    vertical-align: middle;
    line-height: 1;
    max-width: 100%;
    position: relative;
    text-transform: uppercase;
    align-self: center;
    cursor: pointer;
    overflow: hidden;
    margin-top: calc(1 / var(--size-fixed) * 1rem);
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
    max-width: 100%;
    color: var(--color-button);
    background-color: var(--color-button-background);
    box-shadow: none;
    transition: var(--transition);
}
.mdc-button--raised:not(:disabled):focus, .mdc-button--raised:not(:disabled):focus-visible, .mdc-button--raised:not(:disabled):hover {
    color: var(--color-button-hover);
    background-color: var(--color-button-background-hover);
    box-shadow: none;
}
.login .my-3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
table.dataTable {
    margin: 0 -0.5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--color-button) !important;
    background: var(--color-button-background) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--color-button) !important;
    background: var(--color-button-background);
}
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_processing {
    color: var(--color-text);
}
table.dataTable thead td, table.dataTable thead th, table.dataTable.no-footer {
    border-bottom-color: var(--color-separator);
}
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    border-color: var(--color-separator);
    color: var(--color-text);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    text-decoration: underline !important;
    color: var(--color-lien) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--color-input) !important;
    text-decoration: none !important;
}
#attributesTable_filter, #attributesTable_length {
    margin-bottom: 5px;
}
@media (min-width: 400px) {
    body {
    justify-content: center;
}
}@media (min-width: 400px) and (min-height: 520px) {
    button, input {
    font-size: calc(1.6 / var(--size-fluid) * 1em);
}
button {
    letter-spacing: 0.2em;
}
#content {
    margin-top: calc(4 / var(--size-fixed) * 1rem);
}
.titre {
    font-size: 1.75em;
}
.intro {
    gap: calc(2 / var(--size-fixed) * 1rem);
}
.logo__svg {
    width: 7.5em;
}
.infos {
    flex-direction: row;
    text-align: left;
}
.infos__lien {
    flex-direction: column;
    gap: calc(0.5 / var(--size-fluid) * 1em);
}
}@media (min-width: 600px) and (min-height: 840px) {
    :root {
    --size-fluid: 1.6;
    --size-small: 1;
    --size-border: 3px;
}
button, input {
    font-size: calc(2.4 / var(--size-fluid) * 1em);
    padding: calc(1.5 / var(--size-fluid) * 1em) calc(3 / var(--size-fluid) * 1em);
}
.intro {
    flex-direction: column;
    gap: calc(2.5 / var(--size-fixed) * 1rem);
}
#main-content {
    border-radius: calc(10 / var(--size-fixed) * 1rem);
    padding: calc(8 / var(--size-fixed) * 1rem) calc(5 / var(--size-fixed) * 1rem);
    max-width: calc(60 / var(--size-fluid) * 1em);
}
body {
    background-position: center top;
}
}@media (min-width: 1200px) {
    body {
    background-position: center;
}
}@media (prefers-color-scheme: dark) {
    :root {
    --url-image: url("/cas/themes/avignon/illustration-sombre.webp");
    --color-page: var(--color-blue-dark5);
    --color-panel: var(--color-page);
    --color-panel-title: var(--color-blue);
    --color-panel-focus: var(--color-blue-dark3);
    --color-text: var(--color-blue-light6);
    --color-title: var(--color-blue-light2);
    --color-separator: var(--color-blue-dark2);
    --color-selection: var(--color-blue-dark3);
    --color-selection-background: var(--color-blue-light6);
    --color-focus: var(--color-blue);
    --color-button-focus: var(--color-blue-dark2);
    --color-input: var(--color-blue-dark4);
    --color-input-background: var(--color-blue-light5);
    --color-input-hover: var(--color-blue-dark5);
    --color-input-background-hover: var(--color-blue-light7);
    --color-placeholder: var(--color-blue-dark5);
    --color-placeholder-hover: var(--color-blue-dark5);
    --color-button: var(--color-blue-dark5);
    --color-button-background: var(--color-blue-light2);
    --color-button-hover: var(--color-blue-dark3);
    --color-button-background-hover: var(--color-blue-light4);
    --color-link: var(--color-blue-light2);
    --color-link-hover: var(--color-blue-light5);
    --color-option: var(--color-blue-dark3);
    --color-option-background: var(--color-light);
    --color-logo-primary: var(--color-tan-dark);
    --color-logo-secondary: var(--color-red-dark);
}
}#servicedesc {
    margin: 0 auto;
}
@media(prefers-color-scheme:dark) {
  input::selection {
    color:var(--color-selection-background);
    background-color:var(--color-selection);
  }
}
kbd{word-break:break-all;}
/* Ajouts Jade pour OTP */
.mdc-card{
  background-color: transparent;
  box-shadow: 0px 2px 1px -1px transparent,0px 1px 1px 0px transparent,0px 1px 3px 0px transparent;

}
#token {
  color: var(--color-input);
  background-color: var(--color-input-background);
  outline-width: var(--size-border);
  outline-color: var(--color-transparent);
  border-radius: 1.75em;
  padding: calc(1 / var(--size-fluid) * 1em) calc(1.5 / var(--size-fluid) * 1em);
  font-size: calc(1.2 / var(--size-fluid) * 1em);
  vertical-align: middle;
  line-height: 1;
  max-width: 100%;
}
.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
  border-color: transparent !important;;
}