:root {
    --font-text: Abel, 'Open Sans', sans-serif;
    --font-title: 'Cormorant Garamond', serif;

    --alabaster: #f3f0e4;
    --black20: rgba(0, 0, 0, 0.2);
    --black25: rgba(0, 0, 0, 0.25);
    --black40: rgba(0, 0, 0, 0.4);
    --black50: rgba(0, 0, 0, 0.5);
    --black68: rgba(0, 0, 0, 0.68);
    --black70: rgba(0, 0, 0, 0.7);
    --cyber-grape: #6d4e80;
    --flax:  #dcc985;
    --misty-moss: rgba(173, 151, 56, 0.68); 
    --white50: rgba(255, 255, 255, 0.5);
    --white85: rgba(255, 255, 255, 0.85);

    --bg-color: var(--misty-moss);
    --color: var(--alabaster);

    --gfx-brown70: rgba(191, 138, 112, 0.7);
    --gfx-brown90: rgba(191, 138, 112, 0.9);
    --txt-green70: rgba(166, 191, 112, 0.7);
    --txt-green90: rgba(166, 191, 112, 0.9);
    --vdo-blue50: rgba(112, 166, 191, 0.5);
    --vdo-blue70: rgba(109, 144, 162, 0.7);
    --vdo-blue90: rgba(112, 166, 191, 0.9);

    --sinewave-w0: rgba(240, 40, 142, 0.5);
    --sinewave-w1: rgba(140, 140, 42, 0.5);
    --sinewave-w2: rgba(240, 142, 1, 0.5);
    --sinewave-w3: rgba(0, 110, 12, 0.5);

}

html {
    box-sizing: border-box;
    font-size: 1rem;
    margin: 0;
    padding: 0;
}


html[lang='en'] :lang(fr) {
    display: none !important
}

html[lang='fr'] :lang(en) {
    display: none !important
}

:lang(en) {
    quotes: '\201C''\201D''\2018''\2019'
}

:lang(fr) {
    quotes: '« '' »'
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
}

body {
    background: var(--bg-color);
    color: var(--color);
    font-family: --var(font-text);
    font-size: 1em;
    scroll-behavior: smooth
}

body :visited {
    text-decoration: underline
}

body>header {
    background-color: var(--cyber-grape);
    position: fixed;
    right: 5vw;
    bottom: -2vh;
/*    left: 5vw; */
    padding: 1rem;
    z-index: 999;
    font-size: 1.2rem;
    color: var(--white85);
    overflow: auto;
    transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg);
    max-width: 64rem;
    min-width: 50vw;
}

body>header :link,
body>header :visited,
body>header footer :link,
body>header footer :visited {
    color: var(--flax);
    text-decoration: none
}

body>header h1 {
    text-align: center;
    margin: 0;
    font-family: var(--font-title);
    font-size: 7vh;
    line-height: 1.2;
    transform: rotate(1.5deg) translateX(5vh) translateY(-1vh)
}

body>header h1 img {
    display: none;
    vertical-align: -1.6rem;
    align: absmiddle;
    border: 0
}

body>header section {
    display: none;
    max-width: 42rem;
    margin: 0 auto;
    padding-bottom: 7rem
}

body>header footer {
    position: fixed;
    left: 0;
    right: 0;
    font-size: smaller;
    background-color: var(--cyber-grape);
    display: none;
    margin: 5rem auto 2rem auto;
    width: 80vw
}

body>header footer>p {
    text-align: center;
    margin: 4rem auto 2rem auto
}

body>header footer>nav {
    margin: 0 auto -3.5rem auto;
    padding: 0;
    display: none;
    text-align: center;
    transform: translateY(-7rem)
}

body>header footer>nav h4 {
    display: inline
}

body>header footer>nav ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none
}

body>header footer>nav li {
    display: inline-block;
    margin: 0 0.75rem;
    width: 4rem;
    height: 3rem;
    border: 1px solid;
    border-bottom: 3px solid;
    border-color: transparent;
    border-top-right-radius: 0.5rem;
    text-align: center
}

body>header footer>nav li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 3rem;
    margin: 0;
    padding: 0;
    background: var(--black25);
    border-top-right-radius: 0.5rem
}

body>header footer>nav li:hover {
    border-color: var(--flax)
}

body>header footer>nav li:hover a {
    font-weight: bold;
    background: var(--black50)
}

body>header footer:hover>p>span:first-child {
    display: inline-block;
    color: transparent;
    line-height: 0
}

body>header footer:hover>p>span:first-child:before {
    content: 'Copyleft';
    display: block;
    color: var(--color);
    padding-right: 0.45rem
}

body>header footer:hover>p>span:first-child+span {
    display: inline-block;
    transform: rotate(180deg);
    padding-bottom: -0.1rem
}

body>header footer:hover>nav {
    display: block
}

body>header:hover {
    top: 5vh
}

