:root, *{
    margin: 0;
    padding: 0;
    font-family: 'Poppins Regular', sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    cursor: none;
}/* —— Light theme —— */
/* —— Light theme —— */
/* —— Light theme —— */
html{
    overflow-x: hidden;
}
:root {
    --color-bg: #F4F5F7;
    --color-text: #2C3E50;
    --color-primary: #6B7280;          /* slate gris doux */
    --color-secondary: #556877;
    --color-muted: #7F8C8D;
    --color-border: #E1E4E8;
    --color-footer: #E1E4E8;
    --color-border-alt: #CCD1D9;
    --color-sq: #BDC3C7;
    --color-selection-bg: rgba(107,114,128,0.2);
    --color-selection-text: #6B7280;
    --color-article-title: #34495E;
    --color-article-text: #3D566E;
    --notcolor-article-text: #CDD4E0;
    --color-overlay: rgba(0,0,0,0.6);
    --color-progress: #6B7280;
    --color-like-bg: #ededee;
    --color-like-hover: #E5E7EB;
    --color-intro-bg: #FFFFFF;
    --color-cursor-round: #6B7280;
    --color-cursor-fill: #4a4a4a;
    --color-gallery-border: rgba(85, 104, 119, 0.4);
    --color-itemname: rgba(85, 104, 119, 0.7);
    --color-option-hover-text: #fff;
    --color-pale-yellow-bg: rgba(255, 235, 59, 0.8);
    --color-pale-yellow-text: var(--color-text);
}

/* —— Dark theme —— */
html[data-theme="dark"] {
    --color-bg: #181A1B;
    --color-text: #E5E9F0;
    --color-primary: #9CA3AF;          /* slate gris clair */
    --color-secondary: #8F9BB3;
    --color-muted: #6D7080;
    --color-border: #373C44;
    --color-footer: rgba(32, 34, 36, 0.72);
    --color-border-alt: #2E3238;
    --color-sq: #3A3E44;
    --color-selection-bg: rgba(156,163,175,0.2);
    --color-selection-text: #9CA3AF;
    --color-article-title: #F0F3FC;
    --color-article-text: #CDD4E0;
    --notcolor-article-text: #3D566E;
    --color-overlay: rgba(0,0,0,0.8);
    --color-progress: #9ca3af;
    --color-like-bg: #2F343A;
    --color-like-hover: #41474F;
    --color-intro-bg: #24282C;
    --color-cursor-round: #9CA3AF;
    --color-cursor-fill: #d0d0d0;
    --color-gallery-border: rgba(55, 60, 68, 1);
    --color-itemname: rgb(102, 111, 128);
    --color-option-hover-text: #fff;
    --color-pale-yellow-bg: rgba(255, 235, 59, 0.6);
    --color-pale-yellow-text: var(--color-text);
}

::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
}

body {
    font-family: monospace;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: none;
}

