html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
*, * html, body, html{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; outline:0; margin: 0; padding: 0}
::selection { color: white; background: black;}
/*@font-face { font-family: 'Untitled Sans'; font-weight: 400; font-display: swap;  src: url(fonts/UntitledSansWeb-Regular.woff) format('woff');}
@font-face { font-family: 'Untitled Sans Medium'; font-weight: 500; font-display: swap;  src: url(fonts/UntitledSansWeb-Medium.woff) format('woff');}*/
@font-face { font-family: 'jacquesfrancois'; font-weight: 500; font-display: swap; src: url(fonts/jacquesfrancois.woff2) format('woff2');}
:root{
  --link_color : black;
  --link_border_color : rgba(0,0,0,0.6);
  --menu_link_border_color : rgba(0,0,0,1);
  
  --bg-color : white;
  
  /*fonts*/
  --fonts-untitled: -apple-system, system-ui, sans-serif;
  --fonts-jacquesfrancois: jacquesfrancois, -apple-system, system-ui, sans-serif;
  --font-size : 110%;
  
  /* Burger */
  --btn-nav-color : #000;

  /* cursor */
  --c-bg: hsl(0, 0%, 10%);
  --c-size: 21px;

  --container-margin : 32px;
  --grid-gap : 32px;
}


/**/
.grid-galerie {float: left; width: 100%; filter: brightness(1.8) contrast(0.5); opacity: 0;  transition: all .6s ease; }
.effects { filter: brightness(1) contrast(1); opacity: 1;  transition: all .6s ease; }
.grid-galerie-post {width: 100%; display: grid; grid-column: auto; grid-template-columns: repeat(4, 1fr); align-items: center;   grid-template-rows: masonry; grid-gap: var(--grid-gap);}
.grid { transition: all .6s ease; position: relative; 
  .grid-image { position: relative; overflow: hidden; float: left; width: 100%; 
    img { float: left; width: 100%; height: 100%; transition: all .6s ease; margin: 0; padding: 0;}
    img:hover { transform: scale(1.08); transition: all 2s ease;}
  }
  .urlsite{position: absolute; right: 5px; bottom: 5px; display: block; opacity: 0;  transition: all .6s ease;
    a{ float: left; width: 25px; height: 25px; padding: 8px; background: rgba(183,183,183,1.00); border-radius: 30px; transition: all .6s ease; }
    a:hover{ f background: rgba(183,183,183,0.1); }
  }  
  
}

.grid-galerie-post:hover {
  .grid .grid-image{filter: brightness(0.8) contrast(1.2); opacity: 1;   transition: all .6s ease; }
}
.grid-galerie-post:hover .grid:hover .grid-image{filter: brightness(1) contrast(1); opacity: 1;  transition: all .6s ease;	}
.grid-galerie-post:hover .grid:hover {
   .urlsite {opacity: 1;}
}
body{font-family: var(--fonts-untitled); font-size: var(--font-size); background: var(--bg-color);cursor: default}
.container{ position: relative; display: grid; grid-template-areas: "header" "main" "footer" ; min-height: 100vh; max-width: 1440px; margin: auto;  overflow: hidden}
header, main, footer{ position: relative; margin: 0 var(--container-margin); background: var(--bg-color); display: block }
header{grid-area: header;  /*height: 130px;*/}
main{grid-area: main;   min-height: calc(100vh - 240px)}
footer{grid-area: footer;   min-height: 80px;}


/* TT Style */

.cursor { z-index: 9999; top: 50%;  left: 50%;  position: fixed; 	display: block; width: var(--c-size);  height: var(--c-size);  margin-top: calc(var(--c-size) / -2);  margin-left: calc(var(--c-size) / -2);  border-radius: 50%;   pointer-events: none; transition: transform 0.2s ease, background-color 0.6s ease, opacity 0.2s  ease-in-out 0.5s; overflow: visible;  }
.cursor { background-color:var(--c-bg);  opacity: 1;   mix-blend-mode: difference; filter:invert(); transform: scale(1); cursor: pointer}
.cursor.hover { opacity:1; transform: scale(3);/*background-color:transparent;*/ box-shadow: 0px 0px 0.5px var(--c-bg);  }
.cursor.hide {opacity: 0;}
.cursor.sleep {transform: scale(0.01);}
.cursor.load {transform: scale(3);}
.cursor.down { opacity: 1; transform: scale(4); } 

