/* 1. Les variables par défaut (Light) */
:root {
    --bg-color: #ddd;
    --bg-color2: #eee;
    --bg-hard: #fff;
    --bg-soft: #999;
    --bg-revert: #333;
    --grain-filter: none;
    --grain-blend: multiply;
    --icon-filter: none;
    --icon-filter-hover: invert(1);
}

/* 2. Si le système veut du Dark, on change les variables */
@media (prefers-color-scheme: dark) {
:root {
    --bg-color: #333;
    --bg-color2: #292929;
    --bg-hard: #222;
    --bg-soft: #999;
    --bg-revert: #ddd;
    --grain-filter: invert(1);
    --grain-blend: screen;
    --icon-filter: invert(1);
    --icon-filter-hover: none;
}
}

/* 3. Les classes de "force" pour le bouton (plus fortes que la media query) */
[data-theme="light"] {
    --bg-color: #ddd;
    --bg-color2: #eee;
    --bg-hard: #fff;
    --bg-soft: #999;
    --bg-revert: #333;
    --grain-filter: none;
    --grain-blend: multiply;
    --icon-filter: none;
    --icon-filter-hover: invert(1);
}

[data-theme="dark"] {
    --bg-color: #333;
    --bg-color2: #292929;
    --bg-hard: #222;
    --bg-soft: #999;
    --bg-revert: #ddd;
    --grain-filter: invert(1);
    --grain-blend: screen;
    --icon-filter: invert(1);
    --icon-filter-hover: none;
}

