/**
* 
* Template : Quentinrenaux V2025 (pas encore ce nom mais beintot)
* Author : Quentin Renaux
* Version : 2025
* Crée le : 28/11/24
* Last edit : 28/11/24
*
*/


:root {
    --color-light-background: #ffffff;
    --color-light-text: #000000;
    
    --color-dark-background: #121212;
    --color-dark-text: #e0e0e0;
}

/* -------- html et body + dark / light mode -------- */
/* --------------- pour template v2025 ------------- */

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--color-light-background);
    color: var(--color-light-text);

    /*overflow-x: hidden; fait bugger les sticky */
}

/* Revue design sept. 2026 : mode sombre désactivé.
   Il ne changeait que le fond et la couleur du texte de la page : tout le
   reste du site (cartes, bordures, menus, images) restait en clair, ce qui
   donnait un rendu illisible chez les visiteurs en mode sombre.
   Il était d'ailleurs déjà annulé deux lignes plus bas, donc personne ne
   l'avait jamais vu. À refaire proprement un jour, en déclinant toutes
   les couleurs, pas seulement celles du body.

@media (prefers-color-scheme: dark) {
    html, body {
        background-color: var(--color-dark-background);
        color: var(--color-dark-text);
    }
}
*/

/* Revue design sept. 2026 : CE BLOC ÉTAIT LA CAUSE DU FOND NOIR.
   Il annulait le bloc « mode sombre » juste au-dessus, et n'était lui-même
   masqué que par un body{background:#fff} écrit en dur dans header-v25.php.
   Dès qu'on retirait ce CSS du <head>, tout le site passait au noir.
   On le neutralise : le fond est défini une seule fois, dans style-v26.css. */
/* html, body { background: #222; } */

/* TEST SI BG IS #222 SUR SAFARI (test terminé, voir ci-dessus) */

/* Ciblage spécifique pour iPhone Safari */
 @supports (-webkit-touch-callout: none) and (not (translate: none)) { 
    /* Barre fixe en haut de l'écran pour un petit effet degradé */
    .safari-top-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(to bottom, #222, transparent);
      pointer-events: none; /* La barre ne sera pas cliquable */
      z-index: 9999; /* Toujours au-dessus des éléments */
    }
  }


/* ----- button classique ----- */
  button {
    position: relative; 
    top: inherit;
    bottom: inherit;
    right: inherit;
    bottom: inherit;
    
    /*background: rgba(0, 0, 0, 0.8);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;*/
  }


/* ----- accueil : cube container ----- */
.cube-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 1;

    pointer-events: none;
}

.cube-container a {
    pointer-events:all;
}

/* ----- accueil : quentin random images section (plugin) ----- */
#qris-container button, #qris-container #counter, #qris-container #caption{
    border: 2px solid black;
    padding: 10px 20px 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    z-index: 200;
    /*cursor: pointer;*/
    /* margin: 4px 10px; */
    display: block;

    background: transparent;
    color: #000;

    mix-blend-mode: difference;
    filter: invert(1);
}

#qris-container #changeButton {
    left: 10px;
    bottom: 270px;
    right: inherit;
} 
#qris-container #autoplayButton {
    left: 10px;
    bottom: 315px;
    right: inherit;
}
#qris-container #counter {
    left: 10px;
    bottom: 360px;
    right: inherit;
}
#qris-container #caption {
    left: 10px;
    bottom: 410px;
    right: inherit;
}


/* ----- accueil : new article container liste ----- 
 * ------------------ (28/12/24) ------------------ */

/* container flex masonry */
.av25_container {
    position: relative;
    width: calc(100% - 0px);

    background-color: transparent;

    z-index: 10;
  }
  
.av25_remonter {
    margin: -180px auto 0;
    pointer-events: none;
  }  

