/* ============================================================
   QR BASE : le CSS qui était écrit en dur dans header-v25.php
   Revue design sept. 2026
   ------------------------------------------------------------
   15 Ko de CSS vivaient dans le <head> de chaque page : jamais
   mis en cache par le navigateur, et chargés APRÈS toutes les
   feuilles de style, donc ils écrasaient tout sans qu'on le voie.

   Le contenu n'a pas été modifié, uniquement déplacé. Il est
   toujours chargé en dernier, donc le rendu est identique.
   À nettoyer progressivement : ce fichier fait doublon avec
   style.css sur beaucoup de règles.
   ============================================================ */

/* ---------------------------------------------------------------------------- */   
/* ---------------------------        Basic        ---------------------------- */ 
    * {
	   margin : 0;
	   padding : 0;
	}

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

/* ----------------------------------------------------------- This is Body --- */
    body {
        font-family: 'arial';
        font-family: 'Montserrat', sans-serif; 
        -webkit-font-smoothing: antialiased; /* smooth typo */
        font-weight: 400; 
        font-size: 14px;
        color: #111;
        background-color: #fff;
    }	

    a {	
        color:#000;
        text-decoration:none; 
	   -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;
    }
    
    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 */
    }

/* ------------------------------------------------ Fuck Internet explorer --- */
/* -------------------------- And tell them to download newest web browser --- */    
    .ie {
	   color: #727272;
	   background-color: #FAFAFA;
	   margin:20px auto 10px auto;
	   width:60%;
	   padding:10px 10px 10px 10px;
	   border: 1px dotted #727272;
	   font-weight:100;
	   font-family: helvetica, sans-serif;
	}

/* ---------------------------------------------------------------- General --- */  
    h1 {font-weight: 500;}
    
    
/* ---------------------------------------------------------------------------- */   
/* ---------------------------    Titre & Smile    ---------------------------- */   
/* ------------------------------------------------------ Position Top Left --- */
    #titre-corner-top-left {
        position: fixed;
        top: 10px; 
        left: 10px;
        z-index: 100; /* z-index 100 */
        display: inline-block;
    }
    
/* ------------------------------------------------------------- The Smiley --- */    
    .smiley-construct {
        width: 64px;
        padding: 0;
        display: inline-block;
    }
    
    .smiley-construct img {
        transition: 0.70s ease-in-out;
        -webkit-transition: 0.70s;
        -moz-transition: 0.70s;
        -ms-transition: 0.70s;
        -o-transition: 0.70s;
    }

    .smiley-construct img:hover {
        transition: 0.70s ease-in-out;
        -webkit-transition: 0.70s;
        -moz-transition: 0.70s;
        -ms-transition: 0.70s;
        -o-transition: 0.70s;
        transform: rotate(540deg);        
        -webkit-transform: rotate(540deg);
        -moz-transform: rotate(540deg);
        -o-transform: rotate(540deg);
        -ms-transform: rotate(540deg);
    }      
    
    .smiley-bg-blanc {
        background: #fff;
        border-radius: 50%;
        box-shadow: 0px 1px 54px -8px rgba(0,0,0,0.49);
    }       
    
    
/* --------------------------------------------------- Position Haut Droite --- */    
    /* --- Insta --- */  
    .insta-incorner {
        position: fixed; 
        top: 30px; 
        right: 20px;
        display: inline-block;
        z-index: 90; /* z-index 90 */
    }
    
    @media (max-width: 700px) {
        #titre-qr-home {
            top: 10px; 
        }          
        .insta-incorner {
            top: 20px; 
            right: 20px; 
        }    
        #titre-qr-home p {
            width:40px;
        }
	}	
    
/* ---------------------------------------------------- Position Bas Gauche --- */  
    /* --- Radio --- */      
    #titre-corner-bottom-left {
        position: fixed;
        bottom: 10px; 
        left: 10px;
        z-index: 100; /* z-index 100 */
    }    
        
    .corner-bottom-left-bg-blanc {
        background: #fff;
        border-radius: 6px;
    }
    
    .radio-construct {
        height:60px;
        padding: 0;
        padding: 3px;
        display: flex;
        flex-direction:column; 
        flex:1;
    }
    /* img style="margin-top: auto;" */
    
    /* ---------- / End Corners ---------- */     
    
    
