/*
Theme Name: JAIMMME V1 2025
Theme URI: https://www.quentinrenaux.com
Description: Custom WordPress Theme designed and developed by Quentin Renaux. 
             This theme is tailored to provide a fast, elegant, and customizable foundation for my portfolios websites.
             Includes custom features such as dynamic layouts, ACF support, WooCommerce integration, 
             and optimized SEO. Perfect for businesses, creatives, and developers.
Version: 25.1
Author: Quentin Renaux
Author URI: https://www.quentinrenaux.com
Text Domain: jaimmme-v1-2025
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-layout, responsive, seo-friendly, minimalist, e-commerce
*/







/* ---------- Reset CSS (v25) ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Supprime les styles par défaut des listes */
ul, ol {
    list-style: none;
}

/* Supprime les styles par défaut des liens */
a {
    text-decoration: none;
    color: inherit;
}

/* Supprime les bordures par défaut des images et iframes */
img, iframe {
    border: 0;
    max-width: 100%;
}

/* Fixe les dimensions des éléments */
html, body {
    /*min-height: 100%;*/
    width: 100%;
    font-family: sans-serif; /* Facultatif : pour une base typographique cohérente */
}

/* Empêche les débordements horizontaux */
body {
    overflow-x: hidden;
}

/* S'assure que tous les éléments prennent correctement la largeur disponible */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, table, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}



/* ------------- ------------- ------------- ------------- */


.windows {border: 2px solid grey;padding: 20px; margin: 20px}

    .stylebox {
     
      width:100%;  height:100%;
      font-size:16px;
      position:relative;
      top:0;
      left:0;
      margin:0;
      /*line-height:.7;*/
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    }

    .insideflex {
        border: 1px solid #000; 
        padding: 40px; 
        margin: 40px; 

        line-height: 1.2em;
    }

.video {}
.video-paysage {max-width: 600px}

@media (max-width: 700px) { 
    .video-paysage {width: 100%;}
}   



.unsite {padding: 50px; font-family: 'Varela Round', sans-serif; line-height: 1.5em; font-size: 28px; letter-spacing: 4px; text-align: center;
width: 600px; height: 400px}


.stylewindows {
	width: 100%; 
	margin: 0 auto; 

	justify-content: left; 
	background-color: #f9f9f9; 
	border: 4px solid blue;
}

    /* edit button */
.editfixed {font-size: 0.6em; padding: 6px;}
.editaddclass {font-size: 0.6em; padding: 11px;}

.editpagenew {font-size: 0.6em; padding: 6px; position: absolute; bottom:5px; left:5px}

/* PAGE NEW HOME */

/* fenetre */
.fenetre-enfant{   
    border: thin solid black; 
    background:#fff;
    /*box-shadow: 6px 6px 0px #aaa;*/
    box-shadow: 6px 6px 0px rgba(153, 153, 153, 0.67);
    }

.fenetre-regularspace{margin:50px 20px;}
.fenetre-topspace {margin:120px 20px 120px;}
.stylebox:nth-child(2n+1) .fenetre-topspace {margin:240px 20px 30px!important;}

.fenetre-top{   
    border-bottom: thin solid black;
    width:100%;
    height:18px;
    line-height:15px;   
  
    font-weight:900;
    font-size:24px;
    font-family: 'Montserrat';
    }   

.fenetre-in
    {padding:0}

/* LOOP STORIE VIDEO */
.fenetre-storievideo{
    margin:30px 5% 30px 10%; 
    width:300px; 
    z-index: 10; 
}

/* video responsive */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


.fenetre-vimeosize {
    margin:30px; 
    width: 100%; max-width: 640px; 
}

.storievid-seemore {
    padding: 20px; 
    font-family: 'Varela Round', sans-serif; 
    line-height: 1.5em; 
    font-size: 14px; 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    text-align: left; 
    max-width:40%; 
}
 
.fenetre-back {position:absolute; top:1%; left:20%; z-index: 9; opacity: 0.9; max-width: 300px}

.stylebox:nth-child(2n+1) .fenetre-back {left:auto; right:5%; top:1%; max-width: 1000px}

.storievid-seemore h3 {}

.storievid-seemore p {font-size:0.8em; line-height: 1.3em; letter-spacing: 3px; padding-top: 4px }

@media (max-width: 700px) { 
	.storievid-seemore {
        padding: 20px; 
        line-height: 1.5em; 
        font-size: 14px; 
        letter-spacing: 4px; 
        text-align: left; 
        max-width:100%; 
    }

    .fenetre-storievideo{
        margin:30px auto; 
        width:50%; 
        z-index: 10; 
    }
}	   







/* ____________________________________________________________ */

/* TESTS */
/* all always */
.a19-container {	margin: 10px auto; padding: 0 20px; max-width: 1200px;
	font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: 1.1px;
    font-family: "Helvetica Neue",Helvetica,sans-serif;}
