/* for importer */
h1,
h2,
h3,
#content {
    font-family: besley;
}

div#content.importer {
    display: block;
    padding-bottom: 10rem;
}

/* *************************8 */
html,
body {
    margin: 0;
    padding: 0;
    font-size: var(--unit);
    width: 100%;
}

a {
    text-decoration: underline;
    color: unset;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

p {
    margin: 1em 0;
}

sup {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    left: 1px;
}

* {
    box-sizing: border-box;
}

div#content {
    display: flex;
    position: relative;
    flex-direction: row;
    width: calc(100vw - var(--margins));
    gap: 5rem;
    top: 15rem;
    margin-left: calc(var(--margins) / 2);
    /* margin-right: auto; */
    font-size: calc(var(--size-b) * var(--flr));
    line-height: var(--size-b);
}

#main-column {
    flex: 1 1 69%;
    /* background:rgb(255, 169, 169); */
    z-index: 1;
    min-width: 0px;
    /*this is important if we don't want our flex container to be enlarged by splides!*/
}

div#navbar-mask {
    position: fixed;
    height: 10rem;
    background: white;
    top: 0;
    width: 100%;
    z-index: 1000;
    display:flex;
    text-align: center;
    justify-content: center;
    font-size:3rem;
}

div#navbar nav#side-menu ul li.search {
    display: flex;
    justify-content: center;
    flex: 1%;
}

div#navbar nav#side-menu ul li div.search-home {
    background: url("svg/search2.svg") no-repeat;
    background-size: auto;
    height: 5.3rem;
    background-size: 3.6rem;
    width: 4rem;
    position: relative;
    top: 0.8rem;
}

/*nav#side-menu ul li.search:has( < (+ div#content.archives)){*/
/*    display: none;*/
/*}*/
div#logo-column {
    width: calc(var(--margins) / 2);
    top: 10rem;
    display: block;
    position: fixed;
    padding-left: 4rem;
    padding-right: 4rem;
    cursor: pointer;
}

div#logo-column #subtitle {
    font-size: 2.5rem;
    font-style: italic;
}

div#logo-column a {
    text-decoration: none;
}

div#logo-column #logo {
    background: url("svg/logo-karoo2.svg") no-repeat;
    height: 6rem;
    min-width: 22rem;
    background-size: contain;
    position: relative;

}

div#navbar {
    display: flex;
    margin-top: 10rem;
    gap: 5rem;
    position: fixed;
    width: calc(100vw - var(--margins));
    z-index: 2;
    margin-left: calc(var(--margins) / 2);
    cursor: pointer;
    background-color: white;
}

nav ul {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;

}

nav ul li {
    flex: 1 auto;
    text-align: center;
}

nav#main-menu {
    flex: 69%;
    /* height: 6rem; */
    /* background-color: blue; */
    font-family: besley;
    text-transform: uppercase;
    line-height: 5rem;
    font-size: calc(3.5rem * var(--flr));
    font-variation-settings: 'wght' 1000;

}

nav#main-menu ul {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

nav#main-menu ul li {
    padding: 0 2rem;
    background-color: white;
    transition: background-color 500ms linear;
}

nav#main-menu ul li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
}

nav#main-menu ul li#cinema:hover {
    background-color: var(--color-cinema-transp);
}

nav#main-menu ul li#livres:hover {
    background-color: var(--color-livres-transp);
}

nav#main-menu ul li#artko:hover {
    background-color: var(--color-art-and-ko);
}

nav#main-menu ul li#scene:hover {
    background-color: var(--color-scenes-transp);
}

nav#main-menu ul li#musique:hover {
    background-color: var(--color-musique-transp);
}

nav#main-menu ul li#cinema.selected {
    background-color: var(--color-cinema);
}

nav#main-menu ul li#livres.selected {
    background-color: var(--color-livres);
}

nav#main-menu ul li#artko.selected {
    background-color: var(--color-art-and-ko);
}

nav#main-menu ul li#scene.selected {
    background-color: var(--color-scene);
}

nav#main-menu ul li#musique.selected {
    background-color: var(--color-musique);
}

#side-column {
    flex: 31%;
    /* background:rgb(147, 255, 147); */

    position: relative;
    top: 10rem;
    z-index: 1;

}

#side-column .expand-button {
    display: none;
}

nav#side-menu {
    flex: 31%;
    height: auto;
    font-family: golos;
    text-transform: uppercase;
    line-height: 4rem;
    font-size: calc(4rem * var(--flr));
    color: black;
    font-variation-settings: 'wght' 800;

}

nav#side-menu ul {
    height: 100%;
    display: flex;
}

nav#side-menu ul li:hover {
    background-color: rgba(227, 227, 227, 1);
}

nav#side-menu ul li.selected {}

