/************* KROCUI.COM - 2020 *************/

/******DEBUT RESET******/

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 {
	border: 0; 
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}
body {
	font-family: Raleway, sans-serif;
	line-height: 1;
	font-weight:500;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	font: 1em Arial, sans-serif;
}

/******FIN RESET******/

/************* MOBILE FIRST *************/


/* STRUCTURE */

/*
body
-header
--nav
-section
-footer
*/


#menu li.active a, #menu li a:hover,  {
	border-bottom: 4px solid #009cff;
	text-decoration: none;
}


.vignette a.title {
text-decoration:none;
}

.vignette h4,
.vignette h3,
.vignette h2.liens {
text-decoration:none;
font-size: .8em;
font-weight:200;
text-transform: uppercase;
margin: .5em;
}

.vignette a.title .subtitle{
font-size: .75rem;
text-transform:none;
font-weight: normal;
margin: .25em;
display: inline-block;
}


.categorie h1{
display:none
}

.titrecache{
font-size:0
}


section .content-in{
text-align:center;
margin:0 auto;
margin:0 1em;
padding-bottom:2em;
}

section .content-in video{
width:700px;
max-width:100%;
}


#preskrocui{
display:grid;
margin:.5em 1em 0 1em;;
background:#fff;
border:3px solid black;
border-color:blue yellow green red;
text-align: center;
padding:1em;
}


#preskrocui h3{
text-transform:uppercase;
text-decoration: none;
font-weight:800;
font-size: 1.4em;
margin:0;
text-align: center;
}

#preskrocui h4{
font-size:.8em;
line-height: 1.6em;
}


#contact-in{
padding:1em;
margin-top:1em;
border:3px solid black;
border-color:yellow red blue green;
}

#contact-in h2, #contact-in p{
margin:0!important;
}


.principal{
margin:0 auto;
text-align: center;
padding-top:1em;
}

.article .principal{
padding:0;
}

#static .content-in h1{
font-size:0;
}

.galerie .content-in{
column-count:2;
gap:0 15px;
}

.home .galerie .content-in,
.grid .content-in{
grid-template-columns: repeat(1, 1fr);
display: grid;
gap:10px;
}

#livre img:first-child{
display:none;
}

#autresprojets .content-in{
grid-template-columns: repeat(2, 1fr);
}


#sidebar_in {
padding:5px 20px 0 20px;
display:grid;
grid-template-areas:'titre titre''soustitre soustitre''categories categories''tags tags';
}

/* STYLE */

a {
color: #000;
text-decoration: underline;
}

h1 {
line-height: 1.2em;
font-size:1.4em;
font-weight: 800;
text-transform:uppercase;
margin: 0 auto .5em auto;
}

h2 {
font-weight:800;
column-span: all;
text-align: center;
font-size: 1.4em;
text-transform: uppercase;
margin: 1.5em 0 .25em 0;
}

h3 {
font-size: 1em;
font-weight:700;
margin:1em 0 1em 0;
text-decoration:underline;
}

strong{
font-weight: 800;
}

h1 a{
text-decoration: none;
}
p{
line-height: 1.4em;	
}

.legende h1{
margin-bottom:.25em;
font-size:1.2rem;
}

#tagOptions p{
margin: 0 10% 1em 10%;
font-style:italic;
font-size:1.2em;
}



/* SIDEBAR */

#maintitle {
font-size: 0;
width:223px;
height:58px;
display:block;
font-weight: 800;
text-decoration: none;
background: url("img/krocui-logo-600px.png") no-repeat center center;
background-size:186px;
grid-area: titre;
margin: 0 auto;
}

.home h1{
grid-area: titre;
margin: 0;
text-align: center;
}

#mainsubtitle {
margin:.5em 0 0 0;
font-size:.8em;
grid-area: soustitre; 
text-align:center;
line-height:1.2em;
font-weight:700;
text-transform: lowercase;
}

h1 #mainsubtitle {
font-size:1em;
}

/******** MAX 540px *********/
@media only screen and (max-width: 540px){
.galerie .content-in{
column-count:1;
gap:15px;
}
	
.home .galerie .content-in,	.grid .content-in{
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 15px;
}


}
/******** FIN MAX 540px *********/

#menupages {
grid-area:pages;
text-align:center;
align-self: end;
}

#menupages li{
line-height: 1.85em;
display:inline-block;
}

#menupages li a{
text-decoration: none;
font-size: .85em;
font-weight: 700;
padding:.4em .4em;
}

#menupages li a#instagram span{
display:none;
}

#menupages li a#instagram {
display:inline-block;
width:25px;
height:25px;
background: url("img/logo-instagram.png") no-repeat center bottom;
background-size: 25px;
}

#menupages li a:hover, #menupages li a.active{
color:#ec355c;	
}

ul#tags{
/*! margin:1em auto 0 auto; */
text-align:center;
grid-area: tags;
align-self: end;
padding: .5em;
}

