/*

Theme Name: PBN
Description: PBN
Version: 1.0

*/


/* ----- Variables ----- */

:root {

	--text-color:#000;
	--h2-color:#000;
	--contrast-color:#C00;
	--page-bg:#FFF;

	/* --- Header --- */
	--header-h1-color: #FFF;
	--header-bg-color: #000;
	--header-bo-color: #EEE;
	--header-li-color: #FFF;
	--sidebar-color:#EEE;

	/* --- Footer --- */
	--footer-h1-color: #C00;
	--footer-bg-color: #EEE;
	--footer-bo-color: #EEE;
	--footer-li-color: #666;

	/* --- Tags --- */
	--tags-bg-color: #999;
	--tags-re-color: #900;
	--tags-ho-color: #FFF;

	/* --- Breadcrumbs --- */
	--breadcrumbs-bg-color: #FFF;
	--breadcrumbs-bo-color: #CCC;
	--breadcrumbs-re-color: #777;
	--breadcrumbs-ho-color: var(--contrast-color);

}



/* ----- Imports ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

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


/* ------ Structure ------ */
html {font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.25; background-color: var(--page-bg); color: var(--text-color);}

/* ------ Font ------ */
h1 {font-size:48px; color: var(--header-h1-color); margin-bottom:30px;}
h1 span {font-size:21px; color:#09F; text-transform: uppercase; display: block; margin-bottom: 10px;}
h2 {font-size:24px; color:var(--h2-color); text-transform: uppercase; font-weight: 800; margin:60px 0 30px;}
h3 {font-size:21px; color:var(--contrast-color); font-weight: 800; margin-bottom:30px;}
p {line-height: 1.25; margin-bottom: 30px;}
ul {margin-bottom: 30px; list-style-type: circle; list-style-position: outside;}
ol {margin-bottom: 30px; list-style-type: decimal; ;list-style-position: outside; margin-left: 30px;}
ul li, ol li {margin-bottom: 30px;}
a {color:inherit; text-decoration: underline;}
a:hover {text-decoration: underline; color:var(--contrast-color);}
a.inv {color:inherit; text-decoration: none; cursor: none;}
a.inv:hover {color:inherit; text-decoration: none; cursor: none;}


/* ------ Spec ----- */
nav {background-color:var(--header-bg-color); border-bottom:1px solid var(--header-bo-color); position:fixed; left:0; top:0; width:100%; display: flex;}
nav a {color:inherit; text-decoration: none;}
nav a:hover {color:var(--header-h1-color); text-decoration: none;}
nav #logo {border-right:1px solid var(--header-bo-color); color:var(--header-h1-color); text-transform: uppercase; min-width:150px; max-width: 250px; padding: 0 20px; box-sizing: border-box; height:80px; line-height: 80px; font-weight:800;}
nav #logo:hover, #logo a:hover {color:var(--contrast-color);}
nav ul {display:inline-flex; flex-flow:row; overflow-x: auto; list-style-type: none; margin-bottom:0px;}
nav ul li { height:80px; padding:0 20px; color:var(--header-li-color); line-height: 80px; transition: all; margin:0px;}
nav ul li:hover {color:var(--header-h1-color);}
nav ul li:first-of-type {padding:0 20px 0 40px;}

footer {width:100%; padding: 30px 50px; box-sizing: border-box; display:flex; background-color: var(--footer-bg-color); justify-content: space-between; color:var(--footer-h1-color); flex-wrap: wrap;}
footer .ncontainer {display: flex; flex-wrap: wrap;}
footer ul {list-style: none;}
footer a, footer a:hover {text-decoration: none;}

.wcontainer {width:100%; padding: 50px 50px 30px; box-sizing: border-box;}
.wcontainer.h1 {background-color: var(--header-bg-color); color:var(--header-li-color); padding: 310px 50px 130px; }
.bgimg {background-position:50% 50%; background-size: cover; background-repeat: no-repeat;}
.wcontainer.h1 .ncontainer {display:flex; justify-content: space-between; flex-wrap: wrap;}
.wcontainer.h1 .ncontainer div {width:100%;}
.title ul {display:flex; flex-wrap: wrap; margin-bottom: 30px; list-style-type: none;}
.title li {padding:10px 15px; border: 1px var(--header-li-color) solid; border-radius: 30px; margin: 0 10px 10px 0; color:var(--header-li-color); text-transform: uppercase; font-size: 14px; transition: all 0.5s;}
.title li:hover {border: 1px var(--contrast-color) solid; color:var(--contrast-color);}
.title li a {color:inherit; text-decoration: none;}
.wcontainer.h1 .ncontainer div img {width:100%; max-height:300px; object-fit: cover; border-radius: 30px;}
.ncontainer {max-width: 1200px; margin: 0 auto;}

article .ncontainer {display:flex; justify-content: space-between;}
.content { max-width:700px;}
.sidebar { width: 350px; background-color: var(--sidebar-color); border-radius: 30px;}


.lastsposts {display:flex; overflow-x: auto; background-color: var(--footer-bg-color); padding: 50px 50px; border-bottom: 1px solid var(--footer-bo-color);}
.lastsposts h2, .lastsposts p {display:none;}
.lastsposts h3 {margin-bottom: 0px;}
.lastsposts div {width:250px; margin-right:50px; overflow: hidden;}
.lastsposts div img {width:250px; height:150px; object-fit: cover; border-radius: 15px; margin-bottom: 20px;}
.lastsposts a {color:inherit; text-decoration: none;}

.alltags {background-color: var(--tags-bg-color); padding: 20px 50px 10px; border-bottom: 1px solid var(--footer-bo-color);}
.alltags ul {display:flex; overflow-x: auto; margin-bottom:0px; list-style-type: none; flex-wrap: wrap;}
.alltags li {padding:10px 15px; border: 1px var(--tags-re-color) solid; border-radius: 30px; margin: 0 10px 10px 0; color:var(--tags-re-color); text-transform: uppercase; font-size: 14px; transition: all 0.5s;}
.alltags li:hover {border: 1px var(--tags-ho-color) solid; color:var(--tags-ho-color);}
.alltags li a {color:inherit; text-decoration: none;}

.breadcrumbs {background-color: var(--breadcrumbs-bg-color); padding: 20px 50px; border-top: 1px solid var(--breadcrumbs-bo-color);}
.breadcrumbs ul {display:flex; overflow-x: auto; margin-bottom:0px; list-style-type: none;}
.breadcrumbs li {padding:10px 15px; border: 1px var(--breadcrumbs-re-color) solid; border-radius: 30px; margin: 0 10px 0px 0; color:var(--breadcrumbs-re-color); text-transform: uppercase; font-size: 14px; transition: all 0.5s;}
.breadcrumbs li:hover {border: 1px var(--breadcrumbs-ho-color) solid; color:var(--breadcrumbs-ho-color);}
.breadcrumbs li a {color:inherit; text-decoration: none;}


/* ----- Accordion -----*/
.accordion {background-color: var(--page-bg); color: #000; cursor: pointer; padding: 20px 0px 20px 40px; box-sizing: border-box; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; position: relative;}
.accordion h3 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; color: var(--text-color); font-size: 18px; margin:0;}
.accordion h3:before {content: "↓"; position: absolute; top:20; left:0; font-weight: 800; color:var(--contrast-color);}

.accordion:hover { background-color: var(--sidebar-color);}
.accordion.active:hover { background-color: var(--page-bg);}
.accordion.active h3 {color:var(--contrast-color);}
.panel {padding: 0px 0px; border-bottom: 1px solid var(--breadcrumbs-bo-color); height: 0px; box-sizing: border-box; overflow: hidden; transition: all 0.4s ease-out; margin: 0; line-height: 1.25;}
.active + .panel {height: auto; overflow: hidden; padding: 20px 0px;}

/* ----- Liste  -----*/
.home .ncontainer {margin-bottom: 30px;}
.home .ncontainer h2 {margin-top:0px;}
.home .sidebar {background-color:var(--page-bg);}
.home .sidebar img {width:350px; height:200px; object-fit: cover; border-radius: 30px;}
.home a {color:inherit; text-decoration: none;}


/* ---- Menu ---- */
footer .ncontainer { width:100%;}
footer p {color:var(--header-li-color); font-size: 12px; line-height: 1.25;}
ul.menu {margin-bottom:0; width:100%;}
ul.menu li { display: inline-block; padding: 15px; box-sizing: border-box; margin-bottom: 0;}
.menu a {color:var(--header-li-color); text-decoration: none;}
.menu a:hover {color:var(--contrast-color); text-decoration:underline;}



@media (max-width: 790px) { 
	.wcontainer {width:100%; padding: 50px 20px 30px; box-sizing: border-box;}
	.wcontainer.h1 {padding: 110px 20px 30px;}
	.wcontainer.h1 .ncontainer div {width:100%;}

	nav #logo {width:100%; max-width: none; border: 0;}
	nav ul {width:100%; display: block; top:80px; right:-100%; position: absolute; /*background-color: #000;*/}
	nav ul li { height:50px; padding:0 20px; color:#666; line-height: 50px; transition: all;}

	footer {padding: 20px 20px;}
	footer .menu li {width:100%; display:block; text-align: center; margin-bottom: 0;}
	.content { max-width:100%;}
	.sidebar { display:none;}
  .breadcrumbs {padding: 20px 20px;}
  .alltags {padding: 20px 20px 10px;}
  .lastsposts {padding: 30px 30px;}
}