@charset "UTF-8";

/*
Theme Name: La Parole Errante - v3b.0
Theme URI: https://laparoleerrante.org
Author: julien@regardeavue.com
Description: Le thème du site de la Parole Errante
Version: 3b.0
Licence: GNU General Public License v3 or Later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* VARIABLES */
:root {
	--wp-menu-height: 32px;
	--header-height: 54px;
	--player-height: 120px;
	--marge: 64px;
	--border: 1px solid #DDD;
	--jaune-clair: #FE8;
}

/* 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, input, button {
	font: inherit;
	line-height: initial;
	vertical-align: baseline;
	background: none;
	padding: 0;
	border: 0;
	outline:0;
	margin: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section,
summary { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
pre { white-space: normal; }
sup { font-size: .75em; }
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
input:focus { border: 0; }
:before, :after { line-height: 1; }

/* FONTS */
@font-face {
	font-family: "Vera";
	src: url('fonts/Vera.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Vera";
	src: url('fonts/VeraIt.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "Vera";
	src: url('fonts/VeraBd.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "Vera";
	src: url('fonts/VeraBI.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: "Alte Haas";
	src: url('fonts/AlteHaasGroteskRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Alte Haas";
	src: url('fonts/AlteHaasGroteskBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

/* TEXTES */
p, figure, figcaption, li, pre, blockquote, cite,
pre.wp-block-verse, figure.wp-block-pullquote p,
blockquote.wp-block-quote.is-style-large,
figure.wp-block-pullquote.is-style-solid-color blockquote,
figure.wp-block-pullquote.is-style-solid-color blockquote p,
blockquote.wp-block-quote.is-style-large p {
	max-width: none;
	font-size: 1em;
	font-style: normal;
	color: inherit;
	line-height: 1.6em;
	text-align: inherit;
	white-space: normal;
	padding: 0;
	margin: 0 0 1.2rem;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Alte Haas', Helvetica, Arial, sans-serif;
	line-height: 1.3em;
	margin: 0 0 2.2rem;
}
h2, h4, h6 { margin: 2.5rem 0 2.2rem }
h1, h2 { font-size: 2.5em; }
h3, h4 { font-size: 1.7em; }
h5, h6 { font-size: 1.1em; }
b, strong { font-weight: bold; }
em { font-style: italic; }
.center { text-align: center; }
.justify { text-align: justify; }
.right { text-align: right; }

/* LIENS */
a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .5ch;
	opacity: 1;
}
a:focus,
a:hover,
a:active {
	text-decoration: none;
	opacity: .5;
}

/* WP */
a.more-link { display: none; }
.wp-block-image { margin: 3em 0; }
.wp-block-image .alignleft { margin-right: 32px; }
.wp-block-image .alignright { margin-left: 32px; }

/* ANIMATIONS */
@keyframes off {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes on {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes menu-off {
	from { left: 0; }
	to { left: -100vw; }
}
@keyframes menu-on {
	from { left: -100vw; }
	to { left: 0; }
}
@keyframes button-off {
	from { transform: rotate(45deg); }
	to { transform: rotate(0deg); }
}
@keyframes button-on {
	from { transform: rotate(0deg); }
	to { transform: rotate(45deg); }
}

/* STRUCTURE */
body {
	font-family: 'Vera', sans-serif;
	font-size: 16px;
	background: white;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	position: relative;
}
.image {
	background-repeat: no-repeat;
	background-position: 50% 25%;
	background-size: cover;
	border-radius: 3px;
	margin: 0 0 1.2rem;
	position: relative;
}
div#page { margin-bottom: var(--player-height); }
div#reset {
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.05);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	display: none;
}
div#reset.off {
	animation-name: off;
	animation-duration: .25s;
}
div#reset.on {
	animation-name: on;
	animation-duration: .5s;
	opacity: 1;
}
.hidden { display: none !important; }
.clear { clear: both; }

/* BOUTONS */
button {
	cursor: pointer;
	position: relative;
}
button:before {
	font-size: 2.5em;
	font-family: dashicons;
	position: relative;
}
button.fermer {
	position: absolute;
	top: 8px;
	right: 8px;
}
button.fermer:before { content: "\f335"; }

/* FORMULAIRES DE RECHERCHE */
form#searchform > div {
	max-width: 500px;
	padding: 8px 7px 8px 16px;
	border-radius: 5px;
	position: relative;
}
form#searchform > div:before {
	font-size: 38px;
	font-family: dashicons;
	content: "\f179";
	position: absolute;
	top: 8px;
	right: 8px;
}
form#searchform input[type='text'] {
	width: calc(100% - 80px);
	padding: 8px 0;
	margin: 0 32px 0 0;
}
form#searchform input[type='submit'] {
	width: 42px;
	height: 42px;
	position: relative;
	cursor: pointer;
}
form#searchform label { display: none; }

/* HEADER */
header#site {
	height: var(--header-height);
	padding: 0 8px;
	background: white;
	border-bottom: var(--border);
	position: relative;
	z-index: 200;
}
header#site h1 {
	font-weight: bold;
	margin: 0;
	display: inline-block;
}
header#site a.home {
	text-decoration: none;
	opacity: 1;
}
header#site button {
	top: 8px;
	left: 8px;
	z-index: 200;
}
header#site button.recherche {
	position: absolute;
	left: auto;
	right: 8px;
}
header#site button.off {
	animation-name: button-off;
	animation-duration: .25s;
}
header#site button.on {
	animation-name: button-on;
	animation-duration: .25s;
	transform: rotate(45deg);
}
header#site button.menu:before { content: "\f228"; }
header#site button.recherche:before { content: "\f179"; }
header#site button.on:before { content: "\f543"; }

/* MENU */
nav#menu {
	width: 50%;
	height: calc(100vh - var(--header-height) - var(--player-height));
	background: var(--jaune-clair);
	padding: var(--header-height) 0 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	overflow: auto;
	display: none;
}
.logged-in nav#menu { height: calc(100vh - var(--header-height) - var(--player-height) - var(--wp-menu-height)); }
nav#menu.off {
	animation-name: menu-off;
	animation-duration: .25s;
	left: -100vw;
}
nav#menu.on {
	animation-name: menu-on;
	animation-duration: .5s;
}
nav#menu button.fermer {
	color: #ED6;
	top: calc(8px + var(--header-height));
}
nav#menu button.fermer:before { content: "\f341"; }
.logged-in nav#menu button.fermer { top: calc(8px + var(--header-height) + var(wp-menu-height)); }
nav#menu a {
	text-decoration: none;
	opacity: 1;
}
nav#menu ul.menu { padding: 64px;}
nav#menu ul.menu > li {
	font-size: 1.4em;
	margin: 1em;
}
nav#menu li { margin: 0; }
nav#menu ul.sub-menu { display: none; }

/* FORMULAIRE DE RECHERCHE DE L'EN-TÊTE */
nav#recherche {
	max-width: 500px;
	padding: 0 var(--marge);
	margin: 128px auto 0;
	position: relative;
	z-index: 100;
	overflow: auto;
	opacity: 0;
	display: none;
}
nav#recherche.off {
	animation-name: off;
	animation-duration: .25s;
}
nav#recherche.on {
	animation-name: on;
	animation-duration: .5s;
	opacity: 1;
}
nav#recherche p { font-size: 1.4em; }
nav#recherche form#searchform > div {
	width: calc(100% - 25px);
	background: white;
	border: 1px solid #555;
}

/* LECTEUR */
div#lecteur {
	width: 100vw;
	height: var(--player-height);
	color: white;
	background: linear-gradient(#222,#111);
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
}