:root {
    --color-yellow: #ffc300;
    --color-black: #232323;
    --color-gray-dark: #48484d;
    --color-gray-medium: #5f7081;
    --color-gray-light: #d7dfe8;
    --color-access-green: #009e73;
    --color-access-red: #d55e00;
    --color-access-yellow: #f0e442;
    --color-access-orange: #e69f00;
    --gutter-size: 1.5em;
    --card-gutter-size: 1.5em;
    --font-size-init: 16px;
    --font-family-regular: "BrownRegular", sans-serif;
    --font-family-bold: "BrownBold", sans-serif;
}

@media (min-width: 880px) {
    .dashboard {
        flex: unset;
        max-width: unset;
        margin-left: unset;
    }
}

/* Bouton “backToTop” */
#backToTop {
    background-color: #ccc;
    border: 0 none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    position: fixed;
    right: 20px;
    bottom: 20px;
    transition: background-color .2s ease-in, opacity .2s linear;
    width: 36px;
    height: 32px;
    z-index: 2;
}

#backToTop.visible {
    opacity: 1;
}

#backToTop:hover {
    background-color: var(--color-yellow);
}

#backToTop::before {
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: "";
    display: block;
    margin: 0;
    padding: 0;
    transform: rotate(315deg) translate(45%, 75%);
    transform-origin: 50%;
    width: 1em;
    height: 1em;
    z-index: 2;
}

.page-content > .dashboard {
    font-size: var(--font-size-init);
    line-height: 1.3;
    margin: 0 -24px;
}

.dashboard h1,
.dashboard h2,
.dashboard h3,
.dashboard h4,
.dashboard h5,
.dashboard h6 {
    font-family: var(--font-family-bold);
    font-weight: 700;
}

#backToTop:focus,
.dashboard *:focus {
    outline: 0 none;
    outline-offset: unset;
}

.dashboard > * {
    margin: 1em auto 0;
}

.dashboard > *:first-child {
    margin-top: 0;
}

/* Titre principal. */
.dshbrd-title,
.dshbrd-subtitle {
    font-size: 1.375em;
    margin: 1em auto;
    padding-top: 1em;
    padding-right: var(--gutter-size);
    padding-left: var(--gutter-size);
}

/* Sous-titre principal. */
.dshbrd-subtitle {
    border-top: 1px solid transparent;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 2em;
}

.dshbrd-section {
    padding: 0 0 2.5em;
}

.dshbrd-section:last-child {
    padding-bottom: 0;
}

.state-date {
    font-size: 1.375em;
    padding-right: var(--gutter-size);
    padding-left: var(--gutter-size);
}

@media screen and (min-width: 768px), screen and (min-width: 550px) and (orientation: landscape) {
    .state-date {
        text-align: center;
    }
}

/* Section/rubrique. */
.section-logo {
    display: block;
    font-family: "BrownBold", sans-serif;
    font-size: 1.125em;
    margin-bottom: 1em;
}

.section-logo::before {
    color: var(--color-yellow);
    content: ":";
}

/* Texte d'intro. */
.dshbrd-chapo {
    border-bottom: var(--color-gray-light) 1px solid;
    font-size: .875em;
    padding-right: var(--gutter-size);
    padding-bottom: 2em;
    padding-left: var(--gutter-size);
}

/* Groupe de cards */
.dshbrd-card-list {
    border-bottom: var(--color-gray-light) 1px solid;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin-top: 0;
    padding-top: 1em;
    padding-right: var(--gutter-size);
    padding-bottom: 1em;
    padding-left: var(--gutter-size);
}

@media screen and (min-width: 480px) {
    .dshbrd-card-list {
        flex-direction: initial;
        flex-wrap: wrap;
        padding-top: 2em;
        padding-bottom: 2em;
    }
}

@media screen and (min-width: 900px) {
    .dshbrd-card-list {
        flex-wrap: initial;
    }
}

.dshbrd-card {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: .75em 0;
}

.dshbrd-card:not(:first-child) {
    border-top: 1px solid var(--color-gray-light);
    margin-top: 0;
}

@media screen and (min-width: 480px) {
    .dshbrd-card {
        flex-basis: calc(50% - (2 * var(--card-gutter-size)));
        padding: 0;
        position: relative;
    }

    .dshbrd-card:not(:first-child) {
        border-top: 0 none;
    }

    .dshbrd-card:nth-child(even) {
        margin-left: calc(2 * var(--card-gutter-size));
    }

    .dshbrd-card:nth-child(even)::before,
    .dshbrd-card:not(:first-child):not(:nth-child(2))::after {
        background: var(--color-gray-light);
        content: "";
        position: absolute;
    }

    .dshbrd-card:nth-child(even)::before {
        top: 0;
        left: calc(-1 * var(--card-gutter-size));
        width: 1px;
        height: 100%;
    }

    .dshbrd-card:not(:first-child):not(:nth-child(2)) {
        margin-top: calc(2 * var(--card-gutter-size));
    }

    .dshbrd-card:not(:first-child):not(:nth-child(2))::after {
        top: calc(-1 * var(--card-gutter-size));
        left: 0;
        width: 100%;
        height: 1px;
    }
}