nav{
    display: flex;
    position: fixed;
    top: 0;
    z-index: 999;
    width: calc(100% - 20rem);
    justify-content: space-between;
    padding: 2rem 10rem;
    background-color: var(--color-bg);
}
.link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.name{
    font-size: 1.5rem;
    letter-spacing: 1px;
}
.navlink{
    letter-spacing: 2px;
}
.navlink:hover{
    cursor: none;
}
.navlink::after{
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--color-secondary);
    transition: width 0.3s ease;
    bottom: 0.1rem;
}
.navlink:hover::after{
    width: 100%;
}
.navlink.active::after {
    width: 100%;
}
button {
    padding: 0.5rem 1rem;
    color: white;
    border: none;
    cursor: none;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.content{
    width: 75%;
    margin-top: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.filterbar{
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.filterbarleft{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.displayarticle{
    aspect-ratio: 1;
    margin-left: 1.5rem;
    height: 1.75rem;
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.linesquare{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.1rem;
    transition: 0.2s;
}
.square{
    width: 100%;
    height: 100%;
    transition: 0.2s;
    background-color: var(--color-sq);
}
.displayarticle:hover{
    cursor: none;
    transition: 0.2s;
    gap: 0.1rem;
}
.displayarticle:hover .linesquare > .square:not(:first-child){
    width: 0;
}
.displayarticle:hover .linesquare > .square:first-child{
    width: 1.75rem;
}
.displayarticle:hover .linesquare:nth-child(3){
    /*height: 0;*/
}
.orderby {
    border: 1px solid var(--color-secondary);
    border-radius: 0.5em;
    padding: 0.15rem 0.15rem;
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 0.4rem;
    margin-bottom: 5rem;
    position: relative;
}

.orderby-item {
    position: relative;
    padding: 0.5rem 0.8rem;
    color: var(--color-secondary);
    border-radius: 0.40em;
    cursor: none;
    overflow: hidden;
    transition: color 0.3s ease;
}

.orderby-item::before {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-border);
    z-index: -1;
    transition: bottom 0.3s ease;
    border-radius: 0.40em;
}

.orderby-item.selected::before {
    bottom: 0;
}

.orderby-item.selected {
    z-index: 1;
}

.searchbar-input {
    all: unset;
    width: 100%;
    display: inline-block;
    color: var(--color-secondary);
    box-sizing: border-box;
}
.searchbar{
    border: 1px solid var(--color-secondary);
    /*border-radius: .63em;*/
    border-radius: 0.5em;
    padding: 0.65rem 0.65rem;
    display: flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 5rem;
    right: 0;
    position: relative;
}

.titleblog{
    font-size: 4rem;
    font-family: "Poppins Bold";
    margin-bottom: 8rem;
}
.containerarticle{
    width: 78%;
    display: flex;
    flex-direction: column;
}
.article{
    display: flex;
    flex-direction: row;
}
.article-img{
    width: 100%;
}
.left-article{

    display: flex;
    height: fit-content;
    flex-direction: column;
    padding-right: 0.5rem;
    border-right: 1px solid var(--color-border-alt);
}
.article-date{
    padding-left: 0.5rem;
    margin-bottom: 1rem;
    margin-right: 0.5rem;
    padding-bottom: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid var(--color-border-alt);
}
.article-day, .article-month, .article-year{
    color: var(--color-progress);
    font-family: "Poppins Bold";
    line-height: 1;
    font-size: 1.2rem;
    letter-spacing: 0px;
}
.article-day{
    font-size: 2rem;
}
.article-like{
    padding-left: 0.5rem;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.right-article{
    margin-left: 3rem;
    width: 100%;
}
.innerimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mainindexcontent{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 4rem;
}
.titles{
    top: 10rem;
    position: sticky;
    height: fit-content;
    max-width: 13rem;
}
.minititle{
    letter-spacing: 2px;
}
.lineseparator{
    width: 100%;
    height: 1px;
    background-color: var(--color-sq);
    margin: 4rem 0;
}
.article-title{
    font-family: "Poppins Bold", sans-serif;
    font-size: 2rem;
    margin-top: 0.5rem;
    color: var(--color-article-title);
}
.article-author-updated{
    margin-top: 1rem;
    color: var(--color-muted);
}
.article-tags {
    margin-top: 1rem;
    color: var(--color-muted);
    /* white-space normal permet le wrap entre les spans */
    white-space: normal;
}

.article-tags .spantags {
    display: inline-block;    /* chaque tag est un bloc inline, il ne sera pas cassé */
    white-space: nowrap;      /* empêche le tag interne de se scinder */
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    border: 1px solid var(--color-border);
    transition: 0.3s;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.article-tags .spantags:hover {
    background-color: var(--color-like-bg);
    cursor: none;
}

.article-text{
    font-size: 1.15rem;
    line-height: 1.7rem;
    margin-top: 2rem;
    color: var(--color-article-text);
}
.article-link{
    margin-top: 2rem;
    background-color: var(--color-primary);
    color: var(--color-bg);
    width: fit-content;
    transition: 0.2s;
    padding: 0.75rem 1rem;
    display: inline-block;
    text-decoration: none;
}
.article-link:hover{
    background-color: #222222;
    color: #ffffff;
    cursor: none;
}
.bolder{
    transition: 0.3s;
}
.bolder:hover{
    color: var(--color-article-title);
    cursor: none;
}
.languagenav{
    display: none;
    letter-spacing: 2px;
    /*display: flex;*/
    flex-direction: row;
    gap: 0.25rem;
}
.languagechosen{
    color: var(--color-primary);
}
.language:hover{
    cursor: none;
}
.progresswrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    z-index: 998;
    background-color: var(--color-progress);
    border-radius: 2px;
    transition: height 0.1s linear;
}
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transform: translate(-25%, -25%) rotate(-20deg);
    z-index: 100001;
    pointer-events: none;
    transition: none; /* aucun délai pour suivre la souris */
    mix-blend-mode: difference;
}

.cursor-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
            width 0.2s ease,
            height 0.2s ease,
            border-radius 0.2s ease,
            background-color 0.2s ease;
}

.cursor-arrow {
    transition: opacity 0.2s ease;
}
#cursor-path{
    fill: var(--color-cursor-fill);
}
/* Quand en mode rond */
.cursor.round .cursor-shape {
    width: 24px;
    height: 24px;
    background: var(--color-cursor-round);
    border-radius: 50%;
}

.cursor.round .cursor-arrow {
    opacity: 0;
}
.mainimgcontainer{
    width: 100%;
    height: 80vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainimgarticle{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.firstlinearticle{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 5rem;
    position: relative;
    width: 100%;
    transition: 0.2s;
}
.goback{
    border: 1px solid var(--color-selection-text);
    border-radius: 0.5em;
    padding: 0.4rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 1rem;
    overflow: hidden;
}
.arrow{
    height: 1rem;
    display: flex;
    align-items: center;
    transition: transform 0.45s cubic-bezier(.579, .001, 0, 1.007);
    justify-content: center;
    flex-shrink: 0;
}
.arrow> svg{
    height: 1rem;
    fill: var(--color-secondary);
}
.goback:hover .txtgoback {
    transform: translateX(-2rem);
}
.goback:hover .arrow{
    transform: translateX(-1.25rem);
}
.firstlinearticle:hover{
    border-color: var(--color-secondary);
}

.txtgoback {
    font-family: "Poppins Regular", sans-serif;
    font-size: 1.25rem;
    transform: translateX(0);
    position: relative;
    margin-right: 0.5rem;
    transition: transform 0.45s cubic-bezier(.579, .001, 0, 1.007);
}

.arrow2{
    margin-right: -2rem;
}
.firstlinearticleshare{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.3rem;
    position: relative;
    width: fit-content;
}
.firstapps {
    background-color: var(--color-like-bg);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    height: 3rem;
    width: 3rem;
    overflow: hidden;
    transition: 0.3s ease;
}
.firstapps:hover, .firstcopylink:hover {
    background-color: var(--color-like-hover);
}
.firstapps.expanded {
    width: 11.4rem; /* ou ce que tu veux */
}
.firstapps.expanded svg:first-child {
    margin-left: 1.1rem;
}
.firstapps svg:first-child{
    transition: margin 0.3s ease;
    margin-left: -7.3rem;
}
.firstapps svg,
.firstcopylink svg {
    height: 1.25rem;
    width: 1.25rem;
    fill: var(--color-secondary);
    flex-shrink: 0;
}
.firstcopylink {
    transition: 0.3s ease;
    background-color: var(--color-like-bg);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    overflow: hidden;
}
.svgcopy{
    display: flex;
    align-items: center;
    justify-content: center;
}
.titlearticle{
    font-size: 4rem;
    font-family: "Poppins Bold", sans-serif;
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    text-align: start;
    align-items: start;
    width: 100%;
    color: var(--color-article-title);
}
.stats{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5rem;
    width: 100%;
}
.tagsarticle{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.durationarticle{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.durationarticle svg{
    height: 1.5rem;
    width: 1.5rem;
    fill: var(--color-secondary);
}
.tag{
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    border: 1px solid var(--color-border);
    transition: 0.3s;
    margin-right: 0.5rem;
}
.tag:hover{
    background-color: var(--color-like-bg);
    cursor: none;
}
.slash{
    color: var(--color-border);
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
.mainarticleimg{
    width: 100%;
    margin-bottom: 5rem;
}
.mainarticleimg img{
    object-fit: cover;
    width: 100%;
    border-radius: 0.5rem;
}
.subtitle{
    margin-top: 2rem;
    font-size: 2rem;
    font-family: "Poppins Bold", sans-serif;
    margin-bottom: 2rem;
    color: var(--color-article-title);
    width: 70%;
}
.firstpletter{
    font-size: 4em;
    display: block;
    float: left;
    padding: 5px 10px 0 0;
}
p{
    font-size: 1.15rem;
    line-height: 1.7rem;
    margin-bottom: 2rem;
    color: var(--color-article-text);
    width: 70%;
}
.imgalone{
    margin-top: 5rem;
    width: 100%;
    margin-bottom: 2rem;
}
.imgalone img, .imgalonelast img{
    object-fit: cover;
    width: 100%;
    border-radius: 0.5rem;
}
.imgalonelast{
    margin-top: 5rem;
    width: 85%;
    margin-bottom: 2rem;
}
.legendimgalone{
    font-size: 0.9rem;
    color: var(--color-article-text);;
    margin-top: 1rem;
    margin-bottom: 2rem;
    width: 100%;
    padding: 1rem 1rem;
    border-left: 0.25rem solid #ececec;
}
.overlay-transition {
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}
[data-barba="container"] {
    position: relative;
    z-index: 0;
}
body.is-transitioning {
    pointer-events: none;
    /*cursor: wait;*/
}
/* Empêche le scroll pendant la transition */
html.is-transitioning {
    overflow: hidden;
}
.container{
    background-color: var(--color-bg);
}
.like{
    position: fixed;
    bottom: 9rem;
    left: calc(5% - 1rem);
    width: 2rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: var(--color-like-bg);
    height: 2rem;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, width 0.3s ease;
    overflow: hidden;
}
.like:hover{
    background-color: var(--color-like-hover);
    width: 4.75rem;
}
.views{
    position: fixed;
    bottom: 5rem;
    left: calc(5% - 1rem);
    width: 2rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: var(--color-like-bg);
    height: 2rem;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, width 0.3s ease;
    overflow: hidden;
}
.views:hover{
    background-color: var(--color-like-hover);
    width: 4.75rem;
}
@media (max-width: 400px) {
    .like {
        display: none;
    }
    .views {
        display: none;
    }
}
.nblike{
    position: absolute;
    left: 2rem;
    width: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
}
.nbviews{
    position: absolute;
    left: 2rem;
    width: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
}
.intro-sidebar {
    border-left: 4px solid var(--color-border);
    padding: 1.5rem;
    padding-right: 0;
    margin-bottom: 2rem;
    max-width: 13rem;              /* même largeur que .titles */
    font-family: "Poppins Regular", sans-serif;
    color: var(--color-article-text);
}

.intro-sidebar h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-article-title);
    font-family: "Poppins Bold", sans-serif;
}

.intro-sidebar p {
    line-height: 1.5;
    margin: 0;
    font-size: 0.9rem;
    text-align: left;
    width: 150%;
}

/* Responsive : sur mobile, s’étend en centré sous les titres */
@media (max-width: 1024px) {
    .intro-sidebar {
        border-left: none;
        padding-left: 0;
    }
}
@media (max-width: 750px) {
    .containerarticle{
        width: 100%;
    }
}

html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition:
            background-color 0.3s ease,
            color 0.3s ease,
            border-color 0.3s ease,
            fill 0.3s ease,
            stroke 0.3s ease !important;
}
.theme{
    margin-top: -0.5rem;
    height: 1rem;
    width: 1rem;
    transition: 0.3s ease;
}
.theme svg {
    /* Prépare la transition et centre le pivot */
    transition: transform 0.3s ease;
    transform-origin: center center;
}
.theme:hover svg {
    transform: rotate(45deg);
}
.theme svg{
    height: 1.5rem;
    width: 1.5rem;
}
.theme svg g {
    stroke: var(--color-secondary);
}

.nextpost {
    width: 80%;
    height: 15rem;
    margin-bottom: 3rem;
    margin-top: 7rem;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}
.nextpost img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
    transition: transform 0.3s ease, filter 0.3s ease;
}
.nextpost:hover img {
    filter: brightness(0.5);
    transform: scale(1.05);
}
.nextpostinfo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    color: #F0F3FC;
    text-align: center;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.nextposttitle{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #F0F3FC;
    text-align: center;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.nextposttitle {
    top: 50%;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2rem;
}
.nextpostinfo {
    bottom: 1rem;
    font-size: 0.875rem;
    color: rgba(240,243,252,0.8);
    transition-delay: 0.1s;
}
.nextpost:hover .nextpostinfo {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.footer {
    width: 100vw;
    left: 0;
    margin-top: 6rem;
    height: 11rem;
    display: flex;
    position: relative;
    justify-content: space-evenly;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: var(--color-footer); /* gris très clair */
    color: var(--color-muted);            /* gris foncé */
    font-size: 0.9rem;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}
.firstfooter, .secondfooter, .thirdfooter{
    width: 40%;
    margin-top: 1.5rem;
}
.firstfooter {
    margin-left: 10%;
}
.subtitlefooter{
    color: var(--color-progress);
    margin-bottom: 1rem;
}
.fancybox__container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}
.itemfooter{
    text-decoration: none;
    display: block;
    color: var(--color-muted);
}
.linklegal{
    text-decoration: none;
    color: var(--color-muted);
    transition: color 0.3s ease;
}
.lastupdate{
    margin-top: 2rem;
    text-align: left;
}

ul {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 1.5rem;
    padding-left: 0.5rem;
    color: var(--color-article-text);
    line-height: 1.8;
    width: 70%;
}

/* Liens */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Mentions de licence */
.license {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

/* Blocs de code inline */
code {
    background-color: var(--color-footer);
    border: 1px solid var(--color-border-alt);
    padding: 0.25em 0.4em;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-text);
}

.tableau {
    background: var(--color-intro-bg);
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    overflow-x: auto;
}

.tableau table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: system-ui, sans-serif;
}

.tableau thead th {
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-article-title);
    border-bottom: 2px solid var(--color-border);
}

.tableau tbody tr {
    transition: background 0.2s ease;
}

.tableau tbody tr:nth-child(even) {
    background: var(--color-selection-bg);
}

.tableau tbody tr:hover {
    background: var(--color-like-hover);
}

.tableau td {
    padding: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-article-text);
    border-bottom: 1px solid var(--color-border-alt);
}

/* Badges de difficulté */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
}

