/* ------------------------------------ VARIABLES ET MODE ------------------------------------ */
:root {
    --textcolor: rgb(255, 255, 255);
    --backgroundcolor: rgb(185, 185, 185);
    --background-image: url('img/plurivers-images-012.png'); /* Image sombre par défaut */
}

/* Mode clair */
:root[data-force-color-mode="light"] {
    --textcolor: black;
    --backgroundcolor: rgb(255, 255, 255);
    --background-image: url('img/plurivers-images-013.jpg'); /* Image claire */
}

/* Mode sombre forcé */
:root[data-force-color-mode="dark"] {
    --textcolor: rgb(255, 255, 255);
    --backgroundcolor: rgb(33, 33, 33);
    --background-image: url('img/plurivers-images-012.png'); /* Image sombre */
}

/* ------------------------------------ CORPS ET FOND ------------------------------------ */
body {
    margin: 0;
    padding: 40px;
    line-height: 2;
    font-size: 1.25em;
    font-family: "Lora";
    font-weight: 900;
    color: var(--textcolor);
    background-color: var(--backgroundcolor);
    background-image: var(--background-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: left; /* alignement à gauche */
}

/* ------------------------------------ TITRES ------------------------------------ */
h1, h2 {
    line-height: 1.25;
    font-family: "Obviously-Black";
    color: var(--textcolor);
    text-align: left; /* alignement à gauche */
}

/* ------------------------------------ MAIN ------------------------------------ */
main {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* textes et images alignés à gauche */
    gap: 40px;
}

/* Texte */
.text {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 85ch;
}

.text p:nth-child(odd) {
    align-self: flex-start;
    transform: translateX(-30px);
}

.text p:nth-child(even) {
    align-self: flex-end;
    transform: translateX(30px);
}

.text p, .readmore, .biography, .footnotes {
    color: var(--textcolor);
    padding: 20px;
    border-radius: 10px;
    width: 45%;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Inclinaison du texte 
.text p {
    transform: rotate(10deg);
}
.readmore {
    transform: rotate(-15deg);
}
.biography {
    transform: rotate(-45deg);
}
.footnotes {
    transform: rotate(-15deg);
}

/* Alternance gauche / droite pour les paragraphes et images 
.text p:nth-child(odd),
.text img:nth-child(odd) {
    align-self: flex-start;
}
.text p:nth-child(even),
.text img:nth-child(even) {
    align-self: flex-end;
}
*/

/* Images dans le texte */
.text img {
    width: 65%;
    border-radius: 10px;
    display: block;
}

/* Ajuste la taille sur mobile */
@media (max-width: 700px) {
    .text p, .readmore, .biography, .footnotes {
        width: 70%;
        font-size: 0.9em;
        padding: 15px;
    }
    .text img {
        width: 70%;
    }
}
@media (max-width: 450px) {
    .text p, .readmore, .biography, .footnotes {
        width: 90%;
        font-size: 0.85em;
    }
    .text img {
        width: 90%;
    }
}

/* ------------------------------------ PANNEAU IMAGE RANDOM ------------------------------------ */
.monimage {
    margin: 2em -1em;
    width: calc(100% + 2em);
    aspect-ratio: 16/4;
}
.monimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------ POLICES ------------------------------------ */
.authors {
    font-weight: 600;
    font-size: 20px;
    font-family: "Obviously-Black";
}
.keywords {
    font-family: "Obviously-Black";
    size: 1em;
}

/* ------------------------------------ NAVIGATION ET LIENS ------------------------------------ */
a {
    color: currentColor;
}
.keywords a {}
.hashtags a {
    border-radius: 1em;
    padding: 0 .5em;
    text-decoration: none;
    background-color: rgb(186, 186, 186);
    color: var(--backgroundcolor);
}
.hashtags a.active,
.hashtags a:hover {
    background: var(--textcolor);
    color: var(--backgroundcolor);
}

/* ------------------------------------ HASHTAGS ------------------------------------ */
.hashtags ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1ch;
}
.hashtags li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hashtags ul li::before {
    content: "";
}

/* ------------------------------------ ARTICLES ------------------------------------ */
.articles li {
    display: none;
}
.articles li.visible {
    display: block;
}
.articles:has(.visible) .empty {
    display: none;
}

/* ------------------------------------ FOOTER ------------------------------------ */
.footer {
    margin-bottom: 0;
}