/* 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;
  --font-serif: 'Libre Baskerville', serif;
  --font-sans: 'Apfel', 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.6;
  overflow: hidden;
}

img {
  width: 100%;
}

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

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

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

h2{
  font-size: 1.5rem;
  line-height: 1.3;
  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: 10px var(--padding);
  width: calc(30% - (var(--padding)*2));
  height: var(--headerH);
  overflow: hidden;
  z-index: 100; 
  width: 200px;
}

.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: 8px;
  cursor: pointer;
}

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

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

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

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

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;
}

.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) * 3);
  padding-bottom: calc(var(--padding) * 3);
  border-bottom: 1px solid #000;
}