@charset "UTF-8";/* -------------------------------- 

File#: _1_tabs
Title: Tabs
Descr: A list of content sections (panels), accessible one at a time using control labels
Usage: codyhouse.co/license

-------------------------------- */
.tabs__control {
    text-decoration: none;
    color: var(--color-contrast-medium)
}

.tabs__control:focus {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 2px
}

.tabs__control:hover {
    color: var(--color-contrast-high)
}

.tabs__control[aria-selected=true] {
    color: var(--color-contrast-high);
    text-decoration: underline
}

/* -------------------------------- 

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */
.modal {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.modal:not(.modal--is-visible) {
    pointer-events: none;
    background-color: transparent
}

.modal--is-visible {
    opacity: 1;
    visibility: visible
}

/* close buttons */
.modal__close-btn {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    transition: 0.2s
}

.modal__close-btn .icon {
    display: block;
    margin: auto
}

.modal__close-btn--outer {
    /* close button - outside the modal__content */
    --size: 48px;
    width: var(--size);
    height: var(--size);
    position: fixed;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: var(--z-index-fixed-element, 10);
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
    transition: 0.2s
}

.modal__close-btn--outer .icon {
    color: var(--color-white);
    /* icon color */
    transition: transform 0.3s var(--ease-out-back)
}

.modal__close-btn--outer:hover {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 1)
}

.modal__close-btn--outer:hover .icon {
    transform: scale(1.1)
}

.modal__close-btn--inner {
    /* close button - inside the modal__content */
    --size: 32px;
    width: var(--size);
    height: var(--size);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow),var(--shadow-sm);
    transition: 0.2s
}

.modal__close-btn--inner .icon {
    color: inherit/* icon color */
}

.modal__close-btn--inner:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow),var(--shadow-md)
}

/* animations */
:root {
    --modal-transition-duration: 0.2s/* fallback (i.e., unless specified differently in the variations 👇) */
}

@media (prefers-reduced-motion: no-preference) {
    .modal--animate-fade {
        --modal-transition-duration: 0.2s;
        transition: opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-fade.modal--is-visible {
        transition: opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s
    }

    .modal--animate-scale,.modal--animate-translate-up,.modal--animate-translate-down,.modal--animate-translate-right,.modal--animate-translate-left {
        --modal-transition-duration: 0.2s;
        transition: opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-scale .modal__content,.modal--animate-translate-up .modal__content,.modal--animate-translate-down .modal__content,.modal--animate-translate-right .modal__content,.modal--animate-translate-left .modal__content {
        will-change: transform;
        transition: transform var(--modal-transition-duration) var(--ease-out)
    }

    .modal--animate-scale.modal--is-visible,.modal--animate-translate-up.modal--is-visible,.modal--animate-translate-down.modal--is-visible,.modal--animate-translate-right.modal--is-visible,.modal--animate-translate-left.modal--is-visible {
        transition: opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s
    }

    .modal--animate-scale.modal--is-visible .modal__content,.modal--animate-translate-up.modal--is-visible .modal__content,.modal--animate-translate-down.modal--is-visible .modal__content,.modal--animate-translate-right.modal--is-visible .modal__content,.modal--animate-translate-left.modal--is-visible .modal__content {
        transform: scale(1)/* reset all transformations */
    }

    .modal--animate-slide-up,.modal--animate-slide-down,.modal--animate-slide-right,.modal--animate-slide-left {
        --modal-transition-duration: 0.3s;
        transition: opacity 0s var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-slide-up .modal__content,.modal--animate-slide-down .modal__content,.modal--animate-slide-right .modal__content,.modal--animate-slide-left .modal__content {
        will-change: transform;
        transition: transform var(--modal-transition-duration) var(--ease-out)
    }

    .modal--animate-slide-up.modal--is-visible,.modal--animate-slide-down.modal--is-visible,.modal--animate-slide-right.modal--is-visible,.modal--animate-slide-left.modal--is-visible {
        transition: background-color var(--modal-transition-duration),visibility 0s
    }

    .modal--animate-slide-up.modal--is-visible .modal__content,.modal--animate-slide-down.modal--is-visible .modal__content,.modal--animate-slide-right.modal--is-visible .modal__content,.modal--animate-slide-left.modal--is-visible .modal__content {
        transform: scale(1)/* reset all transformations */
    }

    /* scale */
    .modal--animate-scale .modal__content {
        transform: scale(0.95)
    }

    /* translate */
    .modal--animate-translate-up .modal__content {
        transform: translateY(40px)
    }

    .modal--animate-translate-down .modal__content {
        transform: translateY(-40px)
    }

    .modal--animate-translate-right .modal__content {
        transform: translateX(-40px)
    }

    .modal--animate-translate-left .modal__content {
        transform: translateX(40px)
    }

    /* slide */
    .modal--animate-slide-up .modal__content {
        transform: translateY(100%)
    }

    .modal--animate-slide-down .modal__content {
        transform: translateY(-100%)
    }

    .modal--animate-slide-right .modal__content {
        transform: translateX(-100%)
    }

    .modal--animate-slide-left .modal__content {
        transform: translateX(100%)
    }
}

/* load content - optional */
.modal--is-loading .modal__content {
    visibility: hidden
}

.modal--is-loading .modal__loader {
    display: flex
}

.modal__loader {
    /* loader icon */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: none;
    pointer-events: none
}

/* --image */
.modal-img-btn {
    position: relative;
    cursor: pointer
}

.modal-img-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
    transition: background 0.2s
}

.modal-img-btn:hover::after {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7)
}

.modal-img-btn:hover .modal-img-btn__icon-wrapper {
    opacity: 1
}

.modal-img-btn__icon-wrapper {
    position: absolute;
    z-index: 2;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7);
    opacity: 0;
    transition: opacity 0.2s
}