nav#side-menu ul li {
    background-color: rgb(255, 255, 255);
    border-right: 2px solid black;
    flex: 35%;
}

nav#side-menu ul li:nth-child(1) {
    /* border-left:none; */
}

nav#side-menu ul li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 5.5rem;
}

main {
    margin-top: 2rem;
}

div.date-period {
    font-family: besley;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
}

div.edition-quote {
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
    font-variation-settings: 'wght' 500;
    margin-top: 2rem;
    margin-bottom: 0rem;
    border-top: 2px solid;
    width: 100%;
}

div.more-quotes {
    font-family: golos;
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    margin-bottom: 2rem;
}

/* ARTICLES*/

div.articles {
    border-left: 2px solid black;
    border-right: 2px solid black;
    margin-bottom: 4rem;

}

section.article-row {
    display: flex;
    flex-direction: row;
}

section.article-row:last-of-type {
    border-bottom: 2px solid black;
}

div.article {
    padding: 2rem;
    height: auto;
    border-top: 2rem solid black;
    transition: background-color 500ms linear;
    background-color: white;
}

div.article.type-cinema:hover,
.insert-article.type-cinema:hover {
    background-color: var(--color-cinema);
}

div.article.type-scene:hover,
.insert-article.type-scene:hover {
    background-color: var(--color-scene);
}

div.article.type-livres:hover,
.insert-article.type-livres:hover {
    background-color: var(--color-livres);
}

div.article.type-art-and-ko:hover,
.insert-article.type-art-and-ko:hover {
    background-color: var(--color-art-and-ko);
}

div.article.type-sons:hover,
.insert-article.type-sons:hover {
    background-color: var(--color-musique);
}

div.article.triple,
div.article.double {
    display: flex;
    align-content: center;
    gap: 5rem;
}

div.article.simple {}

div.article.triple .article-content {}

div.article .article-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

div#content.dossier .article-content {
    height: auto;
}

div.article.triple .article-content {
    flex: 66.66%;
}

div.article.double .article-content {
    flex: 50%;
    height: 100%;
}

div.article.triple .article-image {
    margin-left: auto;
    flex: 33.33%
}

div.article.double .article-image {
    flex: 50%;
}

div.article.triple .article-image,
div.article.double .article-image {

    display: inline-block;
}

div.article .article-image img {
    max-height: 140rem;
    max-width: 100%;

}

div.article.triple .article-image img {
    float: right;
}

div.article.triple {
    flex-basis: 100%;
}

div.article.double {
    flex-basis: 66.66%;
}

div.article {
    border-right: 2px solid black;
}

div.article:last-child {
    border-right: 0;
}


div.article.simple {
    flex-basis: 33.33%;
}


div.article.simple .article-image {
    margin-top: 1rem;
}

div.article.simple:nth-last-child {
    border-right: none;
}

div.article-cat {
    padding-right: 2rem;
    /*z-index: 1;*/
}

ul.types-list {
    display: flex;
    margin-bottom: 1rem;
}

ul.types-list li {
    flex: 0 1;
    display: inline-block;
    line-height: var(--size-type);
    font-size: calc(var(--size-type) * var(--flr));
    text-transform: uppercase;
    margin-right: 2rem;
    white-space: nowrap;
    cursor: pointer;
    height: 3rem;
    width: auto;

}

li.type.type-scene {
    background-color: var(--color-scene);
}

li.type.type-scene:before {
    content: '';
    margin-right: 2px;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('svg/shapes/01-losange.svg');
    background-size: contain;

}

li.type.type-cinema {
    background-color: var(--color-cinema);
}

li.type.type-cinema:before {
    content: '';
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 1px;
    left: 1px;
    width: 1em;
    height: 1em;
    background-image: url('svg/shapes/04-ring.svg');
    background-size: contain;

}

li.type.type-livres {
    background-color: var(--color-livres);
}

li.type.type-livres:before {
    content: '';
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 1px;
    left: 1px;
    width: 1em;
    height: 1em;
    background-image: url('svg/shapes/03-square.svg');
    background-size: contain;

}

li.type.type-art-and-ko {
    background-color: var(--color-art-and-ko);
}

li.type.type-art-and-ko:before {
    content: '';
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 1px;
    left: 1px;
    width: 1em;
    height: 1em;
    background-image: url('svg/shapes/02-circle.svg');
    background-size: contain;

}

li.type.type-sons {
    background-color: var(--color-musique);
}

li.type.type-sons:before {
    content: '';
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 1px;
    left: 1px;
    width: 1em;
    height: 1em;
    background-image: url('svg/shapes/05-star.svg');
    background-size: contain;

}

.black {
    background-color: rgb(0, 0, 0);
    color: white;
}

ul.types-list li a {
    text-decoration: none;
    display: inline-block;
}

a.article-click {
    text-decoration: none;
}