.av25_wrapper {
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    /* grid-gap: 5px; */
    grid-template-columns: repeat(5, 20%);
    width: 100%;
    padding: 0px 30px 30px 10px;
  }


  /* blog container */
    .full-blog-container {
        background: #fff;
        background: linear-gradient(179deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(11, 214, 95, 1) 75%, rgba(38, 46, 39, 1) 88%, #0c0c0c 100%);
        padding: 10px 0;
        position: relative;
        display: block;
    }

    .blog_container {
        border: 2px solid #222;
        border-radius: 20px;
        clip-path: inset(0 round 20px);
        border-radius: 20px;

        background: #fff;
        background-image: linear-gradient(RGBA(0,0,0,0.06) .05em, transparent .1em), linear-gradient(90deg, rgba(0,0,0, 0.06) .05em, transparent .1em);
        background-size: 5% 3em;

        width: calc(100% - 16px);
        margin: 30px 8px;
    }


    /* blog : titre container */
    .av25-container_blogtitre {
        /*margin: 0 0 20px;*/
        padding: 50px 15px 15px;
        background-color: #000;
        border-bottom: 2px dotted #222;
        border-radius: 0 0px 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 0;
        position: sticky;
        top: 0;

        color: #d9d9d9;
    }
  
    .av25-container_blogtitre h2 {
        font-size: 4.7vw;
        margin: 10px;
        font-weight: bold;
        font-family: "Krona One", Arial, Helvetica, sans-serif;
        font-weight: 400;
        position: relative;
    }

    .av25-container_blogtitre h2::before {
        content: "nouvelle categorie";
        position: absolute;
        top: 6px;
        left: -14px;
        transform: rotate(351deg);
        font-size: 13px;
        background: orange;

        display: none;
    }

    .av25-container_blogtitre p {
        font-size: 12px;
        margin: 0;
        font-weight: 500;
    }


    /* ipad */
    @media (max-width: 1200px) { 
        .av25_container {
            width: 100%;
        }
        
        .av25_remonter {
            margin: -120px auto 0;
        }
        .av25_wrapper {
            display: grid;
            grid-template-columns: repeat(3, 33%);
            /* grid-gap: 5px; */
            width: 100%;
            padding: 0px 20px 30px 0px;
        }

        .blog_container {
            width: calc(100% - 16px);
            margin: 20px 8px;
        }
    }

    /* mobile */
    @media (max-width: 800px) { 
        .av25-container_blogtitre {
            padding: 50px 5px 15px;
        }
         .av25-container_blogtitre h2 {
            transform: rotate(270deg);
            font-size: 4vw;
            padding: 10px;
            margin-right: -9px;
            margin-left: -24px;
            text-transform: uppercase;
        }

        .av25-container_blogtitre p {
            font-size: 11px;
        }

        .av25_container {
            width: 100%;
        }
        .av25_remonter {
            margin: -100px auto 0;
        } 
        .av25_wrapper {
            display: grid;
            grid-template-columns: repeat(2, 50%);
            /* grid-gap: 5px; */
            width: 100%;
            padding: 0px 20px 30px 0px;
        }


        .blog_container {
            width: calc(100% - 16px);
            margin: 20px 8px;
        }


        /*cache le 9eme article */ 
        /*.av25_wrapper .av25_item:nth-child(9) {
            display: none;
        }*/

    }


/* items */
.av25_item {
    display: flex;
    min-height: 300px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    /*padding: 120px 10px 10px;*/
    padding: 0px 10px 0px;
    margin: 50px 10px 10px;
    pointer-events: all;
  }

.double-size_item {
    /*border: 1px solid grey;*/
    grid-column: span 2;
}

.av25_waitingvideo {
    background: #f8f8f8;
    border: 1px dotted grey;
    padding: 20px 10px;
}


/* titre */
  .av25_item-titre {
    padding: 11px 4px 4px;

    /*overflow-wrap: break-word;*/
    word-break: break-word;
    width: 90%;
  }

  .av25_item-titre_waitingvideo {
    padding: 11px 4px 4px;

    /*overflow-wrap: break-word;*/
    word-break: break-word;
    width: 90%;
    color: #00000092;
  }

  .av25_item-titre h3 {
    font-size: 22px;
  }

  .av25_item-titre p {
    font-size: 12px;
  }

.av25_item-thumbnail {
    width: 100%;
}

  .av25_item-bottom {
    padding: 0 4px 10px;
    font-size: 15px;
  }

/*  p-v24-thisiseverything 
    pour item: code de cat: lvl */
.av25_item-code {
    /*border: 1px solid red;*/
    height: 100%;
    width: 100%;
}  

.hide_sur_mobile-coche {
    position:relative;
}

@media (max-width: 800px) { 
      .hide_sur_mobile-coche {
        display:none;
    }

    .av25_item-titre h3 {
        font-size: 17px;
      }
}
.versessentiel {
    width: 100%; /* Prend toute la largeur disponible */
    height: 100%; /* Prend toute la hauteur disponible du parent */
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    padding: 30px 30px 30px 50px;
        margin: 0; /* Supprime les marges externes */

        pointer-events: all;
}

.versessentiel a {
    display: flex    ;
        align-items: center;
        justify-content: center;   
         width: 100%; /* La largeur s'ajuste */
    max-width: 300px; /* Définit une largeur maximale pour le carré */
    aspect-ratio: 1 / 1; /* Maintient le lien en carré */
    background: #efefef; /* Fond du carré */
    border: 2px dotted grey; /* Bordure du carré */
    font-size: 18px; /* Taille de police */
    font-weight: 600; /* Épaisseur de la police */
    text-align: center; /* Centrage du texte */
    color: inherit; /* Hérite de la couleur du parent */
    transition: all 0.3s ease-out; /* Animation sur le hover */
    padding: 0 0 2px;
}

.versessentiel a:hover {
    background: #151515; /* Couleur de fond au survol */
    border-color: rgb(115, 115, 115); /* Couleur de la bordure au survol */
    color: #fff; /* Texte blanc au survol */
    transition: all 1.3s ease-out;
    text-decoration: none; /* Supprime la ligne sous le lien */

}


/* ----- accueil : footer - à propos 2025 ----- */
/* last version : 28/11/24 */

.a-propos-2025 {
    margin: 0 auto;
    position: relative;

    font-size: 16px;
    color: #dedede;
    line-height: 1.5;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: calc(12% + 60px) 10% 12%;

    background: #080808;
    background-image: linear-gradient(rgb(93 93 93 / 6%) .05em, #e0e0e000 .1em), linear-gradient(90deg, rgb(183 183 183 / 6%) .05em, #d8d8d800 .1em);
    background-size: 5% 3em;

}

.a-propos-2025 p {
    padding: 10px;
}

.a-propos-2025 a {
    color: #000000;
    text-decoration: none;
    background: #0bd65f;
    border-radius: 3px;
    padding: 2px 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.a-propos-2025 a:hover {
    color: #e7e7e7;
    text-decoration: none;
    background: #111;
}

.apropos-ensavoirplus a {
    text-decoration: none;
    padding: 8px 16px; 
    border-radius: 40px;;
    margin: 10px;

    border: 1px solid #b5b5b5;
    background: transparent;
    color: #e1e1e1;

    transition: all 0.3s ease;
}

.apropos-ensavoirplus a:hover {
    text-decoration: none;

    border: 1px solid #fff;
    background: #ddd;
    color: #555;

    border: 1px solid #0bd65f;;
    background: #0bd65f;;
    color: #111;
}

@media (max-width: 800px) {
    .a-propos-2025 {
        min-height: 90vh;
        z-index: 1000000;
    }
}


/* ----- footer accueil instagram ----- */
/* Footer container */
.museum-contemporary-footer {
    height: 300px;
    display: flex;
    align-items: center;
    position: relative;

    background: #080808;
    
    background-image: linear-gradient(rgb(93 93 93 / 6%) .05em, #e0e0e000 .1em), linear-gradient(90deg, rgb(183 183 183 / 6%) .05em, #d8d8d800 .1em);
    background-size: 5% 3em; /* Taille d’un carreau */


    color: #fff;
    text-align: center;
    padding: 80px 20px;
    overflow: hidden;
    cursor: pointer;
  }
  
  .museum-contemporary-footer::before {
    content: "";
    position: absolute;
    left: 50%;     
    top: 50%;
    transform: translate(-50%, -50%);
    
    width: 0;  /* On part de 0px de taille */
    height: 0; 
    border-radius: 50%;
    
    /* Couleur claire légèrement transparente pour le ripple */
    background: rgba(255, 255, 255, 0.1);
    
    opacity: 0;
    transition: all 1s ease-out; 
    z-index: 0; 
  }
  
  .museum-contemporary-footer:hover::before {
    width: 600px;
    height: 600px;
    opacity: 0.3;
  }
  
  .footer-content {
    position: relative; 
    z-index: 1; /* Au-dessus du wave effect */
    max-width: 800px; 
    margin: 0 auto;
  }
 
  .footer-insta {
    display: inline-block;
    font-size: 1.3rem;

    font-weight: 800;
    border-radius: 4px;
    border: 2px solid #d6d6d6;


    text-decoration: none;
    color: #d6d6d6; 
    padding: 10px 20px;
    transition: color 0.3s ease, background-color 0.3s ease;
  }
    .footer-insta:hover {
    background-color: #ebebeb;
    color: #2a2a2a;
    text-decoration: none;
  }
  
  
/* footer v25 (include-footerlinks_v25) */

.footer_v25 {


    background-image: 
    linear-gradient(to right, #80808015 1px, transparent 1px),
    linear-gradient(to bottom, #80808015 1px, transparent 1px);

    background-size: 20px 20px; /* Taille d’un carreau */
    background-size: 6% 3em; /* Taille d’un carreau */

    background-color: var(--color-light-background);
    color: var(--color-light-text);

    background: #222;
    color: #eee;

}

.footer_v25 h2 {
    font-size: 14px;
    padding: 24px 0px 0;
    text-align: center;
}

.footer_v25 .top-viewed-articles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px 20px;
}

.footer_v25 .article-card {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 5px 10px;
    border-radius: 20px;

    border: 1px solid #000;
    background: #313131;
    color: #eee;

    overflow: hidden;
    white-space: nowrap;
}

.footer_v25 .article-image img {
    min-width: 40px;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50px; /* ronde */
}

.footer_v25 .article-info {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer_v25 .article-info h3 {
    font-size: 14px;
    margin: 0;
    font-weight: normal;
    line-height: 1.2;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%; /* Empêcher le dépassement */
    display: block;
}

.footer_v25 a {
    text-decoration: none;
    color: #fff;
}

.footer_v25 a:hover {
    text-decoration: none;
    color: #000;
}

.footer_v25 .article-info h2 a:hover {
    text-decoration: underline;
}

.footer_v25 .views {
    font-size: 12px;
    color: #777;
}


/* ----------- single (v25) ------------- */

.previous-post-position-v25_1 {
    position: relative;
    padding: 10px 60px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: #66666629;
}

.previous-post-v25_1 {
    width: 200px;
}


/* ------------- essentiel : cover ----------- */
.v25-essentiel-cover {
    min-height: 300px;

    background-color: #0c0c0c;
    background-image: 
    linear-gradient(to right, #80808015 1px, transparent 1px),
    linear-gradient(to bottom, #80808015 1px, transparent 1px);
    background-size: 20px 20px; /* Taille d’un carreau */
    background-size: 6% 3em; /* Taille d’un carreau */
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.v25-essentiel-cover .descriptionpage {
    max-width: 760px;
}

.v25-essentiel-cover .descriptionpage a {
    color: #fff;
}

/* ------------- essentiel : pagination ----------- */
.v25-essentiel-pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.v25-essentiel-pagination a,
.v25-essentiel-pagination span {
    margin: 0 5px;
    padding: 12px 20px;

    font-weight: 800;
    border-radius: 4px;

    border: 2px solid #0a0a0a;

    background-color: #fff;
    text-decoration: none;
    color: #0a0a0a;
}

.v25-essentiel-pagination .current {
    background-color: #0a0a0a;
    color: #fff;
}

.v25-essentiel-pagination a:hover {
    background-color: #1f1f1f;
    color: #f9f9f9;
    text-decoration: none;
}

@media (max-width: 768px) {
    .v25-essentiel-pagination a, .v25-essentiel-pagination span {
        margin: 0 4px;
        padding: 9px 16px;
    }
}
  

/* ----- tag, meta, entry etc... ------ */

/* ----- dans: single / tag ----- */
.tag-v5-beta {
    /*border: 1px dotted black;*/
    padding: 10px 0;
    /*margin: 10px 0;*/
    position: relative;
}

.tag-versionsingle {
    position: relative;
    /*top: -35px;*/
}


/* header articles */
.tag-v5-beta header {
    /*border: 1px solid blue;*/
    padding: 10px 0;
}

.tag-v5-beta .entry-title {
    margin: 0 0 10px 0;
}

/* articles metas liste */
/* ------- debut meta Conteneur principal pour le slider -------  */
.entry-meta-slider-container {
    position: relative;
    overflow: hidden;
}

/* Section scrollable */
.entry-meta {
    display: flex;
    flex-wrap: nowrap; /* Les items restent sur une ligne */
    overflow-x: auto; /* Active le scroll horizontal */
    scroll-behavior: smooth; /* Défilement fluide */
    gap: 10px; /* Espacement entre les éléments */
    padding: 10px;
}

/* Style des items */
.betameta-v25 {
    flex: 0 0 auto; 
    border: 1px solid grey;
    padding: 6px 10px;
    border-radius: 20px;
    white-space: nowrap;
    background: #f9f9f9;
    font-size: 12px;
}

/* Style de la flèche */
/* Flèche plus discrète */
.scroll-arrow {
    position: absolute;
    top: 0;
    height: 100%; 

    width: 40px;
    border: 0px solid orange;
    color: transparent;
    font-size: 15px;
    padding: 5px;
    font-weight: 800;
    opacity: 1;

    background: transparent;

    cursor: pointer;
    z-index: 10;

    
    display: flex;
    align-items: center;
    justify-content: center;  

    transition: all 0.3s ease;
}

/* Flèche gauche */
.scroll-left {
    left: 0px; /* Positionnez la flèche à gauche */
    background: linear-gradient(to right, white, transparent);
}

/* Flèche droite */
.scroll-right {
    right: 0px;
    background: linear-gradient(to right, transparent, white);
}

.scroll-left:hover {
    border-left: 4px solid #444
}

.scroll-right:hover {
    border-right: 4px solid #444
}

.scroll-arrow:hover {
    width: 10%;
    color:#444;
}

/* Masquer les flèches par défaut */
.scroll-arrow:disabled {
    opacity: 0; /* Rendre invisible */
    pointer-events: none; /* Désactiver l'interaction */
}

/* Masquer la barre de défilement */
.entry-meta {
    -ms-overflow-style: none; /* Internet Explorer */
    scrollbar-width: none; /* Firefox */
}

.entry-meta::-webkit-scrollbar {
    display: none; /* Chrome, Safari et Edge */
}

/* Style mobile */
@media (max-width: 768px) {
    .entry-meta {
        padding: 15px;
        gap: 5px;
    }
}

/* ---- fin meta ? ---- */
/* ---- fin meta ? ---- */


/* content */
.tag-v5-beta .entry-summary {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: row; 
    align-items: flex-start; 
    gap: 20px; 
}


/* La "fenêtre" */
.entry-summary .fenetre-enfant {
    flex: 0 0 auto; 
    max-width: 30%; 
}

.entry-summary .av25_waitingvideo {
    flex: 0 0 auto; 
    max-width: 30%; 
}

@media (max-width: 800px) {
    .entry-summary .fenetre-enfant {
        max-width: 50%; 
    }

    .entry-summary .av25_waitingvideo {
        max-width: 50%; 
    }
}


/* Le texte à droite */
.entry-summary > .tag-content-liste-v25 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    height: 100%;
}

.tag-v5-beta .post {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tag-v5-beta .entry-summary {
    display: block;
    display: flex;
    grid-gap: 20px;
}


/* ------- page chateau perché festival CP (v25) -------- */

.child-pages-list_cp25 {
    position: relative;
    width: 100%;

    /*border: 1px solid red;*/
    /*
    taille de l'ecran: 
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    */
}

.child-page-item_cp25 {
    /*border: 1px solid red;*/
    margin: 10px 0;
}

.post_content .child-page-item_cp25 h2 {
    padding: 30px 10px 20px;
    border-top: 0;
}


.child-page-item_cp25 .av25_wrapper {
    grid-template-columns: repeat(4, 1fr);
    /*border: 1px solid red;*/

    border: 1px solid #80808070;
    padding: 10px;
    background: #f8f8f8b5;
    border-radius: 4px;
    margin: 10px 0;

    width: calc(100% + 60px);
    margin-left: -30px;
    margin-bottom: 40px;
}

.child-page-item_cp25 .short-description {
    padding: 10px 0;
}

.post_content .child-page-item_cp25 a.nopline::before {
    display: none;
}

@media screen and (max-width: 800px) {
    .child-page-item_cp25 .av25_wrapper {
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 20px 0px 0px;

        width: calc(100% + 20px);
      margin-left: -10px;
    }
  }


/* ------- page listing des articles et pages et stats (v25) -------- */
/* page v25-liste */

#page-list li, #post-list li, .cattag-liste-stats li{
    border-bottom: 1px solid #f5f5f5;
    padding: 4px 4px 4px 20px;
    margin: 2px;
    display: flex;
    justify-content: flex-start;
    column-gap: 10px;
    position: relative;
}

.liste-stat-count {
    background: #000000;
    color: #fff;
    border-radius: 50%;
    min-width: 20px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -11px;
    top: 1px;
    font-size: 12px;
    font-weight: 800;
}

.liste-stat-titre {
    border: 1px solid transparent;
    padding: 2px 4px;
    border-radius: 3px;
}
.liste-stat-caracter {
    border: 1px solid grey;
    padding: 2px 4px;
    border-radius: 3px;
}
.liste-stat-time {
    border: 1px solid grey;
    padding: 2px 4px;
    border-radius: 3px;
}
.liste-stat-voir {
    border: 1px solid grey;
    padding: 2px 4px;
    border-radius: 3px;
}

.total-cattag-liste {
    background: #eee;
    padding: 10px 20px;
    border-radius: 3px;
    margin: 10px;
    position: relative;
    display: block;
}


/* --------- page single.php (v25) --------- */


.post_cf_videos-container-v25 {
    margin: 0 auto;
    width: 100%;

    display: flex;
    position: relative;
    z-index: 0;
    max-width: 350px;
    flex-direction: column;
    align-items: center;

    padding: 30px 4px 0;
}

/* reste de cover est géré dans css style.css pour l'instant */