@import "./variables.less";
@import "./mixins.less";
@import "./typo.less";
@import "./figure.less";
@import "./utils.less";

@import "../mots.less";

@import "../modeles/biographie.less";
@import "../modeles/portrait-jean.less";
@import "../modeles/liste-films.less";
@import "../modeles/portraits-artistes.less";
@import "../modeles/direct-access.less";
@import "../modeles/viewer.less";

@import "../modeles/mea-films.less";

@import "../inclure/nav/nav.less";
@import "../inclure/header/header.less";
@import "../inclure/introduction/introduction.less";
@import "../inclure/footer/footer.less";

@import "../inclure/scroll-indicator.less";

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  color: @white;
  background:@black;
}

ul,
li {
  padding: 0;
  list-style: none;
}

html,
body {
  margin: 0;
  height: 100%;
  background-color: @black;
}

.page {
  position: relative;
  height: 100%;
  width:100%;
  .main {
    background-color: @white;
    padding-top: 1px;
    padding-bottom: 10em;
  }
  &.black .main {
    background-color: @black;
  }
}

.page
.container {
  padding-right:1em;
  padding-left:1em;
}

.page_sommaire .page {
  height: 100%;
}

.page_dossier,
.page_groupe,
.page_rubrique,
.page_article {
  header {
    padding:1em;
    background-color: @white;
  }
}

.page_groupe,
.page_dossier,
.page_rubrique {
  .main .descriptif {
    padding-top:8em;
    padding-bottom:8em;
    font-style: italic;
  }
}
.page_dossier .container {
  overflow: hidden;
}
header.hero {
  height:100%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
  .texte {
    position: absolute;
    bottom:5em;
    h1 {
      background-color: @black;
      color:@white;
      display: inline-block;
      padding:.125em .25em;
      margin-bottom:0;
    }
  }
}

.spip_documents {
  width:100%;
  img {
    width:100%;
    height: auto;
  }
}
.spip_document_1 img{
  width: 220px;
}

nav.pagination > ul {
  display: flex;
  li {
    margin-right:.5em;
    padding:.25em .5em;
    &.active{
      background-color: @black;
      color:@white;
    }
  }
}

.page_rubrique_1 {
  .container {
    padding-right:0;
    padding-left:0;
  }
  .page .main{
    transition: background 1s ease-in;
  }
}
ul.liste-dossiers {
  display:flex;
  flex-flow: row wrap;
  padding-bottom:3em;
  li {
    width:50%;
    padding:0 .5em;
    img {
      border:1px solid white;
      width:100%;
      height:auto;
      transition: 200ms ease-out;
    }
    &:hover img {
      border-color: @black;
    }
  }
}

#content.video {
  h1 {
    margin-bottom:.5em;
  }
}
.nav-toggle-btn {
  position: absolute;
  top:2em;
  width:3em;
  height:1.2em;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
  transition:right 450ms ease-in-out;
  cursor: pointer;
  small {
    position: absolute;
    text-align: center;
    top:100%;
    width:100%;
    padding-top:.75em;
    color: @black;
    &.close {
      display:none;
    }
  }
  hr {
    width:100%;
    opacity: 1;
    transition:all 450ms ease-in-out;
    position: relative;
    left:50%;
    top:0;
    transform: translateX(-50%) rotate(0deg);
    margin:0;
    border-top:0;
    border-color:@black;
  }
}

.page_film {
  .main .container {
    padding-bottom: 1em;
  }
}

.clearfix,
.nettoyeur {
  clear: both;
}

.page .texte svg {
  min-width: 300px;
}
.formulaire_spip {
  form {
    label.label {
      display: block;
    }
    fieldset {
      border: 0;
      padding:0;
      > legend {
        display: none;
      }
    }
    input.text, 
    textarea {
      width:100%;
      padding:.5em;
    }
    .boutons,
    .editer {
      margin-bottom:.5em;
    }
  }
}