div.article-title {

    font-family: Besley;
    line-height: 12rem;
    font-size: calc(12rem * var(--flr));
    font-variation-settings: 'wght' 800;
    margin-top:1rem;

}


div.article-title em {
    font-style: italic;
}

div.article-subtitle {
    font-family: Besley;
    line-height: 8rem;
    font-size: calc(8rem * var(--flr));
}

div.article-subtitle:first-letter {
    text-transform: uppercase;
}

div.article-subtitle p {
    margin: 0;
}

div.article-subtitle em {
    font-style: italic;
}


div.article.triple div.article-title {
    font-family: besley;

    line-height: var(--size-e);
    font-size: calc(var(--size-e) * var(--flr));


}

div.article.triple div.article-subtitle {
    font-size: 7rem;
    margin-top: 2rem;
    line-height: 7rem;
}

div.article.double div.article-title {
    font-family: besley;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));

}

div.article.double div.article-subtitle {
    font-family: besley;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
    margin-top: 1.5rem;

}

div.article.simple div.article-title {
    font-family: besley;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));

}

div.article.simple div.article-subtitle {
    font-family: besley;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
    margin-top: 1rem;
}

div.article.fond-turquoise {
    background-color: rgb(127, 255, 187);
}

div.article.fond-turquoise:hover {
    background-color: rgba(127, 255, 187, 0.5);
}

div.article.green-background {
    background-color: rgb(0, 175, 95);
}

div.article.green-background:hover {
    background-color: rgba(0, 175, 95, 0.5);
}

div.article.mid-weight div.article-title {
    font-variation-settings: 'wght' 600;
}

div.article.high-weight div.article-title {
    font-variation-settings: 'wght' 1000;
}

div.article.low-weight div.article-title {
    font-variation-settings: 'wght' 200;
}

div.article.big-size div.article-title {
    line-height: 15rem;
    font-size: calc(15rem * var(--flr));
}

div.article-info {
    margin-top: 3rem;
    text-transform: uppercase;
    font-family: Golos;
    line-height: var(--size-type);
    font-size: calc(var(--size-type) * var(--flr));
    font-variation-settings: 'wght' 200;
    /*border-bottom: 1px solid black;*/
    padding-bottom: 1.2rem;
}

div.article-artwork {
    line-height: var(--size-type);
    font-size: calc(var(--size-type) * var(--flr));
    border-bottom: 2rem solid black;
    border-bottom: 2rem solid black;
}

/*div.article-artwork p{
    line-height: var(--size-a);
    font-size: calc(3.5rem * var(--flr));
}*/
ul.tags-list {
    display: flex;
    margin-top: 6rem;
    flex-wrap: wrap;
    z-index: 1;
    position: relative;
}

ul.tags-list li {
    flex: 0 1;
    display: inline-block;
    font-family: golos;
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    text-transform: lowercase;
    margin-right: 1rem;
    border: 1px solid black;
    border-radius: 3rem;
    padding: 0.2rem 1rem;
    margin-top: 1rem;
    white-space: nowrap;
    cursor: pointer;

}

ul.tags-list li:hover {
    background-color: rgba(212, 212, 212, 0.8);
}

div.article-footer {
    /* this rule to put at end of container */
    margin-top: auto;
}

div.article-footer .article-info .article-time {
    white-space: nowrap;
}

div.article-header {
    font-family: golos;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
    margin-top: 2rem;

}

div.article-header p {
    margin: 0;
}

div.encart {
    margin-bottom: 4rem;
}

div.encart-title {
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
    margin-bottom: 2rem;
}

div.encart-title a {
    text-decoration: none;
}

div.encart-title a:hover{
    color:#565656;
    /* rgba(212, 212, 212, 0.8) */
}

ul.encart-slider {
    /* overflow-x: auto; */
    /* overflow-y: hidden; */
    /* display: flex; */
}

li.insert-article {
    display: flex;
    flex-direction: column;
    /* min-width: 33%; */
    border-top: 2px solid black;
    padding: 2rem 2rem;
    border-bottom: 2px solid black;
    border-right: 2rem solid black;
    background-color: rgb(241, 241, 241);
    min-height: 56rem;
    transition: background-color 500ms linear;
}

li.insert-article:hover {
    background-color: white;
}

li.insert-article div.article-title {
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
}

li.insert-article div.article-subtitle {
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));

}

div.article-title a,
div.article-subtitle a {
    text-decoration: none;
}

div.article-title p {
    margin: 0;
    overflow-wrap: anywhere; 
}

div#footer {
    position: fixed;
    display: block;
    bottom: 0;
    width: 100%;
    font-family: golos;
    line-height: 4rem;
    font-size: calc(4rem * var(--flr));
    margin-top: 10rem;
    background-color: rgb(158, 40, 255);
    color: white;
    z-index: 1000;
}