/* ---------------------------------------------------------------------------- */   
/* ----------------------------      Sections      ---------------------------- */     
/* ---------------------------------------------------- First Block : Cover --- */     
    .firstcover-v1 {
        min-height: 100vh; 
        width: 90%; 
        margin: 0 auto;
    }    
    
	@media (max-width: 700px) {
        .firstcover-v1 {
            width: 100%; 
        }    
	}	    
    
/* -------------------------------------------------- This is still utile ? --- */     
    /* header v1.6 */
    /* page d'accueil */
    .home-marginprofilpic-v2 {
        margin:30px 30px 30px 10%; 
        max-width:440px; 
        z-index: 10;
    }
    
    .default-box-v1-6 {
        width: 100%; 
        margin: 30px auto;
    }
    
    .default-box-title-v1-6 {
        padding: 20px; 
        font-family: 'Varela Round', sans-serif; 
        line-height: 1.5em; 
        font-size: 14px; 
        letter-spacing: 4px; 
        text-transform: uppercase; 
        text-align: left;
    }

	@media (max-width: 700px) {
        .default-box-title-v1-6 {
            padding: 20px 5px;
        } 
        .home-marginprofilpic-v2 {
        margin:24px; 
        }
	}	     
    
/* ----------------------------------------------------------- This is Home --- */     
/* ----------------------------------------------------- Hover : Telephone  --- */    
    
    .absolutequentin {position:absolute;top:0;left: 0;width: 100%; opacity: 0;
        transition: 0.10s ease-in-out;
    -webkit-transition: 0.10s;
    }
    
    .noabsolutequentin:hover .absolutequentin {position:absolute;top:0;left: 0; opacity: 1;
        transition: 0.10s ease-in-out;
    -webkit-transition: 0.10s;
        
        cursor: url("https://quentinrenaux.com/wp-content/uploads/2020/12/tel.png"), auto;
    }
    
   
/* ----------------------------------------------------------- Single Page  --- */  
    
    .bloc-single-v2 {
        margin:20px auto; 
        padding:20px 20px 0;
        border: 0px solid green;
        
        overflow: hidden;
        
        word-break: break-word;
        
        /*white-space: nowrap;*/ 
        /*text-overflow: ellipsis;*/
        /*text-overflow: ellipsis;*/
        /* hyphens: auto; */
    }   
    .bloc-single-v2 p{
        /*border: 1px solid red;*/
        padding: 5px 0;
    }        

    
    /* category page */
    .category-titre-v2 {
        margin: 40px 30px 30px 100px;
    }
    
    
/* -------------------- experiment : video button sound on/off ---------------- */

/* checkbox hide */
#volume-switcher {
  display: none; 
}

/* volume on : container */
#switcher-container {
  display:block;
  position: absolute;
  top:0; left:0; bottom:0; right:0;  
  cursor: pointer;
  opacity: 0.8;
  filter: invert(1); /* changer couleur icon */
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in 0s;
}

/* volume on : button */ 
#switcher-container:after {
  content: "";
  border: 0px solid black;
  background: url(<?php bloginfo( 'stylesheet_directory' ); ?>/img/icons/sound-off.svg) center center;
  background-size: 100%;
  bottom: 10px;
  right: 10px;
  position: absolute;
  width: 40px;
  height: 40px;
}

#switcher-container:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in 0s;}

/* volume off : container */
#volume-switcher:checked + #switcher-container {
  background-color: rgba(255, 255, 255, 0);
  opacity: 0.1;
  -webkit-transition: all 0.7s ease-in 1s;
  -moz-transition: all 0.7s ease-in 1s;
  transition: all 0.7s ease-out 1s;   
}

/* volume off : hover */
#volume-switcher:checked + 
#switcher-container:hover {
  opacity: 0.8;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: opacity 0.3s ease-out 0s;}

/* volume off : button */
#volume-switcher:checked + #switcher-container:after {
  right: 10px;
  content: "";
  background: url(<?php bloginfo( 'stylesheet_directory' ); ?>/img/icons/sound-on.svg) center center;
  background-size: 100%;
}

/* fin video on/off */
    
    
/* ---------------------------------------------------------------------------- */
/* ----------------------- before v1.6 before v1.6 before v1.6 ---------------- */
/* -------------------------------------------------- This is still utile ? --- */     

    
 /* top gauche */
 .super-left{	z-index: 9999; font-family: 'arial'; color:#000;
 				font-size: 11px; 
 				letter-spacing: 1px;
    			line-height: 1.4;
 				position: fixed; top:90px; left:60px;}

.super-left 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;
	}
 .super-left a:hover {text-decoration:underline;}

/* milieu */
.premiermilieu { padding:40px 0 20px;}