.modal-img-btn__icon-wrapper .icon {
    color: var(--color-white)
}

/* -------------------------------- 

File#: _1_skeleton
Title: Skeleton Screen
Descr: Content placeholder used to indicate that content is loading
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --ske-animation-duration: 1s;
    --ske-radius: var(--radius-md)
}

.ske {
    position: relative;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    overflow: hidden
}

.ske::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0), hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1), hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0));
    background-repeat: no-repeat;
    background-size: 500px 100%;
    background-position: -500px 0;
    will-change: background-position;
    animation: ske-background var(--ske-animation-duration) infinite
}

@keyframes ske-background {
    from {
        background-position: -500px 0
    }

    to {
        background-position: calc(100% + 500px) 0
    }
}

.ske--circle {
    height: 0;
    padding-bottom: 100%;
    border-radius: 50%;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%)
}

.ske--rect,[class*=ske--rect-],.ske--square {
    border-radius: var(--ske-radius);
    -webkit-clip-path: inset(0% 0% 0% 0% round var(--ske-radius));
    clip-path: inset(0% 0% 0% 0% round var(--ske-radius))
}

[class*=ske--rect-],.ske--square {
    height: 0;
    padding-bottom: calc(100% / (var(--ske-aspect-ratio)))
}

.ske--rect-16\:9 {
    --ske-aspect-ratio: 16/9
}

.ske--rect-4\:3 {
    --ske-aspect-ratio: 4/3
}

.ske--square,.ske--rect-1\:1 {
    --ske-aspect-ratio: 1/1
}

.ske--text {
    height: 1em;
    border-radius: var(--ske-radius);
    -webkit-clip-path: inset(0% 0% 0% 0% round var(--ske-radius));
    clip-path: inset(0% 0% 0% 0% round var(--ske-radius))
}

/* -------------------------------- 

File#: _2_weekly-schedule
Title: Weekly Schedule
Descr: A table displaying the events of the week
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --w-schedule-row-height: 50px;
    --w-schedule-row-nr: 0;
    --w-schedule-modal-anim-duration: 0.3s;
    --w-schedule-modal-close-btn-size: 48px;
    --w-schedule-color-1-h: 27;
    --w-schedule-color-1-s: 87%;
    --w-schedule-color-1-l: 70%;
    --w-schedule-color-1: hsl(var(--w-schedule-color-1-h), var(--w-schedule-color-1-s), var(--w-schedule-color-1-l));
    --w-schedule-color-2-h: 187;
    --w-schedule-color-2-s: 13%;
    --w-schedule-color-2-l: 28%;
    --w-schedule-color-2: hsl(var(--w-schedule-color-2-h), var(--w-schedule-color-2-s), var(--w-schedule-color-2-l));
    --w-schedule-color-3-h: 304;
    --w-schedule-color-3-s: 100%;
    --w-schedule-color-3-l: 89%;
    --w-schedule-color-3: hsl(var(--w-schedule-color-3-h), var(--w-schedule-color-3-s), var(--w-schedule-color-3-l));
    --w-schedule-color-4-h: 96;
    --w-schedule-color-4-s: 67%;
    --w-schedule-color-4-l: 87%;
    --w-schedule-color-4: hsl(var(--w-schedule-color-4-h), var(--w-schedule-color-4-s), var(--w-schedule-color-4-l))
}

.w-schedule {
    position: relative;
    z-index: 1
}

/* #region (Mobile Navigation) */
.w-schedule__controls {
    display: flex;
    align-items: center
}