#ball {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#ball {
    position: fixed;
    width: var(--c-size);  height: var(--c-size);
    border: 2px solid #FFF;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
    box-sizing: border-box;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* WYSIWYG */
h1, h2, h3, h4, h5 {font-weight: 500}
h1 {
    display: block;
    font-size: 1.6em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal; 
}
h2 {
    display: block;
    font-size: 1.6em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal; 
}
a{ position: relative; color: var(--link_color); text-decoration: none; margin: 0}
.link a::after { position: absolute; float: left;  left: 0; content: ''; width: 100%; height: 1px; padding: 18px 0 0; border-bottom: 1px solid var(--link_border_color); background: transparent; transform: scaleX(0.6); transition: transform 0.4s; }
.link a:hover::after{transform: scaleX(1);}

ul.list-classic{ display: grid; grid-template-columns: column;margin: 20px 0; width: 100%}
ul.list-classic li{ float: left; width: 100%; margin: 5px 0 5px 15px}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
        line-height: 25px;
}

/**/

.header-content, .footer-content{ padding: 20px 0;}

.logo { float: left; width: 260px; padding: 0 20px 0 0; }
.logo a::after {border-bottom: none;}
.logo svg{ align-content: center}

.menu { float: right;width: calc(50%); margin: 40px; text-align: right}
.menu ul.nav{justify-content: space-around; margin-bottom: 0; padding-left: 0; list-style-type: none; display: flex; font-size: 18px}
.menu a::after { padding: 20px 0 0; border-bottom: 1px solid var(--menu_link_border_color); }
.menu a.active::after{ transform: scaleX(1);}

/* MENU BURGER */ 
#menu-burger {display: none; z-index: 8888;}
.btn-nav-container {position:absolute;top:0;right:40px;width:40px;height:40px; margin-top: 50px;cursor:pointer;background:transparent;border:none;outline:none; z-index: 9999}
.btn-nav {width:100%; height: 2px; position:relative; background:var(--btn-nav-color); top:0; transition:all ease 0.2s;  }
.btn-nav:before, .btn-nav:after {content:'';position:absolute;left:0; background: var(--btn-nav-color); height:100%;transition:all ease 0.3s; z-index: 9999}
.btn-nav:before {top:-8px;width:70%; margin:0 15%}
.btn-nav:after {top:8px;width:70%;margin:0 15%}
.btn-nav-container:hover .btn-nav:before, .btn-nav-container:hover .btn-nav:after {width:100%; }
.btn-nav-container.close-menu .btn-nav {transform:rotate(-45deg); z-index: 9999; background: white}
.btn-nav-container.close-menu .btn-nav:after {opacity:0;transition:all ease 0.2s;}
.btn-nav-container.close-menu .btn-nav:before {top:0;transform:rotate(90deg);width:100%;transition:all ease 0.2s;background: white}

.float-nav {position:fixed;top:0;display:none;width:100%;height:100%; z-index: 8888 }
.float-nav .bg1, .float-nav .bg2 {position:absolute; width:100%; height:100vh;background: rgba(0,0,0,0.9) ;top:0; left:100%;transition:all 0.2s ease 0.2s;}
.float-nav .bg2 {background: rgba(0,0,0,1); transition-delay:0s;}
.float-nav.active .bg1, .float-nav.active .bg2  {left:0; transition:all 0.7s ease 0.3s;}
.float-nav.active .bg1 {transition-delay:0.1s;}
.float-nav.active .bg2 {transition-delay:0.3s;}

.float-nav .menu-container {position:absolute;top:0;left:0;width:100%;height:100%;display:flex; flex-direction:column; align-items:center;justify-content:top;max-width:none; z-index: 8888}
.float-nav.active ul {opacity:1;transition-delay: 0.5s;}
.float-nav ul {display:flex; flex-direction:column; max-height:100vh; opacity:0; transition: opacity 0.2s ease 0s; padding: 40px 0;}
.float-nav ul li img{filter: invert()}
.float-nav .menu-logo a::after{border-bottom: none}
.float-nav ul li a::after{border-bottom: none}