.milieupartoutseul { width:100%; padding:0; margin:0;}

.milieupartoutseul p { max-width:100%; padding:0 120px; margin:0; font-size: 0.8em}

  @media only screen and (max-width: 640px){
   .milieupartoutseul p {padding:0 100px; margin:0;}
  }

.findepage {font-size: 25px;
    font-weight: 30px;
    letter-spacing: 1px;
     font-weight: 400;
	padding: 30px 200px;}


/* -------------------------------------------------- This is still utile ? --- */         
/* galerie / gallery */  
/* full page boxes gallery retouched */
.blocks-gallery-grid, .wp-block-gallery {
    margin-left: -10px;
    margin-right: -0px;
}
    

/* -------------------------------------------------- This is still utile ? --- */ 
/* ---------------------- Coder un plugin de galerie maison et masonry ASAP --- */     
/* ---- isotope ---- */
.grid {}

/* clear fix */
.grid:after {content:'';display:block; clear: both;}

.grid {}
/* clear fix */
.grid:after {content: ''; display: block; clear: both;}

/* ---- .grid-item ---- */

.grid-sizer, .grid-item {width: 50%;}

.product-supsup{padding:100px;}

	@media (max-width: 700px) {
	.grid-sizer, .grid-item { width: 100%!important; }
	.product-supsup{padding:40px;}
	}	

.grid-item { float: left; }

.grid-item img { display: block; max-width: 100%; }
/* ---- /fin isotope ---- */

    
    .single-index a {text-decoration: underline; -moz-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;transition: all 0.2s ease;}    
    .single-index a:hover {text-decoration: none; opacity: 0.8; 
    -moz-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;transition: all 0.2s ease;}  
   
/* ----------------------------------------------------------- Fenetre Add  --- */        
    
    .fenetre-top a {text-decoration: none;}
    .fenetre-top a:hover {color: red}
    
    .fenetre-top span {
        padding-left: 4px; 
        /*background: blue;*/
    }
    
    .fenetre-position-v3 {
        margin:0; 
        z-index: 10;
    }
    
/*  .suite fenetre dans: style-main.css 
    */

   
/* ------------------------------------------------------------ Experiment  --- */        
/* MASONRY PURE CSS 
 * depuis la v2 
 * utiliser dans les categories 
 * ---------------------------------------------------------------------------- */    
    
.css-masonry { 
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
    
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
    
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;    
    column-gap: 1.5em;
    
    margin: 1.5em;    
    padding: 0;
    font-size: .85em;
}

/* ITEM 
 * ------------------ */
.css-item {
    display: inline-block;
    width: 100%;
    
    font-family: 'Alata', sans-serif;
    font-size: 1.8em;
    
    background: #fff;
    margin: 0 0 1em;
    width: 100%;
    
	-webkit-transition:1s ease all;

    border: 2px solid black;
    border-radius: 6px; 
    overflow: hidden; /* to affect the inner elements with the radius */
}

    .hovershadow a {text-decoration: none; }  
    .hovershadow:hover {box-shadow: 0px 1px 54px -8px rgba(0,0,0,0.79);}    
 
    
.css-item img{ max-width:100%; font-size: 0; display: block; 
    /* to be sure to don't have a spacing after the img due to the inline block function */ }

.css-item-number {
    border: 2px solid black;
    border-radius: 50%;
    background: #fff;

    font-size: 0.8em;
    display: flex; /* flex is for center verticaly and horizontaly the number */
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0 2px 2px 0; 
    /* I display right and bottom padding because of the font who is not center par default : delete if you change the font */
    
    position: absolute;
    margin: 5px;
}

.css-item .css-title {
    border: 0px solid blue;
    padding: 10px 10px 14px;
}

.css-french {color: grey; font-size: 0.8em;}


@media only screen and (max-width: 420px) {
    .css-masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 421px) and (max-width: 768px){
    .css-masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1000px){
    .css-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 1001px) {
    .css-masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
    

/* --------------------------- PAGE & SINGLE version 5 ------------------------ */            
/* ----------------------- maintenant dans style-contenu.css ------------------ */
/* ----------------------- déplacé le 18/12/24 ------------------ */
/* ----------------------- but: ne plus avoir autant de css dans le header ! ------------------ */


    /* revealing footer */
    main {
        position: relative;
        z-index: 1;
    }
    footer {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    
    .artlieespaces {
    padding: 0px 50px 0;
    background-color: #e1e1e1!important;
}