.badge.facile {
    background-color: #27AE60; /* vert doux */
}

.badge.intermediaire {
    background-color: #F1C40F; /* jaune or */
}

.badge.difficile {
    background-color: #E67E22; /* orange */
}

.badge.tres-difficile {
    background-color: #C0392B; /* rouge foncé */
}
.smalllike{
    display: none;
}
@media (max-width: 1400px) {
    .titleblog {
        font-size: 3rem;
    }
}

@media (max-width: 1210px) {
    .footer{
        height: 15rem;
    }
}

@media (max-width: 992px) {
    nav{
        padding: 2rem 5rem;
        width: calc(100% - 10rem);
    }
    .mainindexcontent{
        flex-direction: column-reverse;
    }
    .titles{
        position: relative;
        top: 0;
    }
    .intro-sidebar{
        max-width: 50vw;
        width: 55vw;
    }
    .intro-sidebar h3{
        font-size: 2rem;
    }
    .intro-sidebar p {
        margin-top: 2rem;
        font-size: 1rem;
    }
    .containerarticle{
        width: 100%;
    }
    .titlearticle{
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .searchbar{
        width: 12rem;
    }
    .stats{
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }
    .subtitle{
        width: 100%;
    }
    p{
        width: 100%;
    }
    .nextpost{
        width: 100%;
    }
    .nextposttitle{
        font-size: 1.5rem;
        width: 70%;
    }
}

@media (max-width: 640px) {
    .name{
        font-size: 1rem;
    }
    .navlink{
        font-size: 0.9rem;
    }
    nav{
        padding: 2rem 2.5rem;
        width: calc(100% - 5rem);
    }
    .filterbar{
        flex-direction: column;
        align-items: start;
    }
    .orderby{
        margin-bottom: 1rem;
    }
    .titleblog{
        font-size: 2.5rem;
        margin-bottom: 4rem;
    }
    .content{
        margin-top: 10rem;
    }
    .searchbar{
        margin-bottom: 2rem;
    }
    .footer div, .footer a, .footer span{
        font-size: 0.9rem;
    }
    .firstfooter{
        margin-left: 1rem;
    }
    .footer{
        gap: 1rem;
    }
    p{
        font-size: 1rem;
    }
    .titlearticle{
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }
    .firstlinearticle{
        flex-direction: column;
        align-items: start;
        gap: 0.5rem;
        margin-bottom: 3rem;
    }
    .tagsarticle{
        flex-wrap: wrap;
    }
}
@media (max-width: 520px) {
    .link > :nth-child(2) {
        display: none   ;
    }
    .titleblog{
        font-size: 2rem;
        margin-bottom: 4rem;
    }
    .article{
        flex-direction: column;
    }
    .right-article{
        margin-left: 0;
    }
    .left-article{
        display: none;
    }
    .smalllike{
        display: inline;
    }
    .article-title{
        font-size: 1.5rem;
        letter-spacing: 0;
    }
    .article-text{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .intro-sidebar h3{
        font-size: 1.25rem;
    }
    .intro-sidebar{
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .nextpost {
        height: 10rem;
    }
    .nextposttitle{
        font-size: 1rem;
    }
    .tabiti, .tabdplus, .tabtime, .tabhard, .tabdist{}
    .tabtime, .tabhard{
        display: none;
    }
}
@media (max-width: 425px) {
    .footer{
        flex-direction: column;
        height: 60vh;
        gap: 0;
    }
    .firstfooter, .secondfooter, .thirdfooter{
        margin-left: 3rem;
        margin-top: 0;
    }
    .subtitle{
        font-size: 1.5rem;
    }
}

@media (max-width: 375px) {
    .link > :nth-child(1) {
        display: none   ;
    }
    .intro-sidebar h3{
        font-size: 1rem;
    }
    .tableau thead th, .tableau td{
        padding: 0.4rem;
    }
}
.highlight {
    background-color: var(--color-pale-yellow-bg);
    color: var(--color-pale-yellow-text);
    font: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
}
.footer-text img {
    margin-top: 0.5rem;
    height: 3rem;
}
/*
#map { width: 100%; height: 500px; }
#chart-container { width: 100%; height: 400px; margin-top:3rem;
display: flex; justify-content: center; align-items: center; }
.chartjs-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px;
    border-radius: 3px;
    pointer-events: none;
    font-size: 12px;
}*/


/* ===== Layout global (préfixe gpxdash- pour éviter collisions) ===== */
.gpxdash-root {
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap:16px;
    width:100%;
    box-sizing:border-box;
    padding:14px;
    background:var(--color-bg);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    color:var(--color-text);
}
@media (max-width:1100px){ .gpxdash-root{ grid-template-columns:1fr; padding:10px } }

/* ===== Carte ===== */
.gpxdash-map-wrap{
    background:var(--color-intro-bg);
    border-radius:12px;
    border:1px solid var(--color-border-alt);
    display:flex;flex-direction:column;
    min-height:60vh; /* grand écran mais pas 100vh pour ne pas casser la page */
    overflow:hidden;
    box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}
.gpxdash-map-top{
    display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--color-border);
    gap:12px;background: var(--color-intro-bg);
}
.gpxdash-map-meta{ color:var(--color-muted); font-size:13px }
#gpxdash-map{ width:100%; flex:1 1 auto; min-height:320px }

/* ===== Sidebar / Traces ===== */
.gpxdash-sidebar{ display:flex; flex-direction:column; gap:12px; }
.gpxdash-panel{ background:var(--color-intro-bg); border:1px solid var(--color-border); padding:12px; border-radius:10px; box-shadow:0 4px 10px rgba(16,24,40,0.03) }

/* Tracks list (scroll si beaucoup) */
.gpxdash-tracksList{ display:flex; flex-direction:column; gap:10px; overflow:auto; max-height:36vh; padding-right:6px }

/* Card d'une trace */
.gpxdash-track-card{
    display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
    border:1px solid rgba(0,0,0,0.03);
}
.gpxdash-track-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.gpxdash-track-left{ display:flex; gap:10px; align-items:center; }
.gpxdash-track-title{ font-weight:600; color:var(--color-primary) }
.gpxdash-dot{ width:14px; height:14px; border-radius:50%; box-shadow:0 2px 8px rgba(16,24,40,0.06) }

/* Kv grid */
.gpxdash-kv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; color:var(--color-secondary); font-size:13px }
.gpxdash-kv{ display:flex; justify-content:space-between; align-items:center }

/* Nice buttons */
.gpxdash-btn{
    padding:8px 12px; border-radius:10px; border:none; font-weight:600;
    background: linear-gradient(180deg, #6B7280, #556877); color:#fff; box-shadow: 0 6px 10px rgba(80,90,110,0.08);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.gpxdash-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 18px rgba(80,90,110,0.12) }
.gpxdash-btn.ghost{
    background:transparent; color:var(--color-primary); border:1px solid var(--color-border-alt); box-shadow:none; font-weight:600;
}

/* Switch toggle (joli) */
.gpxdash-switch{ position:relative; display:inline-block; width:46px; height:26px; }
.gpxdash-switch input{ opacity:0; width:0; height:0; }
.gpxdash-slider{
    position:absolute; inset:0; border-radius:999px; background:#EEF2F6; border:1px solid var(--color-border-alt);
    transition: .18s ease;
}
.gpxdash-slider::before{
    content:''; position:absolute; left:4px; top:4px; width:18px; height:18px; border-radius:50%; background:#fff; transition: .18s ease; box-shadow:0 4px 10px rgba(18,24,40,0.08);
}
.gpxdash-switch input:checked + .gpxdash-slider{ background: linear-gradient(90deg,#6B7280,#556877) }
.gpxdash-switch input:checked + .gpxdash-slider::before{ transform: translateX(20px) }

/* Legend simplified: only swatches (no checkboxes) */
.gpxdash-legend{ display:none; gap:8px; flex-wrap:wrap; margin-top:8px; max-height:10vh; overflow:auto; padding-right:6px } /*display: flex;*/
.gpxdash-legend-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:var(--color-like-bg); border:1px solid var(--color-border-alt) }

/* Chart panel */
.gpxdash-chart-panel{ height:360px; display:flex; flex-direction:column; gap:8px }
#gpxdash-elevationChart{ width:100% !important; height:100% !important }

/* Footer small */
.gpxdash-footer{ padding:10px 14px; font-size:12px; color:var(--color-muted); margin-top:8px;
display: flex;  flex-direction: column; align-items: center; text-align: center; gap: 6px; }

/* responsive small screens */
@media (max-width:700px){
    .gpxdash-kv-grid{ grid-template-columns:1fr }
    .gpxdash-tracksList{ max-height:28vh }
    .gpxdash-legend{ max-height:6vh }
}
.containerKomoot{
    width: 70%;
    margin-top: 1rem;
    margin-bottom: 3rem;
}
/* Conteneur pour plusieurs liens Komoot */
.komoot-links {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px; /* espace entre les boutons */
    margin: 12px 0;
}

/* Style des boutons Komoot */
a.komoot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-primary);
    border: 1px solid var(--color-border-alt);
    background-color: var(--color-intro-bg);
    transition: all 0.2s ease;
}

a.komoot-link:hover {
    background-color: var(--color-like-hover);
    color: var(--color-article-title);
    border-color: var(--trace-color,var(--color-secondary));
}

a.komoot-link::before {
    content: "🗺️"; /* ou remplacer par un SVG Komoot */
    font-size: 1rem;
}
/* —— Translate popup — minimal, responsive, accessible —— */
.translate-pop {
    display: none;                    /* cachée par défaut */
    position: fixed;
    right: 2rem;
    bottom: 2.2rem;
    z-index: 100000;
    max-width: 360px;
    width: calc(100% - 3rem);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-alt);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    box-sizing: border-box;
    pointer-events: auto;
    transform-origin: 100% 100%;
    opacity: 0;
    transform: translateY(10px) scale(.995);
    transition: opacity .36s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.35;
}

/* grid layout */
.translate-pop__row { display: flex; gap: .75rem; align-items: flex-start; }
.translate-pop__icon {
    width: 40px; height: 40px;
    border-radius: .5rem;
    border: 1px solid var(--color-border);
    display: grid; place-items: center;
    font-size: 1.15rem;
    color: var(--color-secondary);
    flex: 0 0 40px;
    position: relative;
}

/* gentle pulse behind icon for attention (reduced-motion friendly) */
.translate-pop__icon::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: .6rem;
    border: 1px dashed rgba(0,0,0,0.06);
    opacity: .6;
    animation: tp-pulse 2.6s ease-in-out infinite;
}
@keyframes tp-pulse {
    0% { transform: scale(.96); opacity:.18 }
    50% { transform: scale(1.06); opacity:.36 }
    100% { transform: scale(.96); opacity:.18 }
}