@media screen and (min-width: 900px) {
    .dshbrd-card {
        flex-basis: 100%;
    }

    .crd.dshbrd-card:not(:first-child) {
        margin-left: calc(2 * var(--card-gutter-size));
    }

    .dshbrd-card:not(:first-child):not(:nth-child(2)) {
        margin-top: 0;
    }

    .dshbrd-card:not(:first-child)::before {
        background: var(--color-gray-light);
        content: "";
        position: absolute;
        top: 0;
        left: calc(-1 * var(--card-gutter-size));
        width: 1px;
        height: 100%;
    }

    .crd.dshbrd-card:not(:first-child)::after {
        content: unset;
    }
}

.dshbrd-card > * {
    margin: 1em 0 0;
}

.dshbrd-card > *:first-child {
    margin-top: 0;
}

.crd-title {
    color: var(--color-gray-dark);
    flex-grow: 1;
    font-weight: 400;
    font-size: .9375em;
}

.crd-data {
    font-family: var(--font-family-bold);
    font-size: 1.4375em;
    font-weight: 700;
    margin-top: 0;
    position: relative;
}

[data-trend]::after {
    display: inline-block;
    margin-left: .5em;
}

[data-trend="En baisse"]::after,
[data-trend="En hausse"]::after {
    content: "➞";
}

[data-trend="Stable"]::after {
    content: "﹦";
    font-size: 1.2em;
    font-weight: 700;
    line-height: .75;
}

[data-trend="Stable"] {
    color: var(--color-access-orange);
}

[data-trend="En baisse"] {
    color: var(--color-access-green);
}

[data-trend="En baisse"]::after {
    transform: rotate(45deg);
}

[data-trend="En hausse"] {
    color: var(--color-access-red);
}

[data-trend="En hausse"]::after {
    transform: rotate(-45deg);
}

.crd-notice {
    color: var(--color-gray-medium);
    font-size: .75em;
    position: relative;
}

#new_cases .ntc-text,
#vacc_nb .ntc-text {
    cursor: pointer;
}

#new_cases .ntc-text::after,
#vacc_nb .ntc-text::after {
    background: var(--color-gray-light);
    border-radius: 50%;
    content: "?";
    display: inline-block;
    font-size: .75em;
    margin-left: 1ex;
    text-align: center;
    width: 1.2em;
    height: 1.2em;
}

#new_cases .ntc-text:hover + .ntc-more,
#vacc_nb .ntc-text:hover + .ntc-more {
    opacity: 1;
}

#new_cases .ntc-more,
#vacc_nb .ntc-more {
    background: #fff;
    border: var(--color-gray-light) 1px solid;
    border-radius: 4px;
    display: block;
    margin-top: .5em;
    opacity: 0;
    padding: .666em .75em;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    z-index: 2;
}

.ntc-more::before,
.ntc-more::after {
  border-style: solid;
  border-width: 0 .666em 0.666em 0.666em;
  content: "";
  display: block;
  position: absolute;
  left: 1.2em;
  width: 0;
  height: 0;
}

.ntc-more::before {
  border-color: transparent transparent var(--color-gray-light) transparent;
  bottom: 100%;
}

.ntc-more::after {
  border-color: transparent transparent #fff transparent;
  bottom: calc(100% - 1px);
}

/* Boutons de navigation (sticky). */
.sticky-group-wrapper {
    margin-top: 0;
}

.tab-group-wrapper {
    background: #fff;
    border-bottom: var(--color-gray-light) 1px solid;
    margin-top: 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.is-mobile .tab-group-wrapper {
    top: 53px;
  }

.tab-group-wrapper::before,
.tab-group-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width:  var(--gutter-size);
    height: 100%;
    z-index: 1;
}

.tab-group-wrapper::before {
    background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 95%);;
    left: 0;
}

.tab-group-wrapper::after {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 95%);;
    right: 0;
}

.tab-group {
    display: flex;
    flex-wrap: wrap;
    overflow: scroll;
    padding-right: var(--gutter-size);
    padding-left: var(--gutter-size);
    white-space: nowrap;
    overflow: -moz-scrollbars-none; /* Cache les scrollbars. */
    scrollbar-width: none; /* Cache les scrollbars. */
    -ms-overflow-style: none; /* Cache les scrollbars. */
  }

  .tab-group::-webkit-scrollbar {
    display: none; /* Cache les scrollbars. */
  }

