/* =====================================================================
   legacy-header.css
   ---------------------------------------------------------------------
   Ces 800 lignes vivaient en dur dans le <head> de header-v3.php,
   header-v4.php et header-v5.php (blocs strictement identiques, verifies
   par empreinte MD5 le 2026-09-21) ainsi que, a un bloc pres, dans
   header-v2025.php.

   Elles sont sorties ici pour que les quatre en-tetes puissent fusionner
   en un seul header.php sans que les anciennes pages perdent leur mise
   en forme. Le fichier n'est charge que par le mode "legacy" du header.

   Les deux url() qui pointaient vers /img/icons/ via PHP sont devenues
   des chemins relatifs ../img/icons/, ce qui est equivalent depuis
   l'emplacement de ce fichier.

   Ne rien ajouter ici : c'est un fossile, pas une feuille vivante.
   ===================================================================== */

/* ---------------------------------------------------------------------------- */   
/* ---------------------------        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(../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(../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 3 ------------------------ */            

/* page (et single?) 
    empeche le depassement ou scroll quand texte plus grand que la div */
    .single-index {overflow: hidden} 
    
    
    /*this is not a menu : page category */
    .thisisnotamenu {
        position: fixed; 
        top:120px; 
        right:20px;
    }
    
    @media only screen and (max-width: 820px) {
        .thisisnotamenu {
            position: relative; 
            padding:10px; 
            background: #eee;
            top:0; 
            right:0;
        }
        
        .thisisnotamenu li {
            display: inline-block; 
            padding: 4px;
        }
    }
  
   
/* red hat = title princpal */    
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
    
/* raleway = content text and other stuff */    
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');    
       
    /* mobile */
	@media (max-width: 700px) {
        .and-single-index-v3 {
            padding: 20px;
        } 
	}	  

    /* edit button */    
    .single-edit-v3 {
        position: fixed;
        top: 50%; 
        left: 10px; 
        z-index: 99;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 512 640' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M218.5,215.1l-22.9,79.5c-1.7,5.9-0.1,12.3,4.2,16.7c3.2,3.3,7.6,5,12.1,5c1.5,0,3-0.2,4.5-0.6l80.3-22.1 c2.8-0.8,5.4-2.3,7.5-4.4l145.5-145.5c10.8-10.8,16.7-25.1,16.7-40.3c0-15.2-5.9-29.5-16.7-40.3l-0.8-0.8 c-10.8-10.8-25.1-16.7-40.3-16.7s-29.5,5.9-40.3,16.7L222.8,207.8C220.7,209.8,219.2,212.3,218.5,215.1z M249.9,228.7L392.4,86.3 c4.3-4.3,10.1-6.7,16.3-6.7c6.1,0,11.9,2.4,16.3,6.7l0.8,0.8c4.3,4.3,6.7,10.1,6.7,16.3s-2.4,11.9-6.7,16.3L283.4,262l-46.7,12.9 L249.9,228.7z'/%3E%3Cpath d='M102.5,466h255.7c31.4,0,56.8-25.1,56.8-56.5V286.6c0-9.4-7.6-17-17-17s-17,7.6-17,17v122.9 c0,12.7-10.1,22.5-22.8,22.5H102.5c-12.7,0-22.5-9.9-22.5-22.5V153.8c0-12.7,9.9-22.8,22.5-22.8h122.8c9.4,0,17-7.6,17-17 s-7.6-17-17-17H102.5C71.1,97,46,122.3,46,153.8v255.7C46,440.9,71.1,466,102.5,466z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 30px; 
        width: 30px; 
        height: 30px;
    }   
   
    /* bloc single */
    .bloc-single-v3 { 
        margin-top: 20px;
        font-family: 'Raleway', sans-serif;
        position: relative;
    }   
    
    .ifbalise {
        font-size:12px;         
        font-weight: 400;
        color: #ababab;
        padding: 0 0; 
    } 
    
    /* number single */
    .number-single-v3 {
        position: absolute; 
        top: 10px;
        right: -30px; 
        border: 2px solid black; 
        border-radius: 50%;
        width: 76px; 
        height: 76px; 
        font-weight: 500;
        
        font-family: 'Montserrat', sans-serif;
        background: #fff;
        transform: rotate(12deg);
        
       box-shadow: 3px 3px 0px rgba(153, 153, 153, 0.67);
        
        transition: all 2.2s ease;
    }
       
     .number-single-v3 div {
        width: 100%; 
        height: 100%;   
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
     .number-single-v3 div p{
        font-size: 1.4em;
         padding: 1px 2px 3px;
         font-weight: 800;
    }    
    
    .number-single-v3:hover {
        transform: rotate(-4deg);
        transition: all 0.4s ease;
    }

    .number-single-v3 a {
        text-decoration: none;
    }    
    
    /* titre single */
    .titre-single-v3 {   
        padding: 20px 20px 0;
        overflow: hidden; 
        word-break: break-word;
    }
        
    .titre-single-v3 h2 {
        font-family: 'Red Hat Text', sans-serif; 
        font-weight: 700;
        font-size: 3.4em;
        letter-spacing: -2px;
        line-height: 0.95em;
    }    

    /* mobile */
	@media (max-width: 700px) {
        .titre-single-v3 h2 {
            font-size: 2.8em;
        }   
        .bloc-single-v3 { 
            margin-top: 10px;
        }    
	}	    
    
    .subtitle-single-v3 {
        font-size: 1.1em;
        padding-top: 8px;
    }    
    
    /* content single */
    .content-single-v3 { 
        padding: 20px 20px 0;
        overflow: hidden; 
        word-break: break-word;  
    }  
    
    .content-single-v3 .content-text {
        font-weight: 400;
        font-size: 1.2em;  
        line-height: 1.5em; 
    }   
    
   .content-text p{
        padding: 10px 0;
    }       
    
    /* thumbnail single */
    .thumbnail-single-v3 {        
        padding: 20px 0 0;     
    }    
    
    .content-text ul li {
        border: 0px solid black;
        position: relative;
    }

    .content-text ul li::before {
        position: relative;
        content: '● '
    }  

    .content-text ol {
        counter-reset: my-counter-ol;
    }

    .content-text ol li {
        position: relative;
        border: 0px solid black;
        padding: 0 0 0 20px;
    }

    .content-text ol li::before {
        content: counter(my-counter-ol);
        counter-increment: my-counter-ol;
        position: absolute;
        left: -7px;
        top: 0;
        background-color: #111;
        color: white;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    
    
    
/* ARTICLE */    
/* bouton editeur de texte */    
.wp-block-button__link {
    
    margin: 20px;
    
    color: #000;
    background-color: #eee;
    border: 2px solid #222;
    border-radius: 8px;
    font-size: 18px;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
}
    
.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited {
    color: #000;
    font-weight: 400;
}
    
    
    
    
/* youtube / video / vimeo / etc */ 
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; 
    
    border-radius: 10px;
    } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        
/* met les video youtube, les embed en general en full width */
.wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border: 0px solid red;} 
.wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px solid black;}


    
    /* 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;
}