.bloc-contentcover{border: 0px solid grey;}
.bloc-contentcover:nth-child(2n+1) {border: 0px solid #f9f9f9;}

/* always */
.bloc-contentcover .bloc-float-content{float: left; padding: 40px;}
.bloc-contentcover .bloc-float-thumbnail{float: right}

/* tous les deux bloc  (voir : css-tricks.com/how-nth-child-works) */
.bloc-contentcover:nth-child(2n+1) .bloc-float-content{float: right}
.bloc-contentcover:nth-child(2n+1) .bloc-float-thumbnail{float: left}





/* V2.2 */
 
/* full & background */   
.full-index {
    /*margin-top: 100vh; */
    /*margin-bottom: 100vh; */
    position: relative; 
    z-index: 1;
    background: #fff;
    
    /*border-top:2px solid #000;*/
    /*border-bottom:2px solid #000;*/
    padding-bottom: 40px;
    }    

.background-index {
    height: 100vh; 
    position: fixed; 
    z-index: 0;
    width: 100%;
    top: 0; left: 0;
    /*border: 10px solid #000;*/
    /*border-bottom:12px solid #000;*/
    
    font-size: 14px;
    font-family: 'Merriweather Sans', helvetica, sans-serif;
    font-weight: 300;
    color: #000;
    text-align: left;
    } 
 
.background-index a {
    text-decoration:none; color: #000; 
	
	-moz-transition: color 0.5s ease;
	-webkit-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	transition: color 0.5s ease;
}
.background-index a:hover {
    text-decoration:none; color:#fff;
    
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
	-o-transition: color 0.2s ease;
	transition: color 0.2s ease;
}



.background-index img:hover {    filter: invert(0);
    -webkit-filter: invert(0);
    -moz-filter: invert(0);
    -o-filter: invert(0);
    -ms-filter: invert(0);}

.avertaspecial {
    font-size: 1.5em;
    font-family: 'averta' , sans-serif;
    font-weight: 600;
    letter-spacing: 3px;
}

/* video */
.video-footer {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  }


    
/* bloc principal */    
.v2bloc-principal  {   
    width:100%; 
    font-size:16px;
 
    position:relative;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;    
    }
  
.v2bloc-groupe {
    width:100%; 
    font-size:16px;
     display: flex;
     flex-flow: row wrap;
    justify-content: center;
    max-width: 900px; margin: 0 auto;
    padding: 20px;
    }      
  
.v2bloc-groupe p {
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 40px 0 0 0;
    }
  
.v2bloc-cover {
    min-height: 90vh;  /* 90 ou 100 si pas le background video */
    width: 90%; 
    margin: 0 auto;    
    }

.v2bloc-storie{
    margin: 0 auto; /*justify-content: left;*/ background-color: #f9f9f9;
    padding: 40px 0;
    }
   
    
/* bloc secondaire */    
.v2bloc-gauche {
    padding: 20px; 
    font-family: 'Varela Round', sans-serif; 
    text-align: left;
    
    line-height: 1.5em; 
    font-size: 28px; 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    }    

.v2bloc-d-regular {
    padding: 20px;

    line-height: 1.4em;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    
    max-width: 40%;
    }    

.v2bloc-d-groupe {
    padding: 20px;
    margin:0px !important;
    width: 50%;
    }    
 
@media (max-width: 700px) { 
    .v2bloc-groupe {padding:10px;}
    .v2bloc-d-groupe{padding: 10px;}    
}	    
    
.v2bloc-gauche h1 {
    font-weight: 400;
        line-height: 1.5em; 
    font-size: 28px; 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    }    
    
.v2bloc-gauche h3 {
    font-weight: 400;
}    
    
.v2bloc-gauche p {
    font-size: 0.8em;
    line-height: 1.3em;
    letter-spacing: 3px;
    padding-top: 4px;
}
    
.v2bloc-droit{
    z-index: 10;
    margin:30px;
    }

.v2bloc-d-cover {
    margin:30px 30px 30px 10%; 
    max-width:440px; 
    }

.v2bloc-d-regular {
    max-width:600px;     
    }    
   
@media (max-width: 700px) { 
    .v2bloc-droit{margin:0;}
    .v2bloc-d-regular {padding: 8px;}
    .v2bloc-principal  {padding: 60px 10px}
    
}	
      
/* bloc windows */
.fenetre-top span {padding-left: 4px;}

/* bloc video/storie */
.pointer:hover {cursor: pointer;}


/* single */
.single-index {background-color:#eee; padding:50px}

@media (max-width: 700px) { 
    .single-index {    
    padding: 50px 20px;
    min-height: 100vh;}
 }	


/* FOOTER */

/* page et single */
.minifooter {padding: 10px; width: 100% }

.footerspace-first {
    margin: 20px;
}

/* footer style hom */

.footerspace-name {
    color:#fff; bottom:10px; margin:0 auto; 
    width:320px; 
    text-align: center; 
    
    font-size: 1.6em;
    letter-spacing: 10px;
}

.footerspace-name a {
    text-decoration:none; color: #fff; 
	
	-moz-transition: color 0.5s ease;
	-webkit-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	transition: color 0.5s ease;
}
.footerspace-name a:hover {
    text-decoration:none; color:#000;
    
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
	-o-transition: color 0.2s ease;
	transition: color 0.2s ease;
}

.footerspace-youtube{
    position:absolute; 
    right:30%; 
    top:5%; 
    width:100px; 
    text-align:center; 
    font-size:1em;
}

.footerspace-last{
    position:absolute; 
    left:4%; 
    bottom:13%; 
    width:240px; 
    text-align:left; 
    font-size:0.8em;
}

@media (max-width: 700px) { 
    .footerspace-first {
        margin: 120px 20px 20px; 
        text-align: center;
    }
    .footerspace-name {
        margin: 80px auto 0; 
        font-size: 1.6em;
    }      
    .footerspace-youtube {
        right:0; 
        top:5%;  
    }
    .footerspace-last {
        position:absolute; 
        left:0; 
        width:100%; 
        text-align:center; 
    }
}   



/* Zoom In #1 */
.hover01 figure  {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover {
	-webkit-transform: scale(1.01);
	transform: scale(1.01);
}


/* ------------------------------ v3 ----------------------------- */
/* ------------------------------ 2022 ----------------------------- */

/* --------------- edit --------------- */
.v3-editfixed {
    display: block;
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 10;
}

/* --------------- invert color texte --------------- */
.invert-color-text {
    mix-blend-mode: difference;
    filter: invert(1);
}

/* --------------------- titre & smile ------------------------ */
#titre-qr-home {
    position: fixed;
    top: 10px;
    left: 10px;
    display: flex;
    z-index: 101;
    padding: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    pointer-events: none;
}    
    
/* head */
#titre-qr-home .headsmileycool {
    width: 50px;
    display: block;
    pointer-events: all;
}
    
.headsmileycool img {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    }

.headsmileycool img:hover {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    transform: rotate(540deg);
    } 

/* name titre */
#titre-qr-home h2 {
    font-size: 60px;
    font-family: arial, helvetica;
    display: inline-block;
    line-height: 50px;
    padding: 0 10px;
    margin-top: -7px;

    pointer-events: all;
}        