.float-nav ul li{list-style:none;}
.float-nav ul li a {text-decoration:none; text-transform:uppercase; color: white; font-weight: 400; text-align: center; display: block;  padding: 20px;}





.main-container{ z-index: 100 }

.couverture { }
.couverture img{ float: left; width: 100%; } 
.intro {width:100%; margin: 40px 0; display: grid; grid-auto-flow: column; grid-template-columns: 40% 60% ; align-items: center}
.intro-image {filter: brightness(10) contrast(.85) grayscale(1); opacity: 1;   transition: all .6s ease; }
.effect { filter: brightness(1) contrast(1) grayscale(0); opacity: 1;  transition: all .6s ease;}
.citation { padding: 40px 40px ; height: auto; border-left: 1px solid #000; }
.citation.titre { text-align: center;align-items: center; border-left: 0px; }


.page .intro { }
.page .sous-titre {
    font-family: var(--font-jacquesfrancois); line-height: 1.4em;
    display: block;
    font-size: 1.2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal; }

.single {}
.single .intro { }
.single .citation { border-left: 0 }

/**/
.galerie {float: left; width: 100%;}
.grid-post {width: calc(100% + 40px); margin-left: -20px;  }
.post{ float: left;width: calc((100% / 3) - 40px); margin: 20px; transition: all .6s ease; }

.grid-post:hover .post {filter: brightness(0.8) contrast(1.2); opacity: 1;   transition: all .6s ease;}
.grid-post:hover .post:hover{filter: brightness(1) contrast(1); opacity: 1;  transition: all .6s ease;	}

.post-image{ position: relative; overflow: hidden; float: left; width: 100%; height: 100%; box-shadow: 1px 1px 1px rgba(0,0,0,0.5)  }
.post-image img{ float: left; width: 100%;  transition: all .6s ease; margin: 0; padding: 0; }
.post:hover .post-image img{ transform: scale(1.1); transition: all .4s ease;}

.matiere {float: left; width: 100%; position: absolute; text-align: right; z-index: 200 }
.categorie{float: left; margin-top: -15px;width: 30px; height: 30px; border-radius: 40px; margin-left: 10px; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); overflow: hidden;}
.categorie img{ float: left; width: 200%; height: 200%;}

.post-detail{ float: left; width: 100%; padding: 20px 0}






.matiere {float: left; width: 100%; position: absolute; text-align: right; z-index: 200 }
.categorie{float: left; margin-top: -15px;width: 30px; height: 30px; border-radius: 40px; margin-left: 10px; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); overflow: hidden;}
.categorie img{ float: left; width: 200%; height: 200%;}

.grid-detail{ float: left; width: 100%; padding: 20px 0; display: grid; grid-column: auto; grid-template-columns: 2fr 1fr; align-items: center;  grid-gap: 40px;}


/* Archives */
.categories {}
.categories ul li{ float: left; padding: 20px}


.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #000;
    letter-spacing: 2px;
}

/* Blocs */
.wp-block-column { padding: 40px}
.blockquote {}
/**/
.footer-content{ text-align: center}

@media screen and (max-width:1180px) {    
  
  .menu {display: none}
  #menu-burger {display: block  }
  .intro { display: block}
  .citation {width: 100%; padding: 20px; height: auto; border-left: none }
  .grid-galerie-post { grid-column: auto; grid-template-columns: 1fr 1fr;  grid-gap: 40px}

}


@media screen and (max-width:767px) {    
  :root{
    --container-margin : 20px;
  }
  
  .menu {display: none}
  #menu-burger {display: block  }
  .intro { display: block}
  .citation {width: 100%; padding: 20px; height: auto; border-left: none }
  .grid-post {width: calc(100%); margin-left: 0;  }

  .post{width: calc((100% ) - 20px); margin: 10px;}
  .grid-galerie-post { grid-column: auto; grid-template-columns: 1fr;  grid-gap: 20px}

}


@media screen and (max-device-width:767px) and (orientation: portrait){    
  :root{
    --font-size : 80%;
    --container-margin : 10px;
    --c-size: 0; 
  }
  
.grid-post:hover .post {filter: none}
.grid-post:hover .post:hover{filter: none}  

  
}