nav#footer-menu {
    height: 5rem;
}

nav#footer-menu ul {
    padding-left: calc(var(--margins) / 2);
    width: calc(100vw - var(--margins));
}

nav#footer-menu ul li {
    border-right: 1px solid white;
    height: 5rem;
}

nav#footer-menu ul li:nth-child(1) {
    border-left: 1px solid white;
}

nav#footer-menu ul li a {
    text-decoration: none;
}

div.socials-links {
    position: fixed;
    z-index: 1000;
    right: 4rem;
    padding-top: 2rem;
}

ul.socials-list {
    display: flex;
    flex-direction: row;
}

ul.socials-list li {
    cursor: pointer;
}

ul.socials-list li.fb-link:before {
    content: '';
    margin-right: 8px;
    display: inline-block;
    width: 4em;
    height: 4em;
    background-image: url('svg/socials/fb_karoo.svg');
    background-size: contain;
}

ul.socials-list li.ig-link:before {
    content: '';
    margin-right: 7px;
    display: inline-block;
    width: 3.6em;
    height: 4.3em;
    background-image: url('svg/socials/ig_karoo.svg');
    background-size: contain;
}

ul.socials-list li.spotify-link:before {
    content: '';
    margin-right: 2px;
    display: inline-block;
    width: 4.3em;
    height: 4.3em;
    background-image: url('svg/socials/spotify_karoo.svg');
    background-size: contain;
}

ul.socials-list li.yt-link:before {
    content: '';
    display: inline-block;
    margin-right: 0;
    width: 5.5em;
    height: 5.5em;
    background-image: url('svg/socials/yt_karoo.svg');
    background-size: contain;
    top: -0.6em;
    position: relative;
    left: 0.2rem;
}

div#highlights section {
    padding: 2rem;
    height: auto;
    border-left: 2px solid black;
    border-right: 2px solid black;
    margin-bottom: 4rem;
}

div#highlights section.dossiers,
div#highlights section.simple-article {
    border-bottom: 2rem solid black;
}

section.simple-article .article-image {
    margin-top: 1em;
}

div#highlights section.dossiers.first,
div#highlights section.simple-article.first {
    border-top: 2rem solid black;
}

div#highlights section .section-title {
    font-family: golos;
    line-height: 8rem;
    font-size: calc(8rem * var(--flr));
    font-variation-settings: 'wght' 1000;
    /* cursor: pointer; */
}

div#highlights section .section-title a {
    text-decoration: none;
}

div#highlights section .dossier-link {
    /* margin-top:2rem; */

    font-family: besley;
    line-height: 8rem;
    font-size: calc(8rem * var(--flr));
    cursor: pointer;
}

div#highlights section .simple-article-title {
    font-family: golos;
    line-height: 7rem;
    font-size: calc(7rem * var(--flr));
    cursor: pointer;
}

div#highlights section .simple-article-subtitle {
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
}

div#highlights section .simple-article-title a,
div#highlights section .simple-article-subtitle a {
    text-decoration: none;
}

div#highlights section .simple-article-header {
    font-family: golos;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));

}

div#highlights section .dossier-link {
    font-family: golos;
    line-height: 7rem;
    font-size: calc(7rem * var(--flr));
    cursor: pointer;
}

div#highlights section .dossier-link a {
    text-decoration: none;
}

div#highlights section.articles-block,
div#highlights section.agenda-block {
    border-left: none;
    border-right: none;
    padding: 0;
}

div#highlights section.articles-block .section-title,
div#highlights section.agenda-block .section-title {
    font-family: golos;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
    font-variation-settings: 'wght' 600;
    margin-bottom: 1rem;
}

div#highlights section .articles-list-item {
    border-top: 2rem solid black;
    margin-bottom: 2rem;
}

div#highlights section .articles-list-item .title {

    font-family: besley;
    line-height: var(--size-b2);
    font-size: calc(var(--size-b2) * var(--flr));
    font-variation-settings: 'wght' 600;
    cursor: pointer;
    margin-top: 2rem;
}

div#highlights section .articles-list-item .title a,
div#highlights section .articles-list-item .subtitle a {
    text-decoration: none;
}

div#highlights section .articles-list-item .title p,
div#highlights section .articles-list-item .subtitle p {
    margin: 0;
}

div#highlights section .articles-list-item .info {
    font-family: golos;
    line-height: var(--size-a);
    font-size: calc(var(--size-a) * var(--flr));
}

div#highlights section .articles-list-item .article-footer {
    /* margin-top: 0; */
}

div#highlights section .articles-list-item .article-footer ul.tags-list {
    margin-top: 0;
}

div.read-more {
    margin-top: 2rem;
    font-family: golos;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
}

.article-header p.intro {
    margin: 0;
    padding: 0;
}

/* splide slider */
.splide__arrow {
    background-color: white;
}