/* --welcome -- */
.welcome-accueil_menu {
    position: fixed;
    z-index: 10;
    top: 90px;
    right: 10px;
}

.welcome-accueil_menu ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: flex-end;
}

.welcome-accueil_menu a {
    border: 2px solid black;
    padding: 10px 20px 10px 20px;
    border-radius: 30px;
    position: relative;
    font-weight: 600;
    z-index: 200;
    cursor: pointer;
    margin: 4px 10px;
    display: block;
}

.welcome-accueil_menu a:hover {
    text-decoration: none;
}

.welcome-accueil_menu a::before {
    content: "/";
    position: absolute;
    right: -60px;
	transition: all 0.5s ease;
}

.welcome-accueil_menu a:hover::before {
    content: "/";
    position: absolute;
    right: 10px;
	transition: all 0.2s ease;
}

/* fleche to home */
.flechetohome {
    position: fixed;
    bottom: 0px;
    right: 20px;
    font-size: 60px;
    font-family: helvetica;
    z-index: 99;
}

.flechetohome a {
    text-decoration: none;
    color: #ddd;
    transition: 0.70s ease-in-out;
}
 .flechetohome a:hover {
    text-decoration: none;
    color: #000;
    transition: 0.70s ease-in-out;
}   

/* cube display */
.cube-container {
    display: block;
}

@media (max-width: 800px) {
    #titre-qr-home h2 {


        font-size: 25px;

        padding: 4px 0px 0 6px;

        /* margin: 15px 50% 0 0; */
        /*border: 1px solid red;*/
    }

    #titre-qr-home {
        padding: 0px;
    }

    #titre-qr-home .headsmileycool {
        width: 42px;
        display: block;
        pointer-events: all;
    }
}    

/* -----------------   ALL  ------------------ */
/* ----------------   home  ------------------ */
/* --------------- this is all --------------- */
/* --------- p-v24-thisiseverything ---------- */

/* nouveau tia_container = av25_container depuis le 28/12/24 */

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

    background-color: transparent;

    pointer-events: none;
    z-index: 10;
  }
  
.tia_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;
  }

.tia_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;
}

  .tia_item-titre {
    padding: 11px 4px 4px;

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

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

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

.tia_item-thumbnail {
    width: 100%;
}

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

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

.hide_sur_mobile-coche {
    position:relative;
}

@media (max-width: 800px) { 
    .tia_container {
        margin: -100px auto;
        width: 100%;
      }
      
    .tia_wrapper {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        /* grid-gap: 5px; */
        width: 100%;
        padding: 0px 20px 30px 0px;
      }

      .hide_sur_mobile-coche {
        display:none;
    }
}  








/* --------------- tags --------------- */

.container-tag {
    padding: 10%;
}

.max-width-storie {
    max-width: 400px;
}

.tags_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    width: 100%;
  }