/* content */
.translate-pop__body { flex: 1 1 auto; min-width: 0; }
.translate-pop__title { color: var(--color-article-title); font-weight: 600; margin-bottom: .15rem; }
.translate-pop__text  { color: var(--color-secondary); font-size: .9rem; margin-bottom: .6rem; }

/* actions */
.translate-pop__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items:center; }
.translate-pop__cta {
    background: linear-gradient(180deg, var(--color-like-hover), var(--color-like-bg));
    border: 1px solid var(--color-secondary);
    padding: .45rem .7rem;
    border-radius: .5rem;
    text-decoration: none;
    color: var(--color-secondary);
    font-weight: 600;
    font-size: .88rem;
    display: inline-block;
}
.translate-pop__cta:hover {
    border-color: var(--color-progress); color: var(--color-article-title); }

/* ghost / link */
.translate-pop__ghost { background: transparent; color: var(--color-secondary); border: none; padding: .4rem .6rem; font-size: .88rem; text-decoration: underline; }
.translate-pop__link { color: var(--color-secondary); text-decoration: underline; font-size: .85rem; }

/* close */
.translate-pop__close {
    position: absolute;
    top: .5rem;
    right: .6rem;
    background: transparent;
    border: none;
    color: var(--color-muted);
    font-size: 1.05rem;
    padding: .25rem;
    border-radius: .35rem;
}