ul#tags li {
margin: .4em;
display:inline-block;
line-height:1.75em;
font-size:.85em;
}

ul#tags li a{
font-weight: 800;
text-decoration: none;
border:1px solid black; 
padding:5px 8px;
border-radius:22px;
}

ul#tags li a:hover,
ul#tags li a.active{
background-color:black;
color:white;
}

ul#menufiltre{
margin:.5em auto 0 auto;
text-align:center;
grid-area: categories;
align-self: end;
}

ul#menufiltre li {
margin: 0em 0.5em;
display:inline-block;
line-height:1.85em;
}



ul#menufiltre li a{
font-weight: 400;
text-decoration: none;
border-bottom:3px solid white;
text-transform: uppercase;
font-family: 'raleway';
}



ul#menufiltre a.external{
text-transform: lowercase;
font-style:italic;
font-size:1rem;
}



ul#menufiltre li#cat-11 a{
background-color:#feebea;
padding:5px 10px;
color:#ec355c;;
border-radius:15px;
border:0;
}

ul#menufiltre li#cat-11 a:hover,
ul#menufiltre li#cat-11.active a{
background-color:#ec355c;
color:white;
}


ul#menufiltre li.active a, 
ul#menufiltre a:hover,
#sidebar_in:has(#tags li a.active) #cat-9 a {
border-bottom:3px solid black;
}

p#welcome{
display:block;
color:#ec355c;
max-width: 80%;
text-transform:none;
line-height: 1.2em;
font-size:1.4em;
font-weight: 800;
text-transform:uppercase;
margin: 0 auto .5em auto;
}


#seemore {
display:flex;
align-items: center;
justify-content: center;
}


#seemore a {
font-size:1em;
font-weight:bold;
text-decoration: none;
padding:1em;
background-color:white;
color:black;
display:inline-block;
margin:1rem .5rem 2rem .5rem;
border-radius: 25px;
border-color: black;
border: solid 2px black;
}

#seemore a:hover {
background-color:#000;
color:white;
}

.categorie .infos{
grid-column: 1 / 3;
text-align: center;
max-width:600px;
line-height: 1.3em;
margin: auto;
}


.actus{
text-align: left;
max-width:700px;
line-height: 1.3em;
margin: auto;
}

.actus img{
max-width:100%;
}

.actus .content-in{
text-align: left;
}

.actus .content-in .date{
font-weight:bold;
text-align:left;
font-size:.85em;
}

.actus article{
margin-bottom:5em;
}

.actus article h2{
margin:.5em 0 ;
}


/* VIGNETTES */



.galerie .content_in{
column-count: 2;
column-gap: 10px;
}

.vignette {
margin: 0;
position:relative;
}

.vignette img {
aspect-ratio: 4 / 3;
width:100%;
vertical-align:top; /*pour éviter un pixel de trop*/
}

.serie figure a::after{
content:"+";
position:absolute;
bottom:0em;
right:.3em;
color:#fff;
font-size:3em;
font-weight: 200;
text-shadow: 1px 1px 2px #000;
}

/* Autre blocs */
#coolraool h2{
font-size:1.8rem;
text-transform:uppercase;
}

#coolraool{
background-color:white;
padding:2em;	
}

#lucasdebruyn{
background-color:#fff288;
padding:2em;
}

/* ARTICLE */



#date{
font-size:.7em;
}

section.article img{
margin: 0 auto 1em auto;
max-width:100%;
clear:both;
max-height: 90vh;
}

.article p {
line-height: 1.4em;
margin-top:1em;
}

.article .legende{
margin:0 auto 1em auto;
max-width:700px;
}

.fond_blanc {
box-shadow: #ccc 5px 5px 20px;
}

.content hr{
width:25%;
margin:2em 0;
}

.legende h2{
text-align:center;
font-size:.8em;
font-size: 1.2em;
text-transform: uppercase;
}


/* PAGINATION */

#navigation {
text-align:center;
width:100%;
line-height: 1.5em;
position:absolute;
left:0;
top: 1.5em;
}

#navigation .content-in{
position:relative;
}


#navigation .p_prev {
position:absolute;
left:1em;
}

#navigation .p_next{
position:absolute;
right:1em;
}


#navigation .p_next a, 
#navigation .p_prev a{
background: url(img/kroc-arrow.svg) no-repeat center center;
background-size: 15px;
transform:scaleX(-1);
width:40px;
height:40px;
display:block;
border-radius: 50%;
font-size: 0; 
}

#navigation .p_next a span, 
#navigation .p_prev a span{
display:none;
}

#navigation a:hover{ 
background-color:#ec355c
}

#navigation .p_next a{
transform:scaleX(1);
}

#pagination {
text-align:center;
width:100%;
margin-bottom:2em;}