.w-schedule__control-wrapper {
    flex-grow: 1;
    flex-basis: 0
}

.w-schedule__control-wrapper:not(:last-child) {
    margin-right: var(--space-2xs)
}

.w-schedule__control {
    display: block;
    width: 100%;
    background-color: var(--color-contrast-lower);
    padding: 2vw 0;
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    text-align: center;
    transition: 0.2s
}

.w-schedule__control:hover {
    background-color: var(--color-contrast-low)
}

.w-schedule__control:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.w-schedule__control[aria-selected=true] {
    background-color: var(--color-contrast-higher);
    color: var(--color-bg)
}

/* #endregion */
/* #region (Events) */
.w-schedule__days {
    position: relative;
    z-index: 2
}

.w-schedule__day {
    position: relative;
    padding-top: var(--space-md)
}

.w-schedule__col-label {
    display: none
}

.w-schedule__events {
    position: relative
}

.w-schedule__event-wrapper:not(:last-child) {
    margin-bottom: var(--space-xs)
}

.w-schedule__event {
    overflow-y: auto; 
    color: inherit;
    text-decoration: none;
    display: block;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background-color: var(--w-schedule-color-1);
    border-left-width: 4px;
    border-left-style: solid;
    box-shadow: var(--shadow-sm);
    transition: 0.3s
}

/* Scrollbar styling */
.w-schedule__event::-webkit-scrollbar {
  width: 6px;             /* fine */
}

.w-schedule__event::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);  /* semi-transparent */
  border-radius: 3px;            /* arrondi */
}

.w-schedule__event::-webkit-scrollbar-track {
  background: transparent;       /* rien derrière */
}

.w-schedule__event > div {
  max-height: 100%;      /* prend toute la hauteur de l’event */
       /* scroll vertical si le texte dépasse */
}

.w-schedule__event:hover {
    box-shadow: var(--shadow-md)
}

.w-schedule__event--1 {
    background-color: var(--w-schedule-color-1);
    border-color: hsl(var(--w-schedule-color-1-h), var(--w-schedule-color-1-s), calc(var(--w-schedule-color-1-l) * 0.8));
    color: var(--color-black)
}

.w-schedule__event--2 {
    background-color: var(--w-schedule-color-2);
    border-color: hsl(var(--w-schedule-color-2-h), var(--w-schedule-color-2-s), calc(var(--w-schedule-color-2-l) * 0.8));
    color: var(--color-white)
}