/* visible state */
.translate-pop.is-visible {
    display: grid;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
    .translate-pop, .translate-pop__icon::after { transition: none !important; animation: none !important; transform: none !important; }
}

/* mobile tweak */
@media (max-width: 600px) {
    .translate-pop { right: 1rem; left: 1rem; bottom: 1rem; max-width: none; width: auto; padding: .8rem; }
    .translate-pop__icon { display: none; }
}
/* Conteneur "toaster" qui gère la pile (bottom-right) */
.pop-stack{
    position: fixed;
    right: 2rem;
    bottom: 2.2rem;
    z-index: 100000;
    display: flex;
    flex-direction: column-reverse; /* la plus récente en bas */
    gap: .75rem;
    max-width: 360px;
    width: calc(100% - 3rem);
    pointer-events: none; /* laisse les cartes gérer les clics */
}

/* Quand une popup est dans .pop-stack, elle n'est plus en position:fixed */
.pop-stack .translate-pop{
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    pointer-events: auto;
    /* on ajoute la possibilité d’animer la fermeture par hauteur */
    will-change: height, margin, padding, opacity, transform;
}

/* Mobile : même principe mais sur toute la largeur */
@media (max-width: 600px){
    .pop-stack{ right: 1rem; left: 1rem; bottom: 1rem; width: auto; max-width: none; }
}