html * {
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body {
    font-family: "Lato", sans-serif;
    margin: 0;
    background-color: var(--bg-color); /* Ton gris de base */
    min-height: 100dvh;
    position: relative;
    color:var(--bg-revert);
}
body.menu-is-open .content * {
    pointer-events: none;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;

    /* --- LE SECRET DU GRAIN FIN "HD" --- */
    /* 1. baseFrequency='1.2' : Plus ce chiffre est élevé, plus le grain est petit et dense. */
    /* 2. numOctaves='2' : On baisse un peu pour éviter un aspect trop "nuageux" et garder du piqué. */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fineNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fineNoise)'/%3E%3C/svg%3E");
    
    /* --- CONTRÔLE DE L'INTENSITÉ --- */
    /* Pour un effet papier confort, on garde l'opacité très basse. */
    /* 0.04 est souvent le "sweet spot" pour un grain perceptible mais pas gênant. */
    opacity: 0.3; 
    filter: var(--grain-filter);
    mix-blend-mode: var(--grain-blend);

    /* --- OPTIMISATION DU RENDU --- */
    /* Force le navigateur à rendre le bruit avec un maximum de netteté */
    image-rendering: pixelated; /* Pour Chrome/Edge/Opera */
    -webkit-print-color-adjust: exact; /* Pour Firefox */
    print-color-adjust: exact; /* Pour Firefox */
    
    /* --- SÉCURITÉ ET EMPLACEMENT --- */
    pointer-events: none; /* Laisse passer les clics */
    z-index: -1; /* Reste en arrière-plan */
}
.dark-light-button {
    width:50px;
    height:50px;
    border-radius:50%;
    margin-left:calc(50% - 25px);
    margin-top:20px;
    margin-bottom:20px;
    background-color:var(--bg-revert);
    cursor:pointer;
}
.connect-popup {
    width:400px;
    background-color: var(--bg-color2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius:10px;
    padding:10px;
}
.title {
    text-align: center;
    font-size:30px;
    font-weight: bold;
    padding:10px;
}
.input-label {
    font-style: italic;
    opacity: 0.8;
}
input[type=email], input[type=password] {
    border:none;
    border-radius: 5px;
    background-color: var(--bg-hard);
    width:100%;
    padding:10px;
    color:var(--bg-revert);
}
button {
    background-color: var(--bg-color);
    color:var(--bg-revert);
    border:none;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
}
button:hover {
    cursor: pointer;
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
a {
    text-decoration: none;
    color:inherit;
}
a.link, a.link > div {
    text-decoration: underline;
    cursor:pointer;
}
.menu-img {
    width:50px;
    vertical-align: middle;
    border-radius: 50%;
}
.menu-title {
    margin-left: 20px;
}
.menu-button {
    display: none;
}
.menu-button img {
    width:35px;
    height:35px;
    margin:20px;
    filter: var(--icon-filter);
}
.menu-label  {
    padding-left:10px;
    font-style: italic;
}
.menu-item {
    padding:5px 10px 5px 30px;
    color:var(--bg-revert);
    font-weight: bold;
    display: flex;
    gap: 10px;
    align-items: center;
}
.menu-item:hover {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.menu-item:hover img {
    filter: var(--icon-filter-hover);
}
.menu-item > img {
    width:20px;
    filter: var(--icon-filter);
}
.menu-notif {
    background-color:red;
    color:white;
    padding:0 5px;
    border-radius:5px;
    font-size:10px;
    margin-left:-20px;
    margin-top:-10px;
    z-index: 500;
}
.main {
    max-width:1300px;
    width:100%;
    margin:auto;
    position: relative;
    padding:20px;
}
.mobil-menu {
    display: none;
}
.menu {
    position: fixed;
    height:calc(100vh - 40px);
    background-color: var(--bg-color2);
    width:250px;
    border-radius:10px;
    overflow-y: auto;
}
.menu-logo {
    font-size: 18px;
    padding:10px;
    font-weight: bold;
}
.content {
    margin-left:270px;
}
.content-div {
    background-color: var(--bg-color2);
    border-radius: 10px;
    padding: 10px;
}
.new-post:hover {
    background-color: var(--bg-revert);
}
.new-post-button {
    margin:auto;
    font-size:30px;
    padding: 50px;
    text-align: center;
    border-radius: 10px;
    border:solid 1px var(--bg-revert);
}
.new-post:hover > .new-post-button {
    border:solid 1px var(--bg-color);
    color: var(--bg-color);
}
.content-title {
    font-weight: bold;
    font-style: italic;
}
.publi-list {
    display:flex;
    overflow-x: auto;
}
.publi {
    margin:20px;
    background-color: var(--bg-color);
    padding:20px;
    border-radius:5px;
    height:100%;
    width:154px;
}
.publi:hover {
    cursor:pointer;
}
.publi:hover > .publi-img > img {
    transform: scale(1.5);
    z-index: 10;
}
.publi-img {
    width:114px;
    height:114px;
    box-shadow: 0 0 10px 1px #ddd;
    margin-top: 10px;
    margin-bottom: 10px;
}
.publi-img img {
    width:104px;
    height:104px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}
.publifull-img {
    width:300px;
    height:300px;
    box-shadow: 0 0 10px 1px #ddd;
    margin-top: 10px;
    margin-bottom: 10px;
}
.publifull-img img {
    width:290px;
    height:290px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}
.facebook {
    border: solid 5px #3b5998;
}
.instagram {
    border: 5px solid transparent; 
    border-image-source: linear-gradient(
        45deg, 
        #f09433 0%, 
        #e6683c 25%, 
        #dc2743 50%, 
        #cc2366 75%, 
        #bc1888 100%
    );
    border-image-slice: 1;
}
.tiktok {
    /* Épaisseur de la bordure */
    border: 5px solid transparent; 
    
    /* Le dégradé part du haut-gauche vers le bas-droite */
    border-image-source: linear-gradient(
        135deg, 
        #69C9D0 0%,   /* Bleu en haut à gauche */
        #69C9D0 30%,   /* Bleu en haut à gauche */
        #010101 50%,  /* Transition vers le noir */
        #EE1D52 70%,  /* Transition vers le noir */
        #EE1D52 100%  /* Rouge en bas à droite */
    );
    
    /* Pour que le dégradé remplisse toute la bordure */
    border-image-slice: 1;
}
.tag {
    background-color: var(--bg-color);
    padding:2px 10px;
    font-size:14px;
    font-style: italic;
    border-radius: 10px;
}
.tag:hover {
    cursor:pointer;
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.publi > .tag, .search-result .tag {
    background-color: var(--bg-color2);
}
.publi > .tag:hover, .search-result .tag:hover {
    background-color: var(--bg-color2);
    color:inherit;
}
.search-result {
    display: flex;
    background-color:var(--bg-color);
    padding:10px;
    margin:20px 0;
    border-radius: 20px;
}
.search-result:hover {
    background-color: var(--bg-revert);
    color:var(--bg-color);
}
.search-result:hover .tag {
    color:var(--bg-revert);
}
.publi-msg {
    margin:20px;
    border-radius: 20px;
    background-color: var(--bg-color);
    padding:10px;
    width:80%;
}
.publi-msg-right {
    margin-left:20%;
}
.publi-msg-info {
    border-bottom: solid 5px var(--bg-color2);
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.publi-msg-info-horo {
    font-size:14px;
    font-style: italic;
}
.publi-answer > textarea {
    width:100%;
    height:200px
}
textarea {
    border: none;
    border-radius: 20px;
    resize: none;
    background-color: var(--bg-hard);
    color: var(--bg-revert);
    padding:10px;
}
textarea:focus, input:focus{
    outline: none;
}
.radiobutton {
    display: none;
}
.labelbutton {
    cursor:pointer;
    padding:5px 10px;
    border-radius: 10px;
    background-color: var(--bg-color);
}
.labelbutton:hover {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.radiobutton:checked + .labelbutton {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.create-div, .publi-div {
    display: flex;
}
.add-content {
    border:solid 5px var(--bg-color);
}
.add-content-img {
    display:none;
}
.add-content:hover {
    border:solid 5px var(--bg-revert);
}
.add-content:hover * {
    cursor:pointer;
}
.add-content-comment {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor:pointer;
    padding:5px;
    border-radius: 10px;
    background-color: var(--bg-color);
}
.add-content-comment:hover {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.add-content-comment img {
    width:50px;
    height:50px;
}
.conv-list-item {
    padding:10px;
    text-align: center;
}
.conv-list-item:hover {
    background-color: var(--bg-revert);
    color:var(--bg-color);
    cursor:pointer;
}
.conv-list-item > img {
    width:100px;
    height:100px;
}
.account-item > td {
    padding:20px;
}
.account-item:hover {
    background-color: var(--bg-color);
}
.account-item-notconnected {
    color:#990000;
    font-weight: bold;
}
.account-item-connected {
    color:#009900;
    font-weight: bold;
}
.index-links {
    position:fixed;
    bottom:20px;
    right:20px;
    font-style:italic;
}
@media (max-width: 1299px) and (orientation: portrait) {
    /* styles mobile */
    .connect-popup {
        width:90%;
    }
    .index-links {
        margin-left:90px;
        overflow: auto;
    }
    .main {
        padding: 0;
    }
    .mobil-menu {
        position: sticky;
        top:0;
        height:75px;
        display: flex;
        text-align: center;
        background-color: var(--bg-hard);
        transition: transform 0.3s ease, height 0.3s ease;
        transform: translateY(0);
        overflow: hidden;
        z-index: 1000;
    }
    .mobil-menu.slide-up {
        transform: translateY(-100%);
        height: 0;
    }
    .mobil-menu .menu-button {
        display: block;
        width:80px;
    }
    .menu {
        display: block;
        z-index: 1000;
        height: 100vh;
        border-radius: 0;
        width: 0;
        transition: width 0.3s ease;
        overflow: hidden;
        white-space: nowrap;
    }
    .menu.open {
        width: 250px;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 0 30px 10px black;
    }
    .content {
        margin:0;
    }
    .content-div {
        border-radius: 0;
    }
    .dark-light-button {
        width:30px;
        height:30px;
        margin-left:calc(50% - 15px);
    } 
    .create-div, .publi-div {
        display: block;
    }
    .labelbutton {
        display: block;
        padding:10px;
        margin-top: 5px;
    }
}