@media (max-width: 800px) {       
    .tags_wrapper {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        width: 100%;
      }
}  




/* --------------- v3.2 (1er aout 2022) --------------- */
/* --------------- root --------------- */
:root {
    --body_background: #fff;
    --post_background: #eee;

    --header_height: 60px;
    --header_icon-logo: 50px;
    --header_icon-petit: 30px;
  }
@media (max-width: 800px) {       
    :root {
        --header_height: 60px;
        --header_icon-logo: 40px;
        --header_icon-petit: 30px;
    }
}    
/* --------------- body --------------- */
body {
    background-color: var(--body_background);
}
/* --------------- principal --------------- */
/* --------------- header --------------- */
.header-v3_container {
    position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    height: var(--header_height);
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;

    mix-blend-mode:exclusion;
    color: dark;
    filter: invert(1);
}
.header-v3_container img {
    max-height: 100%;
}  
    /* --------------- logo --------------- */
    .menu-v3_logo {
        position: relative;
        display: flex;
        width: var(--header_icon-logo);
    }      
    .menu-v3_titre {
        position: relative;
        display: flex;
        margin-right: auto;
        width: 100%;
        padding: 31px 0 0 75px;
        font-weight: 600;
        /* border: 2px solid black; */
        pointer-events: none;
    }   
    .menu-v3_titre::before {
        content: "/";
        padding: 0px 1px;
        font-size: 30px;
        /* height: 100%; */
        display: flex;
        align-items: center;
        align-content: center;
    }    
    #overflow {
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        width: 100%;
        padding: 3px 0 0 4px;
      }
    
    .menu-v3_right {
        position: relative; 
        display: flex;       
        width: var(--header_icon-logo);
    }    
    .menu-v3_little {   
        width: var(--header_icon-petit);
    }   
    
.menu-v3_logo-head img {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    }

.menu-v3_logo-head img:hover {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    transform: rotate(540deg);
    }  



/* --------------- container --------------- */
.principal-v3_container  {
    width: 100%;
    min-height: 90vh;
    padding: var(--menu_height) 0 0;
    background-color: var(--post_background);
    z-index: 1;
    position: relative;
    display: block;

    overflow: hidden;
    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;
  }

/* --------------- post --------------- */
/* --------------- before--------------- */
.principal-v3_before-type  {
    display: block;
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 10%;
    border: 1px solid black; 
    padding: 5px; 
    background-color: #fff;
    pointer-events: none;

    opacity: 0.1;
  }
/* --------------- cover --------------- */
.principal-v3_cover  {
    width: 100%;
    /*margin-top: calc(var(--header_height) * -1);*/
    position: relative;
    z-index: 0;
}

  .principal-v3_cover img  {
    object-fit: cover;
    width: 100%;
    height: 60vh;
}
  


.v3_cover-full img  {
    height: auto;

    height: auto;
    max-height: 100vh;
    width: auto;
}