.w-schedule__event--3 {
    background-color: var(--w-schedule-color-3);
    border-color: hsl(var(--w-schedule-color-3-h), var(--w-schedule-color-3-s), calc(var(--w-schedule-color-3-l) * 0.8));
    color: var(--color-black)
}

.w-schedule__event--4 {
    background-color: var(--w-schedule-color-4);
    border-color: hsl(var(--w-schedule-color-4-h), var(--w-schedule-color-4-s), calc(var(--w-schedule-color-4-l) * 0.8));
    color: var(--color-black)
}

/* #endregion */
/* #region (Background Rows) */
.w-schedule__grid {
    display: none
}

.w-schedule__grid-row-label {
    display: none
}

/* #endregion */
/* #region (Modal Window) */
.w-schedule-modal {
    --modal-transition-duration: var(--w-schedule-modal-anim-duration);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm);
    padding-top: calc(var(--space-sm) * 2 + var(--w-schedule-modal-close-btn-size))
}

.w-schedule-modal__content {
    height: 100%;
    width: 100%;
    overflow: auto
}

.w-schedule-modal__content--loaded > * {
    animation: w-schedule-body-entry-anim 0.4s
}

@keyframes w-schedule-body-entry-anim {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.w-schedule-morph-bg {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    transform-origin: left top
}

.w-schedule-close-btn {
    position: fixed;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: var(--z-index-overlay, 15);
    width: var(--w-schedule-modal-close-btn-size);
    height: var(--w-schedule-modal-close-btn-size);
    border-radius: 50%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: background 0.2s,opacity var(--w-schedule-modal-anim-duration),visibility 0s var(--w-schedule-modal-anim-duration)
}

.w-schedule-close-btn:hover {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 1)
}

.w-schedule-close-btn .icon {
    color: var(--color-white);
    display: block;
    margin: auto
}

.w-schedule-close-btn--is-visible {
    opacity: 1;
    visibility: visible;
    transition: background 0.2s,opacity var(--w-schedule-modal-anim-duration)
}

.w-schedule-modal__figure {
    display: block
}

.w-schedule-modal__figure img {
    display: block;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

/* #endregion */
/*@media (min-width: 64rem) {*/
    /* #region (Mobile Navigation) */.w-schedule__controls {
        display:none
    }

    /* #endregion */
    /* #region (Events) */
    .w-schedule__days {
        display: flex;
        height: calc(var(--w-schedule-row-nr) * var(--w-schedule-row-height))
    }

    .w-schedule__day {
        display: block !important;
        flex-grow: 1;
        flex-basis: 0;
        padding-top: 0;
        border: 0px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
        border-left-width: 1px
    }

    .w-schedule__day:last-child {
        border-right-width: 1px
    }

    .w-schedule__col-label {
        display: flex;
        height: var(--w-schedule-row-height);
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1)
    }

    .w-schedule__event-wrapper {
        margin-bottom: 0 !important
    }

    .w-schedule__event {
        height: var(--w-schedule-event-height, auto);
        padding: var(--space-xs);
        position: absolute;
        left: 0;
        top: var(--w-schedule-event-top, initial);
        width: 100%
    }

    /* #endregion */
    /* #region (Background Rows) */
    .w-schedule__grid {
        display: block;
        position: absolute;
        z-index: 1;
        top: var(--w-schedule-row-height);
        left: 0;
        width: 100%
    }

    .w-schedule__grid-row {
        position: relative;
        height: var(--w-schedule-row-height)
    }

    .w-schedule__grid-row:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1)
    }

    /* #endregion */
    /* #region (Modal Window) */
    .w-schedule-modal {
        padding-top: calc(var(--space-xs) * 2 + var(--w-schedule-modal-close-btn-size));
        padding-bottom: calc(var(--space-xs) * 2 + var(--w-schedule-modal-close-btn-size))
    }

    .w-schedule-modal__content {
        max-width: var(--max-width-md);
        max-height: 680px;
        overflow: hidden
    }

    .w-schedule-modal__body {
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }

    /* #endregion */
/*}*/