/* Main vars */
:root {
    /* standard height */
    --lay-hgt: 30pt;
    /* standard border radius */
    --lay-brd: 2pt;
    /* navigation height */
    --lay-nvh: 30pt;
    /* column width */
    --lay-cwt: 315pt;
    /* transition duration */
    --tsn-dur: 0.5s;
    --tsn-eas: ease-in-out;
    /* Font */
    --fnt-siz: 11pt;
    --fnt-txa: left;
}


/* No overlay on click */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*:focus {
    outline: none !important;
}

/* General */
html {
    background-color: var(--col-brt);
    color: var(--col-drk);
}

html, body {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-size: var(--fnt-siz);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.75em;
    letter-spacing: 0.03125em;
}

h1, h2, h3, h4, p, ul, ol, img {
    position: relative;
}

h1, h2, h3, h4 {
    font-weight: normal;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
    margin: 1em 0 1em 0;
}

h3, h4 {
    margin: 1em 0 0.75em 0;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1em;

}

p, ul, ol {
    margin: 0.5em 0 1em 0;
}

.math-unit {
    font-style: italic;
}

.hidden {
    opacity: 0;
}

a.anchor {
    display: block;
    position: relative;
    top: calc(var(--lay-hgt) * -1);
    visibility: hidden;
}

a, a:link, a:visited, a:hover, a:active, a:hover {
    text-decoration: none;
    color: inherit;
}

/* Backgrounds & colors */
.brightBg, .darkBg, .vividBg, .vividBgn180deg {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
}

.darkBg {
    background-color: var(--col-drk);
    background-image: linear-gradient(180deg, var(--col-drk2mna2), var(--col-drk) 100%);
    color: var(--col-brt);
}

.brightBg {
    background-color: var(--col-brt);
    background-image: linear-gradient(180deg, var(--col-brt2mnb1), var(--col-brt) 100%);
    color: var(--col-drk);
}

.vividBg {
    background-color: var(--col-brt2mnc6);
    background-image: linear-gradient(180deg, var(--col-mna), var(--col-brt2mnc6) 100%);
    color: var(--col-brt);
}

.vividBgn180deg {
    background-color: var(--col-brt2mnc6);
    background-image: linear-gradient(90deg, var(--col-mna), var(--col-brt2mnc6) 100%);
    color: var(--col-brt);
}

.darkTxt {
    color: var(--col-drk);
}

a.brightBg.darkTxt {
    color: var(--col-drk);
}

/* Layout */
.fullHeight {
    min-height: calc(100vh - var(--lay-nvh));
}
.wrapp {
    display: inline-block;
    max-width: 100%;
}

.wrapp.twocol {
    width: calc(2 * var(--lay-cwt));
}

.wrapp.threecol {
    width: calc(3 * var(--lay-cwt));
}

.wrapp.fourcol {
    width: calc(4 * var(--lay-cwt));
}

.splash, .block, .card {
    max-width: calc(100% - (var(--lay-hgt) * 1.4));
    margin: var(--lay-hgt) calc(var(--lay-hgt) * 0.70) var(--lay-hgt) calc(var(--lay-hgt) * 0.70);
    text-align: var(--fnt-txa);
    font-size: var(--fnt-siz);
}

.splash {
    width: 100%;
}

.block {
    width: calc(var(--lay-cwt) * 0.85);
}

.block img {
    width: 100%;
}

.block, .card, .cardBtn {
    display: inline-block;
    vertical-align: top;
}

.block.single, .card, .cardBtn {
    text-align: inherit;
}

.card, .cardBtn {
    border-radius: var(--lay-brd);
    overflow: hidden;
}

.card {
    width: calc((var(--lay-cwt) * 0.85) - 40pt);
    max-width: calc(100% - (var(--lay-hgt) * 1.4) - 40pt);
    padding: 10pt 20pt 40pt 20pt;
}

.cardBtn {
    width: 100%;
    padding: 5pt 0pt 5pt 0pt;
}

@media only screen and (max-width: 840px) {
    .block {
        width: 100%;
    }
}

/* Sections */
header {
    margin: var(--lay-nvh) 0 0 0;
}

section, header {
    padding: calc(var(--lay-hgt) * 3) 0 calc(var(--lay-hgt) * 3) 0;
    text-align: center;
}

/* Collapsibles */
.collapsWrapp {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--tsn-dur) var(--tsn-eas);
}

.collapsItems {
    overflow: hidden;
}

.collapsItems p {
    margin-top: 0 !important;
}

input[type="checkbox"].collapsSwitch {
    height: calc(var(--fnt-siz) * 1.5);
}

input[type="checkbox"].collapsSwitch {
    display: block;
    visibility: hidden;
    width: 97%;
    margin: calc(var(--fnt-siz) * -1) 0 0 0;
    font-family: inherit;
    color: inherit;
    text-align: right;
}

input[type="checkbox"].collapsSwitch::before {
    display: inline-block;
    visibility: visible;
    content: "En lire plus…";
    margin-right: calc(var(--fnt-siz) * 1);
    font-family: inherit;
    color: inherit;
    opacity: 0.75;
    transition: all var(--tsn-dur) var(--tsn-eas);
}

input[type="checkbox"].collapsSwitch:checked::before {
    opacity: 0;
}

@keyframes collapsArrowLoop {
    0% { opacity: 0.5; }
    50% { opacity: 0; }
    100% { opacity: 0.5; }
}

input[type="checkbox"].collapsSwitch::after {
    display: inline-block;
    visibility: visible;
    content:url('/common/images/ui/arrow-bright.svg');
    width: calc(var(--fnt-siz) * 1.25);
    opacity: 0.75;
    transform: rotate(0deg);
    transition: all var(--tsn-dur) var(--tsn-eas);
    animation-name: collapsArrowLoop;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.brightBg input[type="checkbox"].collapsSwitch::after {
    content:url('/common/images/ui/arrow-dark.svg');
}

input[type="checkbox"].collapsSwitch:checked::after {
    transform: rotate(-180deg);
    animation-name: none;
}

input[type="checkbox"].collapsSwitch:checked ~ .collapsWrapp {
    grid-template-rows: 1fr;
}