.v3_cover-full {
    background-image: url(https://quentinrenaux.com/wp-content/uploads/2022/07/psd-background-quentin-renaux-copie.jpg);
    background-position: center center;
    background-size: 120px;
    background-repeat: repeat;
}

.page-v3_cover {
    position: relative;
    max-height: 60vh;
    height: 100vh;
    /* border: 10px solid #000; */
    display: flex;
    background-size: cover;
    justify-content: center;

    background-position: center center;
    background-size: auto 100%;
    background-repeat: repeat;
}

/* mise a jour de page-v3_cover en janvier 2025 */
.page-v25_cover {
    position: relative;
    max-height: 60vh;
    height: 100vh;
    /* border: 10px solid #000; */
    display: flex;
    justify-content: center;

    background-image: attr(data-bg url); /* new */
    background-size: cover;

    background-position: center center;
    background-size: auto 100%;
    background-repeat: repeat; 
}

@media (max-width: 800px) {       
    
}   

/* --------------- post content --------------- */
.post_content {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- content links --- */
.post_content a {
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.post_content a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to left, #333, #666 50%, red 50%, orange, yellow, green, blue, indigo, violet);

  background-size: 200% auto;
  background-position: 100% 0;
  transition: background-position 0.3s ease-in-out;
}

.post_content a:hover {
  font-size: 1.2em;
  transition: all 0.3s ease-in-out;
  text-decoration: #666;
}

.post_content a:hover::before {
  background-position: 0 0;
}



/* --- content titles --- */
.post_content h2 {
    padding: 30px 0px 15px;
    border-top: 10px solid #fff;
}

/* --- wp-content balises edit --- */
/*
.wp-block-image .aligncenter {
    margin-left: -40px!important;
    margin-right: auto;
    width: calc(100% + 80px);
}*/


/* --- wp-block-quote ---- 
   ajouté le 2 mars 2023 ------- */
.content-text .wp-block-quote {
    overflow-wrap: break-word;
    font-size: 1.4em;
    line-height: 1.2em;
    /* text-align: justify; */
    /* letter-spacing: -1px; */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 20px;
    background: #fefefec9;
    margin: 20px 10px;
}

.content-text .wp-block-quote strong {
    font-size: 1.2em;
}


/* --------------- carbon field videos --------------- */
.post-v3_container-desvideos {
    width: 100%;
    padding: 60px 10px;
    margin: 0px 0px 0px;
    display: flex;
    position: relative;
    z-index: 0;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
  .post_cf_videos-container {
    width: 100%;
    padding: 4px;
    display: flex;
    position: relative;
    z-index: 0;
    max-width: 350px;
    flex-direction: column;
    align-items: center;
  }

  .post_cf_videos-container h3 {
    padding: 10px;
    font-size: 20px;
    width: 90%;
}
.post-v3_container-desvideos .small {
    max-width: 240px;
    width: 40%;
}

@media (max-width: 800px) {       
    .post-v3_container-desvideos {
        padding: 10px 10px;
    }
}   

/* --------------- player_ video v3 (juillet 2022) --------------- */
.player_video_wrapper {
    padding: 0;
    margin: 0;
    position: relative;
    /* border: 3px solid black; */
    border-radius: 14px;
    display: block;
    overflow: hidden;
    background: url(https://steamuserimages-a.akamaihd.net/ugc/400086242642081746/F4586E52EC8F72B1C6B3506480D5D992C7D9D61B/) center center;
    background-size: 100%;
    box-shadow: rgb(146 146 222 / 69%) 0px 7px 29px 0px;
    cursor: pointer;
    }

.player_playpause {
    background-repeat: no-repeat;
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 38px;
    font-weight: 700;
  
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

    mix-blend-mode:exclusion;
    color: dark;
    filter: invert(1);
  }
  
  .player_playpause::before {
    content:"play ▶︎▷";
  
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }



.v3-videos_grid {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    width: 100%;

    font-size: 1.1em;
    max-width: 1000px;
    margin: 20px auto;
}

.v3-videos_item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    text-align: center;
    position: relative;
    padding: 10px;
}

.v3-videos_item-titre {
    position: absolute;
    bottom: 10px;
    /* left: 23px; */
    /* right: 54px; */
    z-index: 1;
    /* text-align: left; */
    font-size: 0.7em;
    font-weight: 500;
}

.v3-videos_item-titre a {
    padding: 8px 8px 8px 11px;
    text-align: left;
    position: relative;
    border-radius: 10px;
}

.v3-videos_item-titre a::before {
    content: "";
    display: block;
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='700pt' height='700pt' version='1.1' viewBox='0 0 700 700' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m591.85 217.35c-3.3047-4.6406-8.6562-7.3828-14.352-7.3516h-17.5v-52.5c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125h-183.75l-47.25-63c-3.3047-4.4062-8.4922-7-14-7h-175c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v385c-0.015625 3.7891 1.082 7.5 3.1484 10.676 3.418 4.4414 8.75 6.9766 14.352 6.8242h367.5c3.5977 0 7.1055-1.1094 10.047-3.1797 2.9453-2.0664 5.1797-4.9883 6.4023-8.3711l87.5-245c1.9844-5.3867 1.1992-11.402-2.0977-16.098zm-451.85-112.35h148.75l47.25 63c3.3047 4.4062 8.4922 7 14 7h175v35h-315c-3.5977 0-7.1055 1.1094-10.047 3.1797-2.9453 2.0664-5.1797 4.9883-6.4023 8.3711l-53.551 149.97zm337.57 350h-330.22l75.074-210h330.22z'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -11px;
    top: 6px;
}

@media (max-width: 800px) {       
    .v3-videos_grid {
        grid-template-columns: repeat(2, 50%);    
        /*background-image: linear-gradient(90deg, 
        #222222 0.90%, 
        #222 0.90%, 
        #EEEEEE 50%, 
        #EEEEEE 50%, 
        #EEEEEE 50.90%, 
        #EEEEEE 50.90%, 
        #EEEEEE 100%);
        background-size: 50%;*/
    }
}  

/* ------ if video ------- */
.v3_if-video {
    border: 1px solid red;
}

/* ------ page video : random post ------- */
.p3-videos-randompost {
    margin: 100px 20px 20px 20px;
    max-width: 400px;
    border: 3px solid #444;
    background: #444;
    color: #ddd;
}



/* page /video (5/3/23) */
.page-video-display-information {
    margin: 0 10px;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
}

.page-video-display-information p {
    border-left: 1px solid black;
    padding: 5px;
    margin: 2px 2px;
}




/* ------ previous post ------- */
.previous-post-deputy {     
    position: relative;
    margin-top:-60px;
    padding: 0 60px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}  

.enfant-deputy{
    pointer-events: all;
} 

.tel {display:none}  
.ordi {display:block}        

@media only screen and (max-width: 640px){
.previous-post-deputy {     
    margin-top:0px;
    padding: 00px 00px 0 40px;  
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}  
.enfant-deputy {width: 100%}     
.tel {display:block}  
.ordi {display:none}
}    








/* ------ post footer ------- */
.post_after-content {
    border: 2px solid green;
}

/* ------ footer line ------- */
.footer-v3-line  {
    width: 100%;
    min-height: 100px;
    padding: 20px;
    background: #111;
    color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-v3-line p {
    padding: 3px;
}
.footer-v3-line a {
    color: #eee;
}
.footer-v3-line a:hover {
    color: #444;
}

@media (max-width: 800px) {       
    .footer-v3-line  {
        flex-direction: column;
    }
}  

.v3_footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    width: 100%;
    background-color: #e1e1e1; 
    padding: 10px 10px 10px;

    font-size: 0.8em;
}

.v3_footer-grid-item {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

@media (max-width: 800px) {       
    .v3_footer-grid {
        grid-template-columns: repeat(2, 50%);
    }

    .v3_footer-grid .tia_item-titre h3 {
        font-size: 16px;
        /*border: 1px solid red;*/
    }
}  

/* -------- single: tag list -------- */
.v3-tag_list {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.v3-tag_list * {margin: 10px;}

.v3-tag_list a {
    display: block;
    border: 2px solid black;
    border-radius: 20px;
    padding: 10px;
    font-weight: 600;
    position: relative;
}

/* -------- page: archive -------- */
.pagev3_archive {
    background: #ddd;
    padding: 10px;
    display: block;
    position: relative;
}

.pagev3_archive h2 {
    display: block;
    position: relative;
    padding: 4px;
}

.pagev3_archive li {
    display: flex;
    justify-content: space-between;
    background: #f2f2f2;
    margin: 2px;
    padding: 0px;
}

.pagev3_archive li p {
    padding: 4px;
}

.pagev3_archive li p:first-child {
    margin-right: auto;
}



/* avant footer */
.avant-footer {
    display: flex;
    flex-direction: column;
    /*padding: 20px 0px;*/
    background: #202020;
    z-index: 1;
    position: relative;
}

.avant-footer a{
    display: block;
    padding: 10px;
    background: #202020;
    color: #f5f5f5;
    font-size: 30px;
    font-weight: 600;

    -moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}

.avant-footer a:hover{
    background: #f5f5f5;
    color: #202020;
    padding: 10px 10px 10px 30px;

    -moz-transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}



/* --------------------- from home style part ------------------------ */
/* --------------------- body & default ------------------------ */
body {font-size: 14px;
    font-family: 'arial';
    font-weight: 300;
    color: #111;
	background-color: #fff;
		
     -webkit-font-smoothing: antialiased; /* smooth typo */
}	

* {
	margin : 0;
	padding : 0;
	}

img,iframe {
	vertical-align: bottom;
	max-width: 100%!important;
	} 
	
img{height: auto;}
	
a img p {border:0;}	

a {	text-decoration:none; color:#000;
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
	-o-transition: color 0.2s ease;
	transition: color 0.2s ease;
	}

a:hover {color:#231F20; text-decoration:underline;}

li {list-style-type:none;}  	

div{box-sizing: border-box; 
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */}
textarea{box-sizing: border-box; 
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */}



/* ------------ section home cover ------------- */
.home-cover {
  height: 100vh;
  height: 80vh;
  width: 100%;
  position: relative;
  background-color: #f2faf3;
  background: #222;
}
  
  .home-cover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; 
    /* Ajuster la hauteur selon l’effet désiré */
    height: 150px; 
    
    /* Dégradé : du transparent (en haut) vers le blanc (en bas) */
    background: linear-gradient(to bottom, 
                                rgba(255, 255, 255, 0) 0%, 
                                rgba(255, 255, 255, 1) 100%);
    pointer-events: none; /* Permet de cliquer à travers le pseudo-élément */
    z-index: 2; /* S’assurer qu’il recouvre le contenu, si besoin */
  }


.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;
}
   
@media (max-width: 800px) {
    .cube-container {
        display: none;
    }
}   

/* --------- reload ------- */
.unsplash-reload {
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0;
  left: 0; 
}
.unsplashbg {
  background-image: url(https://quentinrenaux.com/wp-content/uploads/2023/06/000212300003.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

#reload-button  {
    cursor: pointer;
}

.unsplashbutton2 {
    border: 2px solid black;
    padding: 10px 40px 10px 20px;
    border-radius: 30px;
    position: absolute;
    right: 20px;
    top: 20px;
    font-weight: 600;
    z-index: 50;
    cursor: pointer;
}

.unsplashbutton2 svg {
    width: 20px;
    position: absolute;
    top: 8px;
    right: 11px;
    transform: rotate(300deg);
    transition: transform 0.3s ease;
}

.unsplashbutton2:hover svg {
    transform: rotate(340deg);
  }
  
.unsplashbutton2:active svg {
    transform: rotate(380deg);
  }






/* ------ footer home button -------- */
.everything-phrase {
    position: relative;
    /* border: 4px solid black; */
    background: #222;
    font-size: 22px;
    padding: 26px 90px 24px 20px;
    text-align: right;
    font-weight: 600;
}

.everything-phrase a {
    color: #ddd;
}

.everything-phrase a:hover {
    color: #fff;
}




/* ---------------------- single-radio ---------------------- */

.radio-single-nav {
    position: relative;
}

.radio-single-nav .nav-previous {
    border: 1px solid black;
    position: fixed;
    bottom: 10px;
    right: 10px;

    z-index: 1001;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
}

.radio-single-nav .nav-next {
    border: 1px solid black;
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1001;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
}





/* ---------------------- v24 ----------------------- */
/* cette version va reunir les nouveaux codes pour debut 2024 
 * commencé: 13/11/23 
 * ensuite: elle doit ensuite permettre de nettoryer l'ancien css 
 * et de ne plus avoir ou le minimum vital de css dans le header du site 
 */

/* ----- newmenu_v24 ----- */
/* work with: 
 * 1. include: menu_v24 
 * 2. javascript: footer menu_v24 
 * 3. menu-backend-menu-container est le titre du menu dans wp
 */

 :root {
    --menuslide-link-color: #000;
    --menuslide-link-hover-color: #ddd;

    --menuslide-main-bg-color: #f9f9f9;
    --menuslide-hover-bg-color: #f9f9f9;
    --menuslide-submenu-bg-color: #f9f9f9;
    --menuslide-retourbackground: #f9f9f9;
}

/* menu: burger */
#menuToggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 101;
    cursor: pointer;
}

#menuToggle span {
    font-size: 60px;
    font-family: arial, helvetica;
    display: inline-block;
    line-height: 50px;
    padding: 13px 10px;
    margin-top: -7px;
    pointer-events: all;
    font-weight: bold;
    /*border: 1px solid red;*/
}

/* menu_v24 mobile */
@media screen and (max-width: 768px) {
    #menuToggle span {
        font-size: 25px;
        padding: 1px 10px;
        margin-top: -7px;
        /*border: 1px solid red;*/
    }
}

/* Styles de base */
.menu-backend-menu-container {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    width: 260px;
    height: 100%;
    background-color: var(--menuslide-main-bg-color);
    transition: transform 0.5s ease;
    z-index: 100;
    overflow-y: auto;
    overflow-x:hidden;

    padding: 100px 0px 0px;


    font-size: 20px;
    line-height: 20px;
    font-family: arial, helvetica;
    display: inline-block;
    
    pointer-events: all;
    font-weight: bold;
}

.menu-backend-menu-container li, .menu-backend-menu-container ul {
    list-style-type: none;
}

.menu-backend-menu-container .menu {
    list-style: none;
    padding: 10px 0;
    position: relative; 
}

.menu-backend-menu-container .menu a {
    text-decoration: none;
    color: var(--menuslide-link-color);
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-backend-menu-container .menu a:hover {
    text-decoration: none;
    color: var(--menuslide-link-hover-color);
    background-color: var(--menuslide-hover-bg-color);
}

.menu-backend-menu-container .menu-item {
    padding: 12px 10px;
    background: var(--menuslide-menu-item-bg);
    text-align: center;
}

/* Styles pour les sous-menus */
.menu-backend-menu-container .sub-menu {
    position: absolute;
    top: 0;
    left: 0%;
    width: 250px;
    height: 100%;
    background-color: var(--menuslide-submenu-bg-color);
    transform: translateX(100%);
    transition: transform 0.5s ease;
    z-index: 2;
}

.menu-backend-menu-container .sub-menu .sub-menu {
    top: 0;
    left: 0%;
    z-index: 3;
}

.menu-backend-menu-container .menu-item-has-children > a:after {
    content: " >";
    padding-left: 5px;
}

.menu-backend-menu-container .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 15px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'><path fill='black' d='M31.3,97.5c-2.6,0-5.1-1-7.1-2.9c-3.9-3.9-3.9-10.3,0-14.2L54.5,50L24.2,19.6c-3.9-3.9-3.9-10.3,0-14.2c3.9-3.9,10.3-3.9,14.2,0l37.5,37.5c1.9,1.9,2.9,4.4,2.9,7.1s-1.1,5.2-2.9,7.1L38.4,94.6C36.4,96.5,33.8,97.5,31.3,97.5z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 2px 3px;
}

/* couleur dans le code svg */
.menu-backend-menu-container .menu-item-has-children > a:hover::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'><path fill='%23ddd' d='M31.3,97.5c-2.6,0-5.1-1-7.1-2.9c-3.9-3.9-3.9-10.3,0-14.2L54.5,50L24.2,19.6c-3.9-3.9-3.9-10.3,0-14.2c3.9-3.9,10.3-3.9,14.2,0l37.5,37.5c1.9,1.9,2.9,4.4,2.9,7.1s-1.1,5.2-2.9,7.1L38.4,94.6C36.4,96.5,33.8,97.5,31.3,97.5z'/></svg>");
}

/* Style pour le bouton de retour dans les sous-menus */
.menu-backend-menu-container .submenu-back-button {
    display: block;
    padding: 12px 10px; /* Ajusté pour correspondre au style .menu-item */
    background: transparent; /* Ou toute autre couleur de fond souhaitée */
    color: var(--menuslide-link-color); /* Couleur du texte identique aux liens */
    text-align: center;
    width: 100%;
    cursor: pointer;
    border: none; /* Supprimer la bordure pour correspondre aux autres liens */
    font-family: 'Alata', sans-serif; /* Même police que les autres éléments */
    font-size: 14px; /* Même taille de police que le corps */
    text-decoration: none; /* Pour éviter tout soulignement */
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-backend-menu-container .submenu-back-button::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 15px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='black' d='M68.7,2.5c2.6,0,5.1,1,7.1,2.9c3.9,3.9,3.9,10.3,0,14.2L45.5,50l30.4,30.4c3.9,3.9,3.9,10.3,0,14.2c-3.9,3.9-10.3,3.9-14.2,0L24.2,57.1c-1.9-1.9-2.9-4.4-2.9-7.1s1.1-5.2,2.9-7.1L61.6,5.4C63.6,3.5,66.2,2.5,68.7,2.5z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-position: -2px 2px;
}


.menu-backend-menu-container .submenu-back-button:hover {
    color: var(--menuslide-link-hover-color); /* Couleur au survol */
    background-color: var(--menuslide-hover-bg-color); /* Fond au survol */
    text-decoration: none; /* Pour éviter tout soulignement au survol */
}

.menu-backend-menu-container .submenu-back-button:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='%23ddd' d='M68.7,2.5c2.6,0,5.1,1,7.1,2.9c3.9,3.9,3.9,10.3,0,14.2L45.5,50l30.4,30.4c3.9,3.9,3.9,10.3,0,14.2c-3.9,3.9-10.3,3.9-14.2,0L24.2,57.1c-1.9-1.9-2.9-4.4-2.9-7.1s1.1-5.2,2.9-7.1L61.6,5.4C63.6,3.5,66.2,2.5,68.7,2.5z'/></svg>");
}