.splide__arrow--prev {
    left: -2em;
}

.splide__arrow--next {
    right: 0.8em;
}

.splide__arrow:disabled {
    opacity: .2;
}

.splide__pagination {
    bottom: -1.2em;
}

.splide__pagination__page {
    background: #eaeaea;
}

.splide__pagination__page.is-active {
    background: #aaa;
    transform: scale(1.2);
}


/* template Type */

div#content.type div.articles {
    display: flex;
    flex-wrap: wrap;
    border-right: none;
    position: relative;
}

div#content.type a.article-click {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 0 0 0;
}

div#content.type div.article-image {
    align-self: baseline;
}

/*
div#content.type div.article-header {
    margin-top:auto;
}*/
div#content.type div.article-subtitle {
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
    margin: 0;
}

div#content.type #main-column {
    margin-top: 10rem;
}

div#content.type div.articles div.article ul.tags-list {
    margin-top: 0;
}

div#content.type div.articles div.article {
    flex-basis: 50%;
    border-right: 2px solid black;
}

/* template Dossiers */
div#content.dossiers {
    position: relative;
    top: 18rem;
}

div.dossiers-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 5rem;
}

div.dossier-page-title {
    font-family: golos;
    font-variation-settings: 'wght' 600;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
}

div#content.dossiers a.dossier-click {
    text-decoration: none;
    flex-basis: 32%;
}

div#content.dossiers div.dossier {
    border-top: 2rem solid black;
    border-bottom: 2rem solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    padding: 1rem;
    background-color: rgba(227, 227, 227, 1);
    height: 65rem;
}

div#content.dossiers div.dossier-title {
    font-family: golos;
    font-variation-settings: 'wght' 600;
    line-height: var(--size-d2);
    font-size: calc(var(--size-d2) * var(--flr));
    word-break: break-word;

}

div#content.dossiers div.dossier-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

div#content.dossiers div.articles-number {
    margin-top: auto;
}

div#content.dossiers div.dossier:hover {
    background-color: black;
}

div#content.dossiers div.dossier:hover div.dossier-title {
    color: white;
}

div#content.dossiers div.dossier:hover div.articles-number {
    color: white;
}


/* Authors template */

div#content.authors,
div#content.author {
    position: relative;
    top: 18rem;
}

div#content.authors main {
    width: 68%;
}

div.authors-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 0rem;
}

div.authors-page-title {
    font-family: golos;
    font-variation-settings: 'wght' 600;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
}

div#content.authors a.author-click {
    text-decoration: none;
    flex-basis: 100%;
}

div#content.authors div.author {
    border-top: 2rem solid black;
    /* border-bottom: 2rem solid black; */
    border-left: 1px solid black;
    border-right: 1px solid black;
    background-color: rgb(255, 255, 255);
    display: flex;
}

div#content.authors div.author-title {
    font-family: besley;
    font-variation-settings: 'wght' 600;
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    word-break: break-word;

}

div#content.authors div.author-content {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

div#content.authors div.author-image {
    margin-left: auto;
}

div#content.authors div.author-image img {
    height: 100%;
    max-width: 30rem;

}

div#content.authors div.articles-number {
    margin-top: auto;
    font-family: golos;
    text-transform: uppercase;
    line-height: var(--size-a);
    font-size: calc(var(--size-a) * var(--flr));
}

div#content.authors div.author:hover {
    background-color: black;
}

div#content.authors div.author:hover div.author-title {
    color: white;
}

div#content.authors div.author:hover div.articles-number {
    color: white;
}

/* LOADERS */

.loader {
    background: #d7d7d7;
    ;
    animation: fadeIn 0.6s infinite alternate-reverse;
    height: 70rem;
}

.loader.loading {}

.loader.loaded {
    height: 0;
}

#content.type .loader {
    height: 35rem;
    /* margin-top: 10rem; */
    border-left: solid 2px;
    border-right: solid 2px;
    border-top: solid 2rem;
    background: linear-gradient(#000, #000) no-repeat center/2px 100%;
    background-color: #eaeaea;
}

#content.type .loader.loaded {
    height: 0;
    border: 0;
}

#content.type div.articles {
    margin-bottom: 0;
}

#content.authors .loader,
#content.archives .loader {
    height: 15rem;
    margin-top: 0rem;
}

#content.authors .loader.loaded,
#content.archives .loader.loaded {
    height: 0;
}

#content.type .article-info {
    border-bottom: none;
    font-family: golos;
}

#content.type .article-info .article-time {}


/* author */
.author-column {
    display: flex;
    gap: 11rem;
    top: 3rem;
    position: relative;
}

.author-articles {
    padding-bottom: 10rem;
}

.author-text-content {
    flex: 50%;
}

div#content.author .author-text-container {
    margin-top: 11rem;
}