#pagination .p_page, 
#pagination .p_current{
margin:0 .7em;
text-decoration: none;
font-size: 1.5em;
font-weight:800;
border-bottom:3px solid white;
}

#pagination a{
text-decoration: none;
}

#pagination span.p_current,
#pagination a:hover {
color:black;
border-bottom:3px solid black;
}

/* static */
#static .content-in {
text-align:left;
display:grid;
grid-template-columns: repeat(1, 1fr);
gap: 0 20px;
grid-template-columns: 100%;
grid-template-areas:'photo' 'biographie' 'contact' 'bibliographie' 'expo' ;
margin:0 auto 2em auto;
padding:1em;
}

#static #rencontres {
grid-template-areas:'photo' 'texteprincipal' 'contact' 'galerie';
}

#static #rencontres figure img{
object-fit: cover;
width: 100%;
max-height: 100%;
}

#static img{
object-fit: cover;
width: 100%;
max-height: 100%;
}


#static p, #static ul{
margin-bottom:1em;
clear:both;
line-height: 1.4em;
}

#static h2{
font-size:1.4em;
text-transform:uppercase;
line-height: 1.2em;
margin: 1em 0 .25em 0;
text-align:left;
}



#static ul li {
line-height: 1.6em;
list-style-type: disc;
margin:0 0 0 1em;
}

#static ul li em{
font-weight:700;
}


/* FOOTER */

footer {
clear : both;
background: #000;
width:100%;
grid-row: 5/6;

}

#footer_in {
text-align: center;
max-width:500px;
margin:0 auto;
padding: 2em;
}

#footer a {
font-weight: 800;
text-decoration: none;
margin:0 .5em;
}

#footer p, #footer a {
color:white;
line-height:1.4em;
}

.hidden, .mobileonly, #footer .to_top {
display: none;
}


/*******************************************/
/*******************************************/
/*******************************************/
/*******************************************/
/**************** 768px ********************/


@media only screen and (min-width: 767px){

#sidebar_in {
padding:10px 40px 0 40px;
grid-template-areas:'titre titre' 'soustitre soustitre' 'categories categories' 'pages pages' 'tags tags';
}

#maintitle {
background-size:300px;
height:113px;
width:305px;
}

#mainsubtitle {
margin:0;
font-size:1.4em;
text-align: center;
}

#preskrocui{
margin-left:8%;
margin-right:8%;
}

#preskrocui h4{
font-size:1em;
}

section .content-in{
text-align:center;
padding: 0 0 2% 0%;
}
	
#static h2.first{
margin:0;		
}


#livre-mobile{
	
display:none;
}

#livre img:first-child{
display:block;
}

.galerie .content-in{
column-count: 3;
}

.home .galerie .content-in,	
#autresprojets .content-in,
.grid .content-in{	
grid-template-columns: repeat(3, 1fr);
gap:20px;
margin: 0 8%;
}

#static .content-in {
grid-template-columns: repeat(2, 1fr);
gap: 0 40px;
grid-template-columns: 50% 50%;
grid-template-areas: 'biographie photo' 'biographie contact';
margin: 0 8%;
}
	
#static #rencontres {
grid-template-areas: 'texteprincipal photo' 'texteprincipal contact' 'galerie galerie';
}
	
#static #rencontres #ateliers-photos .contact-in{
display: flex;
flex-flow: wrap;
gap:0 20px;
justify-content: space-between;
}
	
#static #rencontres #ateliers-photos figure{
width: 48%;
}
	

#static #apropos {
grid-template-areas: 'biographie photo' 'contact photo' 'bibliographie bibliographie      ';
}

.vignette h4,
.vignette h3,
.vignette h2.liens {
font-size: .85em;
}
	
	

h1 a#maintitle,
.categorie h1{
display:block;
font-size:0;
margin-bottom:.5em}

.categorie h1{
text-align:center;}

h1#welcome {
font-size: 1.8em;
max-width: 600px;
margin-bottom:1em;
}

ul#menufiltre li {
margin:0 .6em;
}

ul#menufiltre li a{
font-size:1.15em;
}

#menupages {
top:24px;
right:40px;
}

#menupages li a{
padding:2px 5px;
}

#navigation span{
margin:0!important;
}

#navigation .p_next a, 
#navigation .p_prev a {
background-size: 15px;
}

.article h1{
font-size:1.8em;
}

#navigation .content-in{
max-width:80%;
}

#menupages li a#instagram {
display:inline-block;
width:35px;
height:35px;
background: url("img/logo-instagram.png") no-repeat center bottom;
background-size: 35px;
}

}

/*******************************************/ 
/*******************************************/ 
/*******************************************/ 
/*******************************************/ 
/**************** 1200px ********************/

@media only screen and (min-width: 1200px){

#preskrocui{
margin:.5em auto 0 auto;
max-width: 75%;
width: auto;
}

#static .content-in {
max-width:1100px;
}
}
/**************** FIN 1200px ********************/