/* menu_v24 mobile */
@media screen and (max-width: 768px) {
    .menu-backend-menu-container {
        width: 100%; /* Fait en sorte que le menu prenne toute la largeur de l'écran */
        transform: translateX(100%); 
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }

    .menu-backend-menu-container .sub-menu {
        width: 100%; /* Sous-menus prennent également toute la largeur */
    }
}




/* ------------ nav new menu et titre ------------ */
.navnew_titre {
    width: 100%;
    padding: 24px 0 10px 70px;
    position: fixed;
    z-index: 1000;
    pointer-events: none;
}

.navnew_titre h2 {
    font-size: 60px;
    font-family: arial, helvetica;
    display: inline-block;
    line-height: 50px;
    padding: 0 10px;
    margin-top: -7px;
    pointer-events: all;
}



/* footer accueil */
/* à propos - about */

.a-propos-2024 {
    font-size: 15px;
    padding: 20px;
    margin: 0 auto;
    position: relative;
    font-size: 18px;
    line-height: 1.1;
    background: #222;
    color: #888;

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

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

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




/* ----------- new style 2025 jaimmme --------- */

/* bloc cover accueil */
.home-cover-v25-jaimmme {
  height: 80vh;
  width: 100%;
  position: relative;
  background: #222;
  overflow: hidden; /* si l'image dépasse */
}

.home-cover-v25-jaimmme .entry-thumbnail {
  height: 100%;
  width: 100%;
  margin: 0;
  position: relative; 
}

.home-cover-v25-jaimmme .featured-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* crop */
  object-position: center;  /* ajuster si besoin */
}