.author-img-container {
    flex: 1 0 50%;
    align-self: end;
    margin-top: 11rem;
}

.author-img-container img {
    float: right;
    max-width: 100%;
}

.author-name {
    font-family: besley;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
    font-variation-settings: 'wght' 600;
}

.author-bio {
    margin-top: 2rem;
    font-family: golos;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
}

.author-footer {
    margin-top: 3rem;
}

.author-articles .articles-list-item {
    border-top: 2rem solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    padding: 1rem;
    background-color: rgb(255, 255, 255);
}

.author-articles .articles-list-item:last-child {
    border-bottom: 1px solid black;
}

.author-articles .articles-list-item .title {
    font-family: besley;
    font-variation-settings: 'wght' 600;
    line-height: 6rem;
    font-size: 3.5rem;
    word-break: break-word;
}

.author-articles .articles-list-item p {
    margin: 0;
}

.author-articles .articles-list-item {}

.author-articles .articles-list-item a {
    text-decoration: none;
}

.author-articles .articles-list-item .article-tags {
    display: none;
}

.author-articles .articles-list-item .info {
    margin-top: 0;
}

.author-articles .articles-list-item .info .article-info {
    border-bottom: none;
}


/* single article */
div#content.single-article .splide__arrow--next {
    right: -2.2em;
}

div#content.single-article {
    border-top: 2rem solid black;
    top: 28rem;
}

div#content.single-article #main-column {
    padding-bottom: 10rem;
}

div#content.single-article .article-content .article-subtitle {
    width: 80%;
}

div#content.single-article .article-content .article-header,
div#content.single-article .article-content .article-text,
div#content.single-article .article-content .article-quote,
div#content.single-article .article-content .article-sound-iframe,
div#content.single-article .article-content .article-video-iframe,
div#content.single-article .article-content .article-inner-image,
div#content.single-article .article-content .article-slider {
    width: 75%;
    margin-top: 4rem;
}

div#content.single-article .article-content .article-slider {
    margin-bottom: 6rem;
}

div#content.single-article .article-content iframe {
    width: 100%;
}

div#content.single-article .article-content .article-video-iframe iframe {
    width: 100%;
    height: 106rem;
}

div#content.single-article div.single-article-info {
    margin-top: 1rem;
    text-transform: uppercase;
    font-family: golos;
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    font-variation-settings: 'wght' 200;
    border-bottom: 1px solid black;
    padding-bottom: 1.2rem;
}

div#content.single-article .single-article-info a {
    text-underline-offset: 0.2rem;
}

div#content.single-article .linked-articles {
    margin-top: 5rem;
}

div#content.single-article .linked-articles .see-also {
    font-family: Golos;
    line-height: 6rem;
    font-size: calc(6rem * var(--flr));
    font-variation-settings: 'wght' 600;
}

div#content.single-article .linked-articles ul.articles-list {
    margin-top: 2rem;
}

div#content.single-article .linked-articles ul.articles-list ul.types-list {
    margin-top: 1rem;
}

div#content.single-article .articles-list-item {
    background-color: rgba(212, 212, 212, 0.8);
    border-top: 2rem solid black;
    padding: 1rem;
    cursor: pointer;
}

div#content.single-article .articles-list-item:hover {
    background-color: white;
}

div#content.single-article .articles-list-item a {
    text-decoration: none;
}

div#content.single-article .articles-list-item p {
    margin: 0;
}

div#content.single-article .articles-list-item div.article-info {
    font-family: golos;
    border-bottom: none;
}

div#content.single-article .articles-list-item .tags-list {
    margin: 0;
}



.article-types-tags {
    display: flex;
    margin-top: 1rem;
}

.article-types-tags .article-cat {
    align-self: center;
}

.article-types-tags div.article-cat {
    margin-top: 0.9rem;
}

.article-types-tags div.article-tags {
    align-self: center;
}

.article-types-tags div.article-tags .tags-list {
    margin-top: 0;
}

div.article-tags .tags-list .tag a {
    text-decoration: none;
}

div#content.single-article .article-container {
    display: flex;
}

div#content.single-article .article-main {
    flex: 75%;
    width: 100rem;
}

div#content.single-article .article-side {
    flex: 25%;
}

div#content.single-article .article-main .article-image {
    margin-top: 5rem;
}

div#content.single-article .article-main .article-image img {
    max-height: calc(100vh - 25rem);
    max-width: 100%;
}

div#content.single-article .article-main .article-inner-image {
    margin-top: 1rem;
    text-align: center;
}

div#content.single-article .article-main .article-inner-image figure {
    font-family: golos;
    margin: 0;
    font-size: calc(var(--size-a) * var(--flr));
    line-height: var(--size-a);
}

div#content.single-article .article-main .article-inner-image img {
    max-height: calc(100vh - 25rem);
    max-width: 100%;
}