body>header:hover h1 {
    font-size: 2.6rem;
    transform: rotate(2.7deg) translate(0, 0) skewX(0)
}

body>header:hover footer {
    transform: rotate(2.7deg) translateY(-4.5vh) skewX(5deg)
}

body>header:hover img {
    display: inline-block
}

body>header:hover section,
body>header:hover footer {
    display: block;
    width: 80vw;
    margin: 0 auto;
    padding-bottom: 3rem
}

body>main {
    background: url(../img/logo-ps.svg) 40% calc(50% - 5vh)/25vw no-repeat fixed;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 50%;
    left: 0;
    padding: 1rem;
    min-height: 80vh
}

body>footer {
    z-index: 999;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background-color: var(--cyber-grape);
    display: none;
    font-size: 1rem
}

body>footer h4 {
    display: inline-block
}

body>footer>p {
    text-align: center;
    margin: 4rem auto 2rem auto
}

body>footer>nav {
    display: none;
    max-width: 42rem;
    margin: 0 auto -3.5rem auto;
    padding: 0
}

body>footer>nav ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none
}

body>footer>nav li {
    display: inline-block;
    margin: 0 0.75rem;
    width: 4rem;
    height: 3rem;
    border: 1px solid;
    border-bottom: 3px solid;
    border-color: transparent;
    border-top-right-radius: 0.5rem;
    text-align: center
}

body>footer>nav li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 3rem;
    margin: 0;
    padding: 0;
    background: var(--black25);
    border-top-right-radius: 0.5rem
}

body>footer>nav li:hover {
    border-color: var(--flax)
}

body>footer>nav li:hover a {
    font-weight: bold;
    background: var(--black50)
}

body>footer:hover>p>span:first-child {
    display: inline-block;
    color: transparent;
    line-height: 0
}

body>footer:hover>p>span:first-child:before {
    content: 'Copyleft';
    display: block;
    color: var(--alabaster);
    padding-right: 0.4rem
}

body>footer:hover>p>span+span {
    display: inline-block;
    transform: rotate(180deg);
    padding-bottom: -0.05rem
}

body>footer:hover nav {
    display: block
}

.libre>section h3 a {
    color: var(--cyber-grape);
    text-decoration: none
}

.media #gfx {
    background: var(--gfx-brown70);
}
.media #gfx:hover {
    background: var(--gfx-brown90);
}
.media #txt {
    background: var(--txt-green70);
}
.media #txt:hover {
    background: var(--txt-green90);
}
.media #vdo {
    background: var(--vdo-blue50);
}
.media #vdo:hover {
    background: var(--vdo-blue90);
}

@media screen and (max-width: 959px) {

    body {
        width: 100vw;
        position: relative;
        color: black;
        margin: 0;
        padding: 0;
    }
    body>header {
        margin-left: -4vw;
        padding-right: 4rem;
    }
    body>header:hover {
        padding-right: 1rem;
    }
    body>header h1 {
        font-size: 2em;
    }

    body>main {
        background: url(../img/logo-ps.svg) center top/50vw no-repeat fixed;
        padding-top: 50vw;
        position: relative;
        margin: 0;
        padding: 0;
    }

    main>article .libre {
        position: absolute;
        top: 50vw;
        padding: 1rem;
        font-size: 1.2em;
    }

    main>article .media {
        position: relative;
        top: 100vh;
    }

    .media > h2 {
        display: none;
    }

    .media section {
        position: relative;
        box-sizing: border-box;
        min-height: 100vh;
        padding: 1rem;
    }

    .media>section h3 {
        font-size: 5rem;
        text-align: center;
        z-index: 900;
    }
    .media>section h3 a {
        color: var(--cyber-grape)
    }

    .media #gfx svg,
    .media #vdo video {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.85;
        z-index: -1;
        max-width: 100vw;
    }
    .media #gfx svg {
        display: block;
        height: 100vh;
    }

    .media:after {
        display: block;
        content: "";
        height: 50vh;
    }
}