/* Calque overlay couvrant le bas, avec gradient pour la lisibilité */
.home-cover-v25-jaimmme .thumb-overlay {
  position: absolute;
  inset: auto 0 0 0; /* left:0; right:0; bottom:0 */
  pointer-events: none;     /* laisse l’image cliquer si besoin */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%);
}

/* Bloc de contenu en bas à gauche */
.home-cover-v25-jaimmme .overlay-inner {
  position: relative;
  display: inline-block;
  max-width: min(90ch, 70%);
  padding: 16px 20px;
  color: #fff;
  pointer-events: auto;     /* réactive les clics sur les liens */
  transform: translateY(0); /* hook pour animations si besoin */
}

/* Extrait */
.home-cover-v25-jaimmme .overlay-excerpt {
  margin: 0;
  font-size: clamp(.9rem, 1.6vw, 1rem);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}

/* Lisibilité sur mobiles: renforcer le gradient et le padding */
@media (max-width: 640px) {
  .home-cover-v25-jaimmme .thumb-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.85) 100%);
  }
  .home-cover-v25-jaimmme .overlay-inner {
    max-width: 92%;
    padding: 14px 16px;
  }
}


/* serie liés */
.series-lies-iuy {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1000px;

    border: 1px solid black;
    padding: 20px;
}