/* CSS EN MOBILE FIRST */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
    font-family: 'Apfel'; 
    src: url('fonts/ApfelGrotezk-Mittel.woff2') format('woff2');
}

* {
  margin: 0;
  padding: 0;
}

:root {
  --padding: 1rem;
  --space-m: 40px;
  --main-color: #000; 
  --second-color: #FFF;
  --color-background: #FFF;
  --color-hover: grey; 
/*  --font-serif: 'Libre Baskerville', serif;
  --font-sans: 'Apfel', sans-serif;*/
  --font-serif: 'Syne', sans-serif;
  --font-sans: 'Syne', sans-serif;
  --headerH : 40px;
  --shadow: rgba(0, 0, 0, 0.25) 0px 0px 20px 0px;
}

html {
  font-family: var(--font-serif);
  color: #000;
  background: var(--color-background);
}

body {
/*  max-width: 70rem;*/
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.5;
  overflow: hidden;
}

img {
  width: 100%;
}

li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}

a:hover{
  transform: skewX(10deg);
}

h1{
  margin-bottom: var(--padding);
}

h1, h2, h3, h4, h5{
  font-family: var(--font-sans);
}

h2{
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: normal;
}

h3{
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: 50px;
  margin-bottom: 10px;
  margin-left: 50px;
  font-weight: normal;
}

iframe{
  width: 100%;
  height:100%;
  margin:0;
}


/* ---- M E N U ----- */
header{
/*  background: #FFF;*/
/*  height: var(--header-size);*/
/*  left: 0;*/
/*  position: fixed;*/
/*  top: 0;*/
/*  transition: transform .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1);*/
/*  width: 100%;*/
/*  z-index: 3;*/
  font-size: 1.5rem;
}

.logo {
  font-family: var(--font-sans);
  background: #FFF;
  padding: 10px 30px;
  text-align: center;
  position: fixed;
  left:50%;
  top: var(--padding);
  transform: translateX(-50%);
/*  box-shadow: var(--shadow);*/
  height: var(--headerH);
}

nav{
  position: fixed;
  top: var(--padding);
  background: #FFF;
/*  box-shadow: var(--shadow);*/
  padding: 15px var(--padding);
  width: calc(30% - (var(--padding)*2));
  height: 30px;
  overflow: hidden;
  z-index: 100; 
  width: 200px;
  transition: all 0.5s ease;
}

.left-col nav{
  left: var(--padding);
}

.right-col nav{
  right: var(--padding);
}

nav.active{
  height: auto;
}

nav .menu-arrow {
  position: absolute;
  right: var(--padding);
  top: 15px;
  cursor: pointer;
  transition: all 0.5s ease;
}

nav.active .menu-arrow{
  transform: rotate(180deg);
}

nav ul {
  font-family: var(--font-sans);
}

nav ul li {
  margin: 0;
  margin-bottom: var(--padding);
}

nav ul li:hover{
  transform: skewX(10deg);
}

#menu-icon {
  display: block;
  font-size: 24px;
  margin-top: -4px;
  cursor: pointer;
}

main{
  margin:0;
  font-size: 1.2rem;
}

main .main-column{
  margin:0;
  padding: 0;
/*  padding-top: calc(var(--headerH) + 120px);
  padding-left: calc(var(--padding) * 2.5);
  padding-right: calc(var(--padding) * 2.5);
  padding-bottom: calc(var(--headerH) + 120px);
  --background: #FFF;
  background: var(--background);
  height: 100vh;*/
/*  overflow: scroll;*/
}

.main-column > div{
  padding-top: calc(var(--headerH) + 120px);
  padding-left: calc(var(--padding) * 2.5);
  padding-right: calc(var(--padding) * 2.5);
  padding-bottom: calc(var(--headerH) + 120px);
  --background: #FFF;
  background: var(--background);
  height: 70vh;
  overflow: scroll;
}

.main-column .default{
  padding-left: calc(var(--padding) * 10);
  padding-right: calc(var(--padding) * 10);
}

.main-column .last{
  padding-left: calc(var(--padding) * 5);
  padding-right: calc(var(--padding) * 5);
}

.main-column .last .actus-wrapper{
  margin-bottom: calc(var(--padding) * 5);
}

.main-column .last .actus-wrapper p{
  font-size: 0.9em;
}



.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.grid > .column {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

/* ÉCOUTER EN DIRECT */
.ecouter-en-direct{
  position: fixed;
  bottom: calc(var(--padding) * 2);
  padding: var(--padding);
  background: #FFF;
  width: 400px;
  left:50%;
  transform: translateX(-50%);
/*  box-shadow: var(--shadow);*/
}

.ecouter-en-direct .controls__slider,
.ecouter-en-direct .controls__total-time,
.ecouter-en-direct .download{
  display: none !important;
}


.emission{
  margin-bottom: calc(var(--padding) * 2);
  padding-bottom: calc(var(--padding) * 2);
/*  border-bottom: 1px solid #000;*/
}

.emission h2:hover {
/*  color: var(--color-hover);*/
/*  text-shadow: darkgrey 1px 0 3px;*/
/*  font-style: italic;*/
  transform: skewX(10deg);
}

.audio{
  padding: 5px;
}

.note .audio{
/*  margin-bottom: 3em;*/
}

.note p{
  font-size: 0.9em;
/*  font-family: "Andale Mono";*/
/*  font-style: italic;*/
}

.emissions .year{
  font-size: 1.5em;
}

.emissions .year > div{
  margin-bottom: 30px;
  cursor: pointer;
}

.emissions .year > div + .emissions-list{
  display: none;
}

.emissions .year > div + .emissions-list.active{
  display: block;
}

.description-wrapper{
  margin-bottom: calc(var(--padding) * 5);
  font-size: 0.9em;
  padding: 0;
}