@media screen and (min-width: 960px) {
    header>footer {
        position: fixed
    }

    body>header::-webkit-scrollbar {
        background-color: var(--cyber-grape);
        box-shadow: 1px 2px 2px 1px var(--black40) inset
    }

    body>header::-webkit-scrollbar-button {
        background-color: black
    }

    body>header::-webkit-scrollbar-track {
        background-color: var(--black50)
    }

    body>header::-webkit-scrollbar-track-piece {
        background-color: --var(white50)
    }

    body>header::-webkit-scrollbar-thumb {
        background-color: var(--flax);
        box-shadow: 1px 2px 2px 1px var(--black40)
    }

    body>header::-webkit-scrollbar-corner {
        background-color: red
    }

    body>header:hover {
        overflow-y: auto
    }

    body>header:hover~footer {
        position: fixed;
        bottom: 0;
        display: block
    }

    body>header:hover~footer>nav {
        display: block
    }

    .media,
    .libre {
        display: block;
        position: absolute;
        top: 0;
        bottom: 5rem;
        height: 110vh
    }

    .media:hover {
        width: 70vw;
        z-index: 500
    }

    .media h2,
    .libre h2 {
        display: none
    }

    .media {
        left: 0
    }

    .media section {
        float: left;
        position: relative;
        height: 100%;
        width: 15vw;
        top: -5vh;
        left: 0;
        padding-top: 5vh;
        padding-left: 1rem;
        z-index: 400;
        overflow: hidden
    }

    .media section h3 {
        font-size: 5rem;
        color: var(--black20)
    }

    .media section h4,
    .media section p {
        display: none
    }

    .media section:hover {
        box-shadow: 0px -2px 4px 2px var(--black68) inset;
        transform: rotate(0deg);
        width: 40vw;
        z-index: 500
    }

    .media section:hover h3 {
        color: #000
    }

    .media section:hover h4,
    .media section:hover p {
        display: block;
        padding: 1rem;
        color: #000
    }

    .media #gfx {
        transform: rotate(-4deg) translateY(2vw);
        margin: 0 -5vw 0 -2vw;
        left: 0
    }

    .media #gfx h3 {
        transform: rotate(4deg) translateX(1vw) translateY(-4vh);
        margin-left: 2vw;
        font-size: 5rem
    }

    .media #gfx svg {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.1
    }

    .media #gfx:hover {
        transform: rotate(0) translateY(2rem);
    }
    .media #gfx:hover h3 {
        transform: rotate(0) translateY(4rem);
        writing-mode: vertical-lr;
    }
    .media #gfx:hover svg {
        min-height: 120vh;
    }

    .media #gfx:hover p,
    .media #gfx:hover h4 {
        display: none
    }

    .media #gfx:hover svg {
        opacity: 0.9
    }

    .media #gfx:hover+#txt,
    .media #txt:hover+#vdo {
        margin-left: -3vw
    }

    .media #txt {
        transform: rotate(6deg) translateY(4vh);
        margin: 0 -3vw 0 0;
        color: transparent
    }

    .media #txt h3 {
        transform: rotate(-6deg) translateX(-3vw) translateY(-2.5rem)
    }

    .media #txt:hover {
        background: var(--txt-green90);
        transform: rotate(0) translateY(2vw);
        margin: 0;
        color: black;
        padding: 1rem
    }

    .media #txt:hover h3 {
        transform: rotate(0) translateX(0) translateY(-0.5rem)
    }

    .media section h3 a {
        position: relative;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-decoration: none;
        color: inherit
    }

    .media #txt:hover p.tagline {
        position: absolute;
        top: 10rem;
        font-family: var(--font-title);
        font-style: italic;
        font-size: 1.6rem;
        padding: 1rem 2rem
    }

    .media #vdo {
        left: 0;
        transform: rotate(-5deg) translateY(2rem);
        margin: 0 0 0 -2vw;
        width: 10vw
    }

    .media #vdo p,
    .media #vdo h4 {
        display: none
    }

    .media #vdo video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        z-index: -101;
        opacity: 0.1
    }

    .media #vdo:hover video {
        opacity: 1
    }

    .media #vdo:hover {
        margin: 0;
        transform: rotate(0);
        width: 40vw
    }

    .media #vdo h3 {
        transform: rotate(5deg) translateX(-2vw) translateY(-2rem)
    }

    .media #vdo:hover h3 {
        transform: rotate(0) translateX(0) translateY(-5rem);
        color: var(--vdo-blue70);
        font-size: 18vw
    }

    .media #vdo:hover h3 a {
        display: block;
        height: 100%;
        width: 100%
    }

    .libre {
        right: 0;
        top: 50%;
        margin-top: calc(-19rem);
        height: 44rem;
        width: 42vw;
        transform: translateY(-4vh)
    }

    .libre>section h3 {
        color: var(--cyber-grape);
        font-size: 4em;
        margin: 0;
        padding: 0
    }

    .libre>section p {
        color: var(--black70);
        font-family: var(--font-text);
        font-size: 2em;
        margin: 0
    }

    .libre #participation {
        transform: rotate(-4deg) translateY(6vh)
    }

    .libre #engagement {
        transform: translate(0.5vw, 14vh)
    }

    .libre #cooperation {
        transform: rotate(2deg) translate(0rem, 19.5vh)
    }
}



.sinewave.w0 {
    fill: var(--sinewave-w0)
}

.sinewave.w1 {
    fill: var(--sinewave-w1)
}

.sinewave.w2 {
    fill: var(--sinewave-w2)
}

.sinewave.w3 {
    fill: var(--sinewave-w3)
}

#lang-switch {
    border: 2px solid var(--bg-color);
    border-radius: 1rem;
    padding: 0 0.5rem;
    background: inherit;
    position: absolute;
    top: 4px;
    right: 4px
}