div#content.single-article .article-main .article-blocks {
    border-bottom: 2px solid black;
    padding-bottom: 6rem;
}

div#content.single-article div.article-header {
    font-family: besley;
    font-size: calc(var(--size-c) * var(--flr));
    line-height: var(--size-c);
    font-variation-settings: 'wght' 500;
}

div#content.single-article div.article-content a[rel~="footnote"] {
    text-decoration: none;
    background-color: white;
    display: inline-block;
    padding: 0.5rem;
    line-height: 1em;
    border-radius: 0.8rem;
    font-family: golos regular;
    border: 1px solid;
    font-size: 0.8em;
}

div#content.single-article .article-content #footnote-tooltip.show {
    opacity: 1;
}

div#content.single-article .article-content #footnote-tooltip {
    opacity: 0;
    position: absolute;
    padding: 2.5rem 4rem 2.5rem 4rem;
    background-color: white;
    width: 55rem;
    border-radius: 3rem;
    transition: opacity 0.5s;
    max-height: 75rem;
    overflow-y: auto;
    right: auto;
    border: 2px solid;
    display: inline-block;
    font-family: golos;
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    margin-left: 2rem;
    margin-top: 1rem;
    z-index: 1;
}

div#content.single-article div.article-quote {
    border-left: 2px solid black;
    padding-left: 7rem;
    padding-right: 7rem;
}

div#content.single-article div.article-quote blockquote {
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
    padding-left: 0rem;
    margin: 5rem 0 5rem 0;
}

div#content.single-article div.articles-same-authors {
    margin-top: 6rem;
}

.article-slider-title {
    font-size: calc(var(--size-d) * var(--flr));
    line-height: var(--size-d);

    margin-bottom: 2rem;
}

.article-slider-title a {
    text-decoration: none;
}

.article-content .article-single-insert {
    display: flex;
    flex-direction: column;
    width:75%;
    border-top: 2px solid black;
    padding: 2rem 2rem;
    border-bottom: 2px solid black;
    border-right: none;
    background-color: rgb(241, 241, 241);
    min-height: 35rem;
    transition: background-color 500ms linear;
}
.article-single-insert .article-insert-title{
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
    font-family: Besley;
    font-variation-settings: 'wght' 700;
}
.article-single-insert .article-insert-subtitle{
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    font-family: Besley;
}


div.children-articles {
    flex-wrap: wrap;
    display: flex;
    border-width: 0 0 0 2px;
}

.children-articles,
.children-articles .article {
    border-style: solid;
    border-color: #000;

}

div.children-articles .article {
    border-width: 2rem 2px 2px 0;
}

.children-articles .article:last-child {
    border-right: 2px solid black;
}

/* template dossier */
div#content.dossier .articles {
    margin-top: 12rem;
}

div#content.dossier .article:last-child {
    border-bottom: 2px solid black;
}

div#content.dossier .dossier-title {
    margin-top: 5rem;
}

div#content.dossier .dossier-title .dossier-type-name {
    font-family: Golos;
    font-variation-settings: 'wght' 700;
    line-height: var(--size-c2);
    font-size: calc(var(--size-c2) * var(--flr));
    margin-right: 1.2rem;

}

div#content.dossier .dossier-title .dossier-name {
    font-family: Besley;
    line-height: var(--size-c2);
    font-size: calc(var(--size-c2) * var(--flr));
}

div#content.dossier .dossier-text {
    font-family: Golos;
    margin-top: 3rem;
    line-height: var(--size-c2);
    font-size: calc(var(--size-c2) * var(--flr));
}

div#content.dossier .article-image img {
    width: 100%;
    max-width: none;
}

div#content.dossier .dossier-text p {
    margin: 0;
}

/* archives - articles */
li.archives-list-item:last-of-type {
    border-bottom: 2px solid black;
}

li.archives-list-item {
    border-left: 2px solid black;
    border-right: 2px solid;
    border-top: 2rem solid black;
    padding: 1rem;
}

div.archive-item-container {
    display: flex;
    gap: 10rem;
}

div.archive-item-container div.archive-title-container {
    flex: 50%;
    display: flex;
    flex-direction: column;
}

div.archive-item-container div.article-tags {
    flex: 25%;
}

div.archive-item-container div.article-cat {
    flex: 25%;
}

div.archive-item-container ul.tags-list {
    margin-top: 0;
}

div.archive-item-container div.title {
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
}

div.archive-item-container div.subtitle {
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
}

div.archive-item-container div.title p,
div.archive-item-container div.subtitle p {
    margin: 0;
}

div.archive-item-container div.title a,
div.archive-item-container div.subtitle a {
    text-decoration: none;
}

div.archive-item-container div.info {
    margin-top: auto;
}