.subsubtitle{
    font-size: 1.5rem;
    font-family: "Poppins SemiBold", sans-serif;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-article-title);
    width: 70%;
}
/* Style img article */

/* Style img article */
/* Conteneurs (mêmes marges/fluidité que la version verticale) */
.img3vertical,
.img3horizontal{
    margin: clamp(3rem, 6vw, 5rem) auto clamp(4rem, 7vw, 6rem);
    max-width: 1200px;
    width: 100%;
    padding-inline: clamp(1rem, 3vw, 2rem);
}


/* Grilles 3 → 2 → 1 colonnes */
.contentimg3vertical,
.content3horizontal{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 3vw, 2rem);
    align-items: start;
}

/* Médias full-width dans leur cellule */
.img3vertical img, .img3vertical video,
.img3horizontal img, .img3horizontal video{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;

}
.img3vertical img, .img3vertical video {
    /*aspect-ratio: 9/16;*/
}
/* 2 colonnes (tablette) */
@media (max-width: 1024px){
    .contentimg3vertical,
    .content3horizontal{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1 colonne (mobile) */
@media (max-width: 640px){
    .contentimg3vertical,
    .content3horizontal{
        grid-template-columns: 1fr;
    }
}

/* Légende (tu peux réutiliser la même classe) */
.legendimg3vertical{
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    color: var(--color-article-text);
    margin-top: clamp(1rem, 2vw, 2rem);
    width: 100%;
    padding: 1rem;
    border-left: 0.25rem solid #ececec;
    background: rgba(0,0,0,0.02);
    border-radius: 0.25rem;
}

/* Bloc 2 images horizontales, responsive */
.img2horizontal{
    max-width: 1200px;
    width: 100%;
    margin: clamp(2rem, 5vw, 4rem) auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.content2horizontal{
    display: grid;
    /* 2 colonnes quand il y a la place, sinon 1 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(0.75rem, 3vw, 2rem);
    align-items: start;
}

/* Images 16/9, mêmes hauteurs, bords arrondis */
.img2horizontal img{
    width: 100%;
    display: block;
    border-radius: 0.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover; /* retire-le si tu ne veux aucun recadrage */
}
@media (max-width: 480px){
    .img2horizontal img{
        width: 80%;
    }
}

/* Image verticale seule — compacte, ratio conservé, pas d'upscale */
.imgalonevertical{
    width: 100%;
    max-width: clamp(260px, 45vw, 520px);  /* plus petit qu'avant */
    margin: clamp(1.25rem, 4vw, 2.5rem) auto;
    padding-inline: clamp(0.5rem, 2vw, 1rem);
}

.imgalonevertical img, .imgalonevertical video{
    display: block;
    /* Ne pas agrandir au-delà de la taille native */
    width: auto;
    max-width: 100%;   /* se réduit si conteneur plus étroit */
    height: auto;      /* ratio conservé */
    max-height: 75vh;  /* pas trop haut à l'écran */
    margin-inline: auto;
    border-radius: 0.5rem;
}

/* Légende compacte */
.legendimgalone{
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    color: var(--color-article-text);
    margin-top: clamp(0.75rem, 2.2vw, 1.25rem);
    padding: 0.9rem 1rem;
    border-left: 0.25rem solid #ececec;
    background: rgba(0,0,0,0.02);
    border-radius: 0.25rem;
}

/* Mobile : largeur plein écran si besoin, et encore un peu moins haut */
@media (max-width: 640px){
    .imgalonevertical{
        max-width: 100%;
        padding-inline: clamp(0.5rem, 4vw, 1rem);
    }
    .imgalonevertical img{
        max-height: 70vh;
    }
}
/* === 2 images verticales (ratio 3/4), responsive === */
.img2vertical{
    width: 100%;
    max-width: clamp(320px, 70vw, 800px);
    margin: clamp(1.25rem, 4vw, 2.5rem) auto;
    padding-inline: clamp(0.5rem, 2vw, 1rem);
}

.content2vertical{
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr)); /* 2 colonnes si possible */
    gap: clamp(0.5rem, 2.5vw, 1rem);
    align-items: start;
}

/* Les <img> eux-mêmes portent le ratio et le crop (pas de wrapper) */
.content2vertical img, .content2vertical video{
    width: 100%;
    aspect-ratio: 3 / 4;   /* = 0.75, vertical */
    object-fit: cover;      /* remplissage + recadrage propre */
    object-position: center;
    display: block;
    border-radius: 0.5rem;
}
.content2vertical video{
    object-fit: contain; /* garde les proportions, avec bandes noires si besoin */
    background: transparent;
    border-radius: 0.5rem;
}

/* Mobile : on passe en 1 colonne pour éviter des vignettes trop petites */
@media (max-width: 640px){
    .content2vertical{
        grid-template-columns: 1fr;
    }
}