@media screen and (min-width: 768px), screen and (min-width: 550px) and (orientation: landscape) {
    .tab-group {
        flex-wrap: unset;
    }
}

.tab-group a {
    color: var(--color-gray-medium);
    cursor: pointer;
    display: inline-block;
    font-size: .8125em;
    padding: 1em 0 0;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
}

.tab-group a:last-child {
    padding-bottom: 1em;
}

@media screen and (min-width: 768px), screen and (min-width: 550px) and (orientation: landscape) {
    .tab-group a,
    .tab-group a:last-child {
        border-bottom: transparent 4px solid;
        padding-top: 1em;
        padding-right: 1em;
        padding-bottom: .8em;
        padding-left: 1em;
        width: unset;
    }
}

@media screen and (min-width: 768px) {
    .tab-group a,
    .tab-group a:last-child {
        font-size: 1em;
        padding-top: 1em;
    }
}

.tab-group a[active] {
    border-bottom-color: currentColor;
    color: var(--color-black);
    font-weight: 700;
}

.tab-group a:hover {
    color: var(--color-black);
}

/* Groupes des sections. */
.sctn-group {
    border-bottom: var(--color-gray-light) 1px solid;
    padding-bottom: 2.5em;
}

.sctn-group:last-child {
    border-bottom: 0 none;
}

/* Chapo des sections. */
.sctn-chapo {
    font-size: .875em;
    margin-right: var(--gutter-size);
    margin-left: var(--gutter-size);
}

@media screen and (min-width: 768px) {
    .sctn-chapo {
        width: 60%;
    }
}

.sctn-chapo a {
    color: inherit;
}

/* Titre des sections. */
.sctn-title {
    font-size: 1.125em;
    margin-right: var(--gutter-size);
    margin-bottom: .75em;
    margin-left: var(--gutter-size);
    padding-top: 2em;
}

.dshbrd-section + .dshbrd-section > .sctn-title {
    border-top: 1px solid var(--color-gray-light);
}

.sctn-container {
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
}

/* Conteneur de graphe. */
.cntnr-graph {
    flex-basis: 100%;
    flex-grow: 1;
    margin-top: 2.25em;
}

@media screen and (min-width: 880px) {
    .cntnr-graph:not(.dbl-width) {
        flex-basis: 50%;
    }

    .cntnr-graph:not(.dbl-width):nth-child(odd) {
        padding-left: calc(var(--gutter-size) / 1.75);
    }

    .cntnr-graph:not(.dbl-width):nth-child(even) {
        padding-right: calc(var(--gutter-size) / 1.75);
    }
}

.grph-title {
    font-size: 1.125em;
    margin: 0 var(--gutter-size);
}

.grph-buttons {
    margin: 0 var(--gutter-size);
}

.cntnr-graph + .cntnr-graph .grph-title .grph-buttons {
    border-top: 1px solid var(--color-gray-light);
    padding-top: 2em;
}

@media screen and (min-width: 880px) {
    .cntnr-graph + .cntnr-graph .grph-title .grph-buttons {
        border-top: initial;
        padding-top: unset;
    }
}

.grph-date {
    display: block;
    font-family: var(--font-family-regular);
    font-size: .778em;
    font-weight: 400;
    margin: 0 auto;
}

.grph-button {
    display: inline;
    background-color: #ffffff;
    font-family: var(--font-family-regular);
    text-align: center;
    border-radius: 4px;
    border: 1px solid;
    border-color: black;
    padding:0.3em;
    font-size: .9em;
    font-weight: 400;
    margin: 0.2em auto;
}

.grph-button:hover {
    background-color: black;
    color: white;
}

.grph-content {
    margin-right: 0;
    margin-left: 0;
}

.grph-tooltip {
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 4px;
    opacity: 0;
    padding: .75em 1em;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -120%);
    transition: opacity .3s;
    white-space: nowrap;
}

.grph-caption {
    box-sizing: border-box;
    color: var(--color-gray-medium);
    font-size: .6875em;
    margin: 1em var(--gutter-size) 0;
}

.grph-caption a,
.grph-caption a:focus,
.grph-caption a:active,
.grph-caption a:hover,
.grph-caption a:visited {
    color: var(--color-black);
    font-size: 1em;
}

.grph-note {
    color: var(--color-gray-medium);
    margin-bottom: .5em;
}

.dshbrd-credits {
    border-top: 1px solid var(--color-gray-light);
    color: var(--color-gray-medium);
    margin: 0 auto 2em;
    padding: 1em 2em;
    text-align: center;
}

.dshbrd-credits h3,
.dshbrd-credits p {
    margin: 1em auto;
}