div#content.archives ul.tags-list {
    margin-top: 0;
}

div#content.archives .search-container {
    position: fixed;
}

div#content.archives .search-container form {
    /*margin-top:2rem;*/
}

div#content.archives .search-container ul.tags-list li {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

div#content.archives .no-results {
    font-family: Golos;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
}

div#content.archives ul.tags-list li .close-x {
    font-size: 2rem;
    position: relative;
    top: -0.3rem;
}

div#content.archives ul.types-list li .close-x {
    font-size: 1.6rem;
    font-family: golos;
    position: relative;
    top: -0.3rem;
    padding-right: 1rem;
}

div#content.archives #main-column {
    position: relative;
    top: 10rem;
}

div#content.archives .article-time {
    white-space: nowrap;
}

div#content.editions #search-input {
    width: calc(100vw *0.125);

}

nav#side-menu #search-form-nav {
    position: absolute;
    top: 7.4rem;
    right: 0;
    display: none;
}

nav#side-menu #search-form-nav.show {
    display: block;
}

nav#side-menu #search-input-nav {
    margin-top: 0rem;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    font-family: golos;
    line-height: var(--size-b2);
    font-size: calc(var(--size-b2) * var(--flr));
    background: rgb(241, 241, 241);
}

#search-form {
    position: relative;
    /*top: -0.6rem;*/
}

#search-input {
    margin-top: 0rem;
    border-top: solid 2px;
    border-bottom: solid 2px;
    border-left: 0;
    border-right: 0;
    font-family: golos;

    line-height: var(--size-b2);
    font-size: calc(var(--size-b2) * var(--flr));
}

#search-input::placeholder {
    text-transform: capitalize;
}

div#content.archives main {
    margin-top: 0;
}

div#content.archives datalist#filters_list {
    display: none;
    margin-top: 2rem;
}

div#content.archives datalist#filters_list.show {
    display: block;
}

div#content.archives datalist#filters_list li.tag-item {
    font-family: golos;
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    text-transform: lowercase;
    margin-right: 1rem;
    border: 1px solid black;
    border-radius: 3rem;
    padding: 0.2rem 1rem;
    margin-top: 1rem;
    white-space: nowrap;
    cursor: pointer;
    width: fit-content;
}

div#content.archives datalist#filters_list li.type-item {
    flex: 0 1;
    display: inline-block;
    line-height: var(--size-b);
    font-size: calc(var(--size-b) * var(--flr));
    text-transform: uppercase;
    margin-right: 2rem;
    white-space: nowrap;
    cursor: pointer;
}

div#content.archives span.close-search-btn {
    cursor: pointer;
    font-family: golos;
    position: relative;
    top: -0.5rem;
    left: 1rem;

}

div#content.archives span.close-search-btn.hidden {
    display: none;
}

div#content.about,
div#content.newsletter,
div#content.contact,
div#content.error404 {
    display: block;
    top: 18rem;
    padding-right: 27%;
}

div#content.about div.about-title,
div#content.newsletter div.newsletter-title,
div#content.contact div.contact-title,
div#content.quotes div.quotes-list-title,
div#content.error404 div.error404-title {
    font-family: golos;
    font-variation-settings: 'wght' 600;
    line-height: var(--size-d);
    font-size: calc(var(--size-d) * var(--flr));
}

div#content.about div.about-text,
div#content.newsletter div.newsletter-text,
div#content.contact div.contact-text,
div#content.error404 div.error404-text {
    margin-top: 2rem;
    font-family: golos;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
}

div#content.quotes ul.quotes-list {
    position: relative;
}

div#content.quotes li.edition-quote {
    margin-top: 2rem;
    border-left: 2px solid black;
    padding-left: 7rem;
    padding-right: 7rem;
    margin-bottom: 2rem;
    line-height: var(--size-c);
    font-size: calc(var(--size-c) * var(--flr));
}

#loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 1000;
    font-family: Golos;
    border-left: 2px solid;
    border-right: 2px solid;
    border-top: 2rem solid;

}

#loader:after {
    display: block;
    content: "chargement ...";
    text-transform: uppercase;
    /* -webkit-text-stroke: 1px black;
    text-stroke: 1px black; */
    color: var(--selected);
    font-size: 8rem;
    text-align: center;
    animation: blinking 1s infinite alternate;

}


/*PATTERN GENERATOR*/
svg.patterns {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

#reading-progress {
    height: 1rem;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    position: fixed;
}

#reading-progress div {
    height: 100%;
}


/*SIGNUP FORM*/
#mc-embedded-subscribe-form input {
    height: var(--size-c);
    border: 1px solid black;
    border-radius: 0;
}

.mc-field-group {

    margin-bottom: 4rem;

}

.mc-field-group label {
    display: block;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@keyframes blinking {
    from {
        opacity: 0.4;
    }

}