@charset "UTF-8";
@import 'reset.css';
@font-face {
  font-family: "Redaction_10-Bold-CVB";
  src: url("../font/redaction/webfonts/Redaction35-Bold-CVB.ttf");
}
@font-face {
  font-family: "Redaction-Bold";
  src: url("../font/redaction/webfonts/Redaction-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Redaction-Italic";
  src: url("../font/redaction/webfonts/Redaction-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Redaction-Regular";
  src: url("../font/redaction/webfonts/Redaction-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "HKGrotesk-Medium";
  src: url("../font/HKGrotesk-Medium.ttf");
}
@font-face {
  font-family: "HKGrotesk-MediumItalic";
  src: url("../font/HKGrotesk-MediumItalic.otf");
}
@font-face {
  font-family: "HKGrotesk-Bold";
  src: url("../font/HKGrotesk-Bold.otf");
}
@font-face {
  font-family: "HKGrotesk-BoldItalic";
  src: url("../font/HKGrotesk-BoldItalic.otf");
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #00dab0;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: white;
}

/* Handle on hover */
::-webkit-scrollbar-track:hover {
  background: #f0d4fd;
}

.scroller {
  overflow-y: scroll;
  scrollbar-color: #f1f1f1 #00dab0;
  scrollbar-width: 5px;
}
.scroller:hover {
  scrollbar-color: #f1f1f1 #f0d4fd;
}

body {
  width: 100vw;
  height: 100%;
  font-family: "Redaction-Regular";
  font-size: 1.15em;
  margin: 0;
  padding: 0;
  color: #3e0a51;
  background: #d9e8ff;
  background-repeat: repeat;
  background-image: url("../image/grid-2-clair.png");
  overflow: hidden;
}
body ::-moz-selection {
  background: white;
  color: #00dab0;
}
body ::selection {
  background: white;
  color: #00dab0;
}
body .flexdetout {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
body .flexdetout .reader-top {
  min-width: 100%;
  align-self: stretch;
  min-height: 10%;
}
body .flexdetout .flexcentre {
  width: 100%;
  display: flex;
  align-self: stretch;
}
body .flexdetout .flexcentre .reader-left {
  order: 1;
  flex: 1.5 1 auto;
}
body .flexdetout .flexcentre .reader-right {
  order: 3;
  flex: auto;
}
body .flexdetout .flexcentre .main {
  order: 2;
  flex: 4 1 auto;
}
body .flexdetout .readerbot {
  width: 100%;
  min-height: 10%;
  align-self: stretch;
}
body h1,
body h2,
body h3 {
  font-weight: normal;
}
body #box-edito {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  -webkit-backdrop-filter: grayscale(1);
          backdrop-filter: grayscale(1);
}
body #box-edito .head_close .close {
  margin-top: 0.15em;
  font-family: "HKGrotesk-Bold";
  margin-left: 0.4em;
  margin-right: 30vw;
  color: #3e0a51;
}
body #box-edito .head_close .close:hover {
  color: white;
}
body #box-edito .contener .content_edito {
  font-size: 0.9583333333em;
  line-height: 1.4em;
  position: fixed;
  left: 30vw;
  overflow-x: hidden;
  overflow-y: auto;
  top: 0;
  background: #00dab0;
  width: 40vw;
  height: 100vh;
  overflow: auto;
  cursor: default;
}
body #box-edito .contener .content_edito .text {
  margin-right: 3vw;
  margin-left: 3vw;
}
body #box-edito .contener .content_edito .text h1 {
  font-family: "Redaction-Bold";
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 0.2em;
}
body #box-edito .contener .content_edito .text h2 {
  font-family: "Redaction-Italic";
  margin-top: 0;
  font-size: 2em;
  font-weight: normal;
}
body #box-edito .contener .content_edito .text h3 {
  font-family: "Redaction-Bold";
  color: #3e0a51;
  font-weight: normal;
  margin-top: 1vh;
  margin-bottom: 1vh;
}
body #box-edito .contener .content_edito .text h4 {
  font-family: "Redaction-Bold";
  text-decoration: underline;
  color: #3e0a51;
  font-weight: normal;
  margin-top: 1vh;
  margin-bottom: 1vh;
}
body #box-edito .contener .content_edito .text p:nth-of-type(1) {
  text-indent: 0;
  margin-top: 1.4vw;
}
body #box-edito .contener .content_edito .text p {
  text-indent: 2vw;
  margin-bottom: 0;
  margin-top: 0;
}
body #box-edito .contener .content_edito .text p a {
  color: #3e0a51;
  text-decoration: underline;
}
body #box-edito .contener .content_edito .text p a:hover {
  color: white;
}
body #box-edito .contener .content_edito .text p sup {
  vertical-align: super;
  color: white;
  font-size: 0.575em;
}
body #box-edito .contener .content_edito .text p sup a {
  color: #00dab0;
  text-decoration: none;
}
body #box-edito .contener .content_edito .text p em {
  font-family: "Redaction-Italic";
  font-style: normal;
}
body #box-edito .contener .content_edito .text p:nth-last-of-type(1) {
  margin-bottom: 8vh;
}
body #box-edito .contener .content_edito .text strong {
  font-family: "Redaction-Bold";
  color: #3e0a51;
}
body #box-edito .contener .content_edito .text .footnote hr {
  color: #3e0a51;
}
body #box-edito .contener .content_edito .text .footnote ol {
  margin-left: 2em;
  font-size: 0.7em;
  margin-bottom: 2vh;
}
body #box-edito .contener .content_edito .text .footnote ol li {
  list-style: decimal;
}
body #box-edito .contener .content_edito .text .footnote ol li::marker {
  color: white;
}
body #box-edito .contener .content_edito .text .footnote ol li a {
  color: white;
}
body #box-edito .contener .content_edito .colophon h3 {
  font-family: "Redaction-Bold";
  margin-top: 2vh;
}
body #box-edito .contener .content_edito .colophon a {
  color: #3e0a51;
}
body #box-edito .contener .content_edito .colophon p {
  text-indent: 0px;
}
body #box-edito .contener .content_edito .colophon img {
  display: inline-flex;
  width: 6vw;
  padding-left: 3vw;
  vertical-align: middle;
}
body #box-edito .contener .content_edito .colophon ul {
  list-style: none;
  display: block;
  color: #3e0a51;
  font-size: 0.8em;
  line-height: 1.5em;
  margin-bottom: 2vh;
}
body #box-edito .contener .content_edito .colophon ul li a {
  color: #3e0a51;
}
body #box-edito .contener .content_edito .colophon ul li a:hover {
  color: white;
  text-decoration: underline;
}
body #box-edito .contener .content_edito .close {
  position: absolute;
  margin-left: 38vw;
  font-size: 1.15em;
  position: sticky;
  top: 0px;
  cursor: pointer;
}
body #box-edito .contener .content_edito .close:hover {
  color: white;
}
body #box-edito .contener .content_edito .reseau {
  position: fixed;
  bottom: 0;
  padding-bottom: 2.5vh;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  display: flex;
  list-style: none;
  background: #00dab0;
  margin-bottom: 0px;
  width: 40vw;
  padding-left: 0;
}
body #box-edito .contener .content_edito .reseau a {
  color: #3e0a51;
  text-decoration: none;
  margin-left: 0.1em;
  margin-right: 0.1em;
}
body #box-edito .contener .content_edito .reseau a:hover {
  color: white;
  text-decoration: underline;
}
body #box-edito .contener .content_edito .EditoNav {
  margin-top: 2vh;
  margin-bottom: 3em;
  list-style: none;
}
body #box-edito .contener .content_edito .EditoNav li {
  color: #3e0a51;
  font-family: "Redaction-Bold";
  cursor: pointer;
}
body #box-edito .contener .content_edito .EditoNav li a {
  margin: 0.2em;
  padding: 0.7em;
  transition: ease-in-out 0.2s;
  border: 1px solid #3e0a51;
  border-radius: 100%;
  text-decoration: none;
}
body #box-edito .contener .content_edito .EditoNav li a:hover {
  box-shadow: -2px 2px #3e0a51;
  transition: ease-in-out 0.2s;
  color: #00dab0;
  background: white;
}
body #box-edito .contener .content_edito .EditoNav li a:focus {
  box-shadow: -2px 2px #3e0a51;
  background: white;
}
body #box-edito .contener .content_edito ul {
  display: inline-flex;
  justify-content: flex-start;
}
body #box-edito .contener .content_edito ul li {
  padding-left: 1.15em;
}
body #box-edito .contener .content_edito ul li a {
  color: #3e0a51;
  position: relative;
}
body #box-edito .contener .content_edito ul p {
  font-size: 1.15em;
  line-height: 1.15em;
  text-indent: 2em;
  margin-top: 0;
}
body #box-edito .contener .content_edito ul p a {
  text-decoration: underline;
  text-shadow: -2px 2px #00dab0;
}
body .header {
  display: inline;
}
body .menu {
  width: 100%;
  background: transparent;
  font-family: "Redaction_10-Bold-CVB";
  font-weight: normal;
  color: #00dab0;
  font-size: 5em;
  -webkit-text-stroke: 0.004em #3e0a51;
  text-shadow: -0.05em 0.05em #3e0a51;
  transition: all 0.25s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  position: relative;
}
body .menu:hover {
  text-shadow: 0 0 #3e0a51;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
body .menu-bottom,
body .menu-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
body .menu-top {
  align-items: start;
  height: 50%;
}
body .menu-bottom {
  align-items: flex-end;
  height: 50%;
}
body .menu-shadow {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
body .title {
  padding: 0 0.3em;
  z-index: 1;
}
body .title:nth-of-type(2) {
  text-align: right;
}

main .item {
  font-family: "HKGrotesk-Medium";
  z-index: 1;
  overflow: hidden;
}
main .item .box-infos {
  font-size: 1.15em;
  line-height: 1.265em;
  padding: 0vw;
  overflow: visible;
  position: relative;
  font-family: "HKGrotesk-Medium";
  align-self: flex-start;
  flex-wrap: wrap;
  display: flex;
  transition: transform 330ms ease-in-out;
}
main .item .box-infos img.photo_cover {
  width: 100%;
  display: none;
  filter: grayscale(1) contrast(1.3);
  mix-blend-mode: screen;
}
main .item .box-infos:hover {
  z-index: 100;
}
main .item .box-infos:hover img.photo_cover {
  filter: grayscale(0) contrast(1);
  mix-blend-mode: normal;
  transition: all 0.2s ease-in-out;
}
main .item .box-infos .forme {
  height: auto;
  position: absolute;
  margin-top: -100px;
}
main .item .box-infos .forme img {
  width: 100%;
  height: auto;
}
main .item .box-infos h1, main .item .box-infos h2 {
  font-size: 1.15em;
  margin-bottom: 1vh;
  font-family: "hkgrotesk-bold";
  word-break: break-word;
}
main .item .box-infos .header {
  position: relative;
  display: block;
  font-family: "HKGrotesk-Medium";
  z-index: 2;
}
main .item .box-infos h1 {
  margin: 0;
}
main .item .box-infos ul {
  padding: 0;
  list-style: none;
}
main .item .texte .box-content {
  background: #00dab0;
}
main .item .texte .header {
  text-align: center;
  padding: 2em 1em;
  background: url(../../theme/image/svgs/back_svg/cercle.svg) center center no-repeat;
  background-size: 100% 100%;
}
main .item .texte h1 {
  width: 100%;
}
main .item .podcast {
  transition: all 1.3s;
  cursor: pointer;
}
main .item .podcast .box-content .photo_cover {
  height: 15vh;
  -o-object-fit: cover;
     object-fit: cover;
}
main .item .podcast .header {
  padding: 0.5em;
  text-align: center;
  background-image: url(../../theme/image/svgs/back_svg/square.svg);
  background-size: 100% 100%;
}
main .item .podcast .list_podcast {
  font-family: "HKGrotesk-Medium";
  font-size: 0.6em;
  padding: 0;
  text-align: center;
  width: 100%;
}
main .item .podcast .list_podcast li {
  cursor: pointer;
  padding: 0 0.5em;
  border-top: 1px solid #3e0a51;
  list-style: none;
  background: white;
  line-height: 1em;
  padding: 0.5em;
  text-align: center;
  background: #f7f1e7;
  margin: 0 auto;
}
main .item .podcast .list_podcast li:hover {
  color: #00dab0;
}
main .item .podcast .list_podcast li:nth-last-of-type(1) {
  border-top: 1px solid #3e0a51;
}
main .item .outil-pedagogique .header {
  cursor: pointer;
  background: url(../../theme/image/svgs/back_svg/square.svg) center center no-repeat;
}
main .item .outil-pedagogique .header:hover .type-media,
main .item .outil-pedagogique .header:hover h1 {
  color: #00dab0;
}
main .item .outil-pedagogique h1, main .item .outil-pedagogique .type-media {
  color: #3e0a51;
}
main .item .outil-pedagogique ul.list {
  display: none;
}
main .item .outil-pedagogique ul.list:hover {
  display: none !important;
}
main .item .cycle-conferences .header {
  cursor: pointer;
  background: url(../../theme/image/svgs/back_svg/cercle.svg) center center no-repeat;
}
main .item .cycle-conferences .header:hover {
  color: #f0d4fd;
}
main .item .cycle-conferences ul {
  display: none !important;
}
main .item .court-metrage {
  color: #3e0a51;
}
main .item .court-metrage .header {
  transition: 0s;
  cursor: pointer;
  background: url(../../theme/image/svgs/back_svg/square.svg) center center no-repeat;
}
main .item .court-metrage .header:hover {
  transition: 0s;
  color: #00dab0;
}
main .item .lexique {
  display: none;
  top: -100px;
  left: -100px;
  transition: all 3s ease-in-out;
  position: fixed;
  font-size: 0.8214285714em;
  font-weight: normal;
  color: #000632;
  width: 200px;
}
main .item .lexique .header {
  background: url(../../theme/image/svgs/back_svg/square.svg) center center no-repeat;
  z-index: 1;
}
main .item .lexique .header h1 {
  cursor: pointer;
}
main .item .lexique .header:hover {
  filter: grayscale(0);
  color: #00dab0;
  text-decoration: underline;
}
main .item .lexique .box-content {
  padding: 0em;
}
main .item .lexique.visible {
  display: block;
}
main .item .lexique.lien-actif {
  display: block;
}
main .item .lexique.lien-actif h1 {
  color: #00dab0;
}
main .item .ressource {
  cursor: pointer;
  color: #3e0a51;
  background: #00dab0;
}
main .item .ressource h1 {
  font-weight: normal;
}
main .item .ressource .header {
  background: url(../../theme/image/svgs/back_svg/cercle.svg) center center no-repeat;
}
main .item #edito_nf_mobile {
  display: none;
}
main .item .outil-pedagogique .box-content, main .item .cycle-conferences .box-content, main .item .court-metrage .box-content, main .item .lexique .box-content, main .item .edito .box-content, main .item .ressource .box-content, main .item .documentaire-primaire .box-content, main .item .podcast .box-content {
  width: 100%;
}
main .item .outil-pedagogique .header, main .item .cycle-conferences .header, main .item .court-metrage .header, main .item .lexique .header, main .item .edito .header, main .item .ressource .header, main .item .documentaire-primaire .header, main .item .podcast .header {
  text-align: center;
  width: 100%;
  padding: 1em 0;
  background-size: 100% 100%;
}
main .item .outil-pedagogique .type-media, main .item .cycle-conferences .type-media, main .item .court-metrage .type-media, main .item .lexique .type-media, main .item .edito .type-media, main .item .ressource .type-media, main .item .documentaire-primaire .type-media, main .item .podcast .type-media {
  font-size: 0.8em;
}
main .item .outil-pedagogique .list, main .item .cycle-conferences .list, main .item .court-metrage .list, main .item .lexique .list, main .item .edito .list, main .item .ressource .list, main .item .documentaire-primaire .list, main .item .podcast .list {
  background: #3e0a51;
  font-family: "HKGrotesk-Medium";
  font-size: 0.6em;
  background: white;
}
main .item .outil-pedagogique ul, main .item .cycle-conferences ul, main .item .court-metrage ul, main .item .lexique ul, main .item .edito ul, main .item .ressource ul, main .item .documentaire-primaire ul, main .item .podcast ul {
  display: flex;
  flex-flow: row wrap;
}
main .item .outil-pedagogique .list li, main .item .cycle-conferences .list li, main .item .court-metrage .list li, main .item .lexique .list li, main .item .edito .list li, main .item .ressource .list li, main .item .documentaire-primaire .list li, main .item .podcast .list li {
  cursor: pointer;
  padding: 0 0.5em;
  border-top: 1px solid #00dab0;
}
main .item .outil-pedagogique .list li img, main .item .cycle-conferences .list li img, main .item .court-metrage .list li img, main .item .lexique .list li img, main .item .edito .list li img, main .item .ressource .list li img, main .item .documentaire-primaire .list li img, main .item .podcast .list li img {
  filter: grayscale(1) contrast(1.3);
  mix-blend-mode: screen;
  height: auto;
  width: 5vw;
  vertical-align: middle;
  display: none;
}
main .item .outil-pedagogique .list li:hover, main .item .cycle-conferences .list li:hover, main .item .court-metrage .list li:hover, main .item .lexique .list li:hover, main .item .edito .list li:hover, main .item .ressource .list li:hover, main .item .documentaire-primaire .list li:hover, main .item .podcast .list li:hover {
  background: #00dab0;
}
main .item .outil-pedagogique .list li:hover .play, main .item .cycle-conferences .list li:hover .play, main .item .court-metrage .list li:hover .play, main .item .lexique .list li:hover .play, main .item .edito .list li:hover .play, main .item .ressource .list li:hover .play, main .item .documentaire-primaire .list li:hover .play, main .item .podcast .list li:hover .play {
  font-family: "Redaction_10-Bold-CVB";
  font-weight: normal;
  color: white;
  font-size: 1.2em;
  -webkit-text-stroke: 0.004em #3e0a51;
  text-shadow: -0.05em 0.05em #3e0a51;
  padding: 0 0.3em;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
main .item .outil-pedagogique .list li:hover .play:hover, main .item .cycle-conferences .list li:hover .play:hover, main .item .court-metrage .list li:hover .play:hover, main .item .lexique .list li:hover .play:hover, main .item .edito .list li:hover .play:hover, main .item .ressource .list li:hover .play:hover, main .item .documentaire-primaire .list li:hover .play:hover, main .item .podcast .list li:hover .play:hover {
  text-shadow: 0 0 #3e0a51;
  transition: all 0.25s ease-in-out;
}
main .item .outil-pedagogique .list li:hover img, main .item .cycle-conferences .list li:hover img, main .item .court-metrage .list li:hover img, main .item .lexique .list li:hover img, main .item .edito .list li:hover img, main .item .ressource .list li:hover img, main .item .documentaire-primaire .list li:hover img, main .item .podcast .list li:hover img {
  filter: grayscale(0) contrast(1);
  mix-blend-mode: normal;
}
main .item .outil-pedagogique:hover .list, main .item .cycle-conferences:hover .list, main .item .court-metrage:hover .list, main .item .lexique:hover .list, main .item .edito:hover .list, main .item .ressource:hover .list, main .item .documentaire-primaire:hover .list, main .item .podcast:hover .list {
  display: block;
}
main .item .documentaire-primaire {
  font-family: "HKGrotesk-Bold";
}
main .item .documentaire-primaire .box-content .photo_cover {
  display: none;
  height: 20vh;
  -o-object-fit: cover;
     object-fit: cover;
}
main .item .documentaire-primaire .header {
  text-align: center;
  background: url(../../theme/image/svgs/back_svg/square.svg) center center no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
main .item .documentaire-primaire .header:hover {
  color: #00dab0;
}
main .item .documentaire-primaire .play {
  margin: 12.5vw;
  position: absolute;
}
main .item .documentaire-primaire h1 {
  font-size: 2em;
  line-height: 1.2em;
}
main .item .edito {
  font-family: "HKGrotesk-Bold";
  overflow: hidden;
}
main .item .edito .header {
  text-align: center;
}
main .item .edito h1 {
  width: auto;
  display: inline-block;
  padding: 0em 0.5em;
  color: #3d074f;
  line-height: 2em;
  overflow: hidden;
}
main .category {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  -webkit-backdrop-filter: grayscale(1);
          backdrop-filter: grayscale(1);
}
main .category .introduction {
  z-index: 1000;
  position: fixed;
  overflow-y: auto;
  width: 40vw;
  height: 100vh;
  margin-top: 0vh;
  margin-left: 30vw;
  top: 0;
  bottom: 0;
  cursor: pointer;
  background: linear-gradient(0deg, #f0d4fd 0%, #00dab0 100%);
  border-right: 1px solid #3e0a51;
  border-left: 1px solid #3e0a51;
}
main .category .introduction h1 {
  font-family: "HKGrotesk-Bold";
  line-height: normal;
  color: white;
  top: 0;
  height: 4vh;
  width: 40vw;
  text-align: center;
  margin-top: 2vh;
}
main .category .introduction .edito {
  padding-left: 4vw;
  padding-right: 4vw;
  margin-top: 8vh;
}
main .category .introduction .edito h2 {
  font-family: "HKGrotesk-Bold";
  color: #3e0a51;
  font-weight: normal;
  font-size: 1.15em;
  padding-top: 1.15em;
  text-decoration: underline;
  text-decoration-color: white;
}
main .category .introduction .edito h3 {
  font-family: "HKGrotesk-Bold";
  font-weight: normal;
  margin-top: 2vh;
  margin-bottom: 1vh;
}
main .category .introduction .edito h3:before {
  -webkit-text-stroke: 1px #3e0a51;
  color: #f7f1e7;
  content: "•";
  font-family: "HKGrotesk-Medium";
  font-size: 2em;
  padding-right: 1vw;
  text-shadow: -2px 2px #3e0a51;
}
main .category .introduction .edito p {
  font-family: "HKGrotesk-Medium";
  font-size: 1em;
  line-height: 1.15em;
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 2vw;
}
main .category .introduction .edito p:nth-of-type(1) {
  text-indent: 0;
}
main .category .introduction .edito p a {
  color: #3e0a51;
  text-decoration: underline;
}
main .category .introduction .edito p a:hover {
  color: #f7f1e7;
  text-decoration: none;
}
main .category .introduction .edito p sup {
  vertical-align: super;
  color: white;
  font-size: 0.575em;
}
main .category .introduction .edito p sup a {
  color: white;
  text-decoration: none;
}
main .category .introduction .edito .footnote {
  margin-top: 3vh;
}
main .category .introduction .edito .footnote hr {
  height: 1px;
  border-width: 0;
  color: #3e0a51;
  background-color: #3e0a51;
}
main .category .introduction .edito .footnote ol {
  margin-top: 3vh;
  margin-left: 2em;
  font-size: 0.7em;
  margin-bottom: 2vh;
}
main .category .introduction .edito .footnote ol li {
  list-style: decimal;
}
main .category .introduction .edito .footnote ol li::marker {
  color: white;
}
main .category .introduction .edito .footnote ol li a {
  color: white;
}

@keyframes here {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.2);
  }
  98% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(0.5);
  }
}
.item {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
  margin: 0 0%;
  display: grid;
  transition: all 0.5s ease-in-out;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

#shift {
  grid-area: 3/4/5/8;
  cursor: pointer;
}
#shift .forme {
  display: block;
}

#a-scene-ouverte {
  grid-area: 3/15/6/10;
  transform: scale(0.7);
}

#la-peer-enquete {
  grid-area: 4/11/6/8;
  transform: scale(0.7);
}
#la-peer-enquete .forme {
  display: block;
}

#curriculum-futurae {
  grid-area: 3/1/7/3;
}

#conference-pointculture {
  transform: scale(0.8);
  grid-area: 9/3/7/1;
}
#conference-pointculture .forme {
  display: block;
  margin-top: -50px !important;
}
#conference-pointculture .header {
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  padding: 2em 0em;
}

#ressource {
  grid-area: 9/8/10/6;
}
#ressource:hover h1 {
  color: #00dab0;
}

#deliveroo_nous {
  grid-area: 6/7/8/9;
  display: block;
  transform: scale(0.6);
  display: block;
  cursor: pointer;
}
#deliveroo_nous .box-content {
  transform: rotate(-25deg);
  transition: all 0.2s ease-in-out;
}
#deliveroo_nous:hover .box-content {
  transform: rotate(-20deg);
  box-shadow: -0.4em 0.4em #3e0a51;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
}

#aPropos {
  grid-area: 1/4/2/3;
  display: block;
  text-align: center;
  background: linear-gradient(90deg, #00dab0 30%, #f0d4fd 70%);
  cursor: pointer;
  margin-top: 1.5vh;
  z-index: 10;
}
#aPropos .box-content {
  width: auto;
  display: inline-block;
  margin: 0em 0.5em;
  color: #3d074f;
  line-height: 2em;
  overflow: hidden;
}
#aPropos .box-content a {
  text-decoration: none;
  color: #3e0a51;
  font-family: "HKGrotesk-Bold";
}
#aPropos:hover {
  background: linear-gradient(90deg, #f0d4fd 30%, #00dab0 70%);
}
#aPropos:hover .box-content a {
  color: white;
}

#volet-2 {
  grid-area: 5/11/6/13;
  display: block;
  text-align: center;
  background: linear-gradient(90deg, #00dab0 30%, #f0d4fd 70%);
  cursor: pointer;
  z-index: 10;
  margin: 2em 1em;
  line-height: 2em;
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}
#volet-2 .box-content {
  background: url(../../theme/image/svgs/back_svg/cercle.svg) center center no-repeat;
  background-size: 100% 100%;
}
#volet-2 .box-content a {
  text-decoration: none;
  color: #3e0a51;
  font-family: "HKGrotesk-Bold";
}

#volet-2:hover {
  background: #ffe55d;
  transform: scale(1.15);
  transition: all 0.2s ease-in-out;
}
#volet-2:hover .box-content a {
  color: #1fd2e9;
}

#alter_echo_article {
  display: block;
  grid-area: 10/3/9/5;
  transform: scale(0.6);
  cursor: pointer;
}
#alter_echo_article .box-content {
  transform: rotate(25deg);
  transition: all 0.2s ease-in-out;
}
#alter_echo_article:hover .box-content {
  transform: rotate(20deg);
  box-shadow: -0.4em 0.4em #3e0a51;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
}

#le-travail-qui-vient {
  grid-area: 2/11/3/8;
  transform: scale(0.8);
}
#le-travail-qui-vient .box-content {
  margin-top: 0px;
}
#le-travail-qui-vient h1 {
  background: linear-gradient(90deg, #00dab0 30%, #f0d4fd 70%);
  cursor: pointer;
}
#le-travail-qui-vient:hover h1 {
  background: linear-gradient(90deg, #f0d4fd 30%, #00dab0 70%);
  color: white;
}

#a-distance {
  grid-area: 7/3/11/6;
}

.house {
  overflow: hidden;
  position: absolute;
}
.house .forme {
  z-index: -1;
}
.house #ho-1 {
  position: absolute;
  transform: scale(0.6);
  transform-origin: top center;
  margin-left: 50px;
  transition: all 0.3s ease-in-out;
}
.house #ho-2,
.house #ho-3,
.house #ho-4,
.house #ho-5,
.house #ho-6,
.house #ho-7 {
  transform: scale(0);
  position: absolute;
  margin-left: -50px;
}
.house #ho-2 {
  transition: all 0.3s ease-in-out;
  transform: scale(0);
}
.house #ho-3 {
  position: absolute;
  transform: scale(0);
  transition: all 0.5s ease-in-out;
}
.house #ho-4 {
  position: absolute;
  transform: scale(0);
  margin-top: -50px;
  transform-origin: center;
  transition: all 0.6s ease-in-out;
}
.house #ho-5 {
  position: absolute;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}
.house #ho-6 {
  position: absolute;
  transform: scale(0);
  transition: all 0.5s ease-in-out;
}
.house #ho-7 {
  position: absolute;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}
.house:hover .forme {
  z-index: -3;
}
.house:hover #ho-1 {
  position: absolute;
  transform: scale(0.9);
  transform-origin: top;
  margin-left: 150px;
  transition: all 0.3s ease-in-out;
}
.house:hover #ho-2 {
  position: absolute;
  transform: scale(0.5);
  transform-origin: center;
  margin-top: -100px;
  transition: all 0.3s ease-in-out;
}
.house:hover #ho-3 {
  position: absolute;
  transform: scale(0.7);
  transform-origin: center;
  margin-top: -100px;
  transition: all 0.5s ease-in-out;
}
.house:hover #ho-4 {
  position: absolute;
  transform: scale(0.4);
  transform-origin: center;
  margin-top: -250px;
  transition: all 0.6s ease-in-out;
}
.house:hover #ho-5 {
  position: absolute;
  transform: scale(0.5);
  transform-origin: center;
  margin-top: -100px;
  transition: all 0.3s ease-in-out;
}
.house:hover #ho-6 {
  position: absolute;
  transform: scale(0.5);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
}
.house:hover #ho-7 {
  position: absolute;
  transform: scale(0.5);
  transform-origin: center;
  margin-top: -100px;
  transition: all 0.2s ease-in-out;
}

.equalizer .forme {
  z-index: -1;
}
.equalizer .forme #eq-1 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.5);
  transition: all 0.6s ease-in-out;
}
.equalizer .forme #eq-2 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.6);
  transition: all 0.6s ease-in-out;
}
.equalizer .forme #eq-3 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.7);
  transition: all 0.6s ease-in-out;
}
.equalizer .forme #eq-4 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.8);
  transition: all 0.6s ease-in-out;
}
.equalizer .forme #eq-5 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.7);
  transition: all 0.6s ease-in-out;
}
.equalizer:hover .forme {
  z-index: -1;
}
.equalizer:hover .forme #eq-1 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(1);
  transition: all 0.3s ease-in-out;
}
.equalizer:hover .forme #eq-2 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.7);
  transition: all 0.4s ease-in-out;
}
.equalizer:hover .forme #eq-3 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.5);
  transition: all 0.5s ease-in-out;
}
.equalizer:hover .forme #eq-4 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.6);
  transition: all 0.6s ease-in-out;
}
.equalizer:hover .forme #eq-5 {
  position: absolute;
  transform-origin: bottom;
  transform: scaleY(0.7);
  transition: all 0.7s ease-in-out;
}

.communs .forme {
  z-index: -1;
  position: absolute;
  transform-origin: center;
  transform: scale(0.9);
}
.communs .forme #co-1 {
  z-index: 1;
  position: absolute;
  transform-origin: center;
  transition: all 0.2s ease-in-out;
  mix-blend-mode: multiply;
  transform: scale(0.8);
}
.communs .forme #co-2 {
  z-index: 2;
  position: absolute;
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  mix-blend-mode: multiply;
  transform: scale(0);
}
.communs .forme #co-3 {
  z-index: 3;
  position: absolute;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  mix-blend-mode: multiply;
  transform: scale(0);
}
.communs .forme #co-4 {
  z-index: 4;
  position: absolute;
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  mix-blend-mode: multiply;
  transform: scale(0);
}
.communs:hover .forme #co-1 {
  transform-origin: center;
  transition: all 0.2s ease-in-out;
  transform: scale(1);
}
.communs:hover .forme #co-2 {
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.communs:hover .forme #co-3 {
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  transform: scale(1);
}
.communs:hover .forme #co-4 {
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  transform: scale(1);
}

.chrono .forme {
  z-index: -1;
}
.chrono .forme #ch-1 {
  transform: rotate(0deg) scale(0.35);
  z-index: 1;
  position: absolute;
  transform-origin: center;
  transition: all 0.6s ease-in-out;
  margin-top: 10%;
}
.chrono .forme #ch-2 {
  transform: rotate(0deg) scale(0.35);
  z-index: 2;
  position: absolute;
  transform-origin: center;
  transition: all 0.6s ease-in-out;
  margin-top: 10%;
}
.chrono:hover .forme {
  overflow-x: clip;
}
.chrono:hover .forme #ch-1 {
  transform: rotate(45deg) scale(0.8);
  transform-origin: center;
  transition: all 0.8s ease-in-out;
  margin-top: -30%;
}
.chrono:hover .forme #ch-2 {
  transform: rotate(-720deg) scale(0.8);
  transform-origin: center;
  transition: all 0.8s ease-in-out;
  margin-top: -30%;
}

.usine {
  overflow: hidden;
}
.usine .header {
  padding: 0.5em 0em;
  position: absolute !important;
  margin-top: 0px;
  transition: all 0.2s ease-in-out;
}
.usine .forme {
  transition: all 0.2s ease-in-out;
  transform: scale(1, 1);
}
.usine:hover .forme {
  transition: all 0.2s ease-in-out;
  transform: scale(2, 1);
  margin-left: 100px;
}
.usine:hover .header {
  padding: 2em 0em;
  transition: all 0.2s ease-in-out;
  margin-top: 100px !important;
}

.courbes {
  overflow-x: hidden;
  position: absolute;
}
.courbes .forme {
  z-index: -1;
  overflow-x: clip;
}
.courbes .forme #c-1 {
  transform: scaleX(1);
  z-index: 1;
  position: absolute;
  transform-origin: bottom left;
  transition: all 0.4s ease-in-out;
}
.courbes .forme #c-2 {
  transform: scaleX(1);
  z-index: 1;
  position: absolute;
  transform-origin: bottom left;
  transition: all 0.2s ease-in-out;
}
.courbes .forme #c-3 {
  transform: scaleX(1);
  z-index: 3;
  position: absolute;
  transform-origin: bottom right;
  transition: all 0.3s ease-in-out;
}
.courbes:hover .forme {
  overflow-x: clip;
}
.courbes:hover .forme #c-1 {
  transform: scaleX(2.7);
  transform-origin: bottom left;
  transition: all 0.4s ease-in-out;
}
.courbes:hover .forme #c-2 {
  transform: scaleX(1.5);
  transform-origin: bottom left;
  transition: all 0.2s ease-in-out;
}
.courbes:hover .forme #c-3 {
  transform: scaleX(2);
  transform-origin: bottom right;
  transition: all 0.3s ease-in-out;
}

.here {
  overflow: hidden;
  position: absolute;
}
.here .forme {
  z-index: -2;
}
.here .forme #h1 {
  transform: scale(0.6) rotate(90deg);
  margin-top: -100px;
  transition: all 0.3s ease-in-out;
  transform-origin: center right;
}
.here .forme #h2,
.here .forme #h3,
.here .forme #h4,
.here .forme #h5 {
  transform: scale(0);
  position: absolute;
  transform-origin: center;
  margin-left: -50px;
}
.here .forme #h2 {
  transition: all 0.3s ease-in-out;
}
.here .forme #h3 {
  transition: all 0.5s ease-in-out;
}
.here .forme #h4 {
  transition: all 0.4s ease-in-out;
}
.here .forme #h5 {
  transition: all 0.7s ease-in-out;
}
.here:hover .forme #h1 {
  transform: scale(1.2);
  transition: all 0.3s ease-in-out;
}
.here:hover .forme #h2 {
  transition: all 0.3s ease-in-out;
  transform: scale(0.7);
  transform-origin: center;
}
.here:hover .forme #h3 {
  transition: all 0.5s ease-in-out;
  transform: scale(0.7);
  transform-origin: center;
}
.here:hover .forme #h4 {
  transition: all 0.4s ease-in-out;
  transform: scale(0.7);
  transform-origin: center;
}
.here:hover .forme #h5 {
  transition: all 0.7s ease-in-out;
  transform: scale(0.7);
  transform-origin: center;
}

.camembert .forme {
  z-index: -1;
  overflow-x: clip;
}
.camembert .forme #cm-1 {
  transform: rotate(-180deg);
  z-index: 1;
  position: absolute;
  transform-origin: center;
  transition: all 0.7s ease-in-out;
}
.camembert .forme #cm-2 {
  transform: rotate(20deg);
  z-index: 2;
  position: absolute;
  transform-origin: center;
  transition: all 0.6s ease-in-out;
}
.camembert .forme #cm-3 {
  transform: rotate(-260deg);
  z-index: 3;
  position: absolute;
  transform-origin: center;
  transition: all 1s ease-in-out;
}
.camembert:hover .forme {
  overflow-x: clip;
}
.camembert:hover .forme #cm-1 {
  transform: rotate(180deg);
  transform-origin: center;
  transition: all 0.7s ease-in-out;
}
.camembert:hover .forme #cm-2 {
  transform: rotate(-20deg);
  transform-origin: center;
  transition: all 0.6s ease-in-out;
}
.camembert:hover .forme #cm-3 {
  transform: rotate(260deg);
  transform-origin: center;
  transition: all 1s ease-in-out;
}

.flex-box {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  margin-right: -17px;
  overflow-x: hidden;
  padding-left: 17px;
  width: 100vw;
  overflow-y: scroll;
}

.head_close {
  display: flex;
  background: transparent;
  justify-content: flex-end;
  align-content: flex-start;
  align-items: flex-start;
  padding-right: 1.15em;
  margin-bottom: -32px;
}
.head_close .close, .head_close .fullscreen {
  background: inherit;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.25s ease-in-out;
  z-index: 2;
}
.head_close .close:hover, .head_close .fullscreen:hover {
  transition: all 0.25s ease-in-out;
  color: #00dab0;
}
.head_close .close {
  margin-top: 0.15em;
  font-family: "HKGrotesk-Bold";
  margin-left: 0.4em;
}
.head_close .fullscreen {
  margin-top: 0.15em;
  font-family: "HKGrotesk-Bold";
  margin-right: 0.4em;
}
.head_close .coda {
  font-family: "HKGrotesk-Bold";
}

#box-bottom .head_close {
  background: transparent;
  position: absolute;
  right: 0;
  z-index: 2;
  cursor: pointer;
  font-family: "HKGrotesk-Bold";
  font-size: 22px;
  margin-top: 0.5em;
}
#box-bottom .head_close .close:hover,
#box-bottom .head_close .fullscreen:hover {
  color: white;
}
#box-bottom .head_close .coda:hover {
  color: #3e0a51;
}
#box-bottom .prev {
  margin-right: 1em;
}

#box-left {
  background: white;
  display: none;
  max-height: 100vh;
  max-width: 40%;
  overflow: hidden;
  z-index: 2;
  width: auto;
}
#box-left .coda {
  margin-top: 0.2em;
  z-index: 1;
}

#box-bottom {
  display: none;
  background: #00dab0;
  transition: all 1s ease-in-out;
  z-index: 2;
  overflow: hidden;
}
#box-bottom.open_info {
  margin-top: 60%;
}

#box-top {
  display: none;
  background: #3e0a51;
  overflow: hidden;
  max-height: 50%;
  z-index: 5;
  max-height: 50%;
}
#box-top .head_close {
  color: white;
  width: 99%;
  /* background: red; */
  z-index: 12;
  position: absolute;
}
#box-top .head_close .close:hover,
#box-top .head_close .fullscreen.hover {
  color: #00dab0;
}
#box-top .coda {
  margin-top: 0.2em;
  z-index: 1;
}
#box-top .coda:hover {
  color: white;
}

#box-right {
  height: 100vh;
  max-width: 30%;
  min-width: 25%;
  background: #00dab0;
  border-left: 1px solid;
  display: none;
  overflow: hidden;
  z-index: 100;
  width: auto;
}
#box-right .head_close .close:hover,
#box-right .head_close .fullscreen:hover {
  color: #00dab0;
}
#box-right .head_close .coda {
  color: #3e0a51;
  margin-top: 0.2em;
  z-index: 1;
}

#box-edito {
  display: none;
}

#box-left.box-reader.reader-left {
  animation: slideLeft-in 0.5s forwards;
  -webkit-animation: slideLeft-in 0.5s forwards;
}

@keyframes slideLeft-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
#box-right.box-reader.reader-right {
  background: white;
  animation: slideRight-in 0.5s forwards;
  -webkit-animation: slideRight-in 0.5s forwards;
}

@keyframes slideRight-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
#box-top.box-reader.reader-top {
  animation: slideTop-in 0.5s forwards;
  -webkit-animation: slideTop-in 0.5s forwards;
}

@keyframes slideTop-in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
#box-bottom.box-reader.reader-bottom {
  animation: slideBottom-in 0.5s forwards;
  -webkit-animation: slideBottom-in 0.5s forwards;
}

@keyframes slideBottom-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
.box-reader:not(#box-top) > .content {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
}
.box-reader:not(#box-top) .header > .content {
  padding: 1.15em 1.15em 1.15em 0;
}

#box-left .header, #box-right .header {
  position: sticky;
  height: auto;
  margin-bottom: 1em;
  top: 0vh;
  display: block;
}

#box-top .header {
  top: 0px;
  position: absolute;
  background: #3e0a51;
}

#box-left h1 {
  padding-bottom: 20px;
}

#box-left h1,
#box-top h1 {
  font-family: "HKGrotesk-Bold";
  font-size: 2em;
  -webkit-text-decoration: underline 0.07em;
          text-decoration: underline 0.07em;
  line-height: normal;
  margin-bottom: 0;
  position: sticky;
  font-weight: normal;
  transition: font-size 2s;
}
#box-left details summary::-webkit-details-marker, #box-left details summary::marker,
#box-top details summary::-webkit-details-marker,
#box-top details summary::marker {
  display: none;
}
#box-left details summary:focus,
#box-top details summary:focus {
  outline: none;
}

.open {
  transition: ease-in-out 0.2s;
}

.box-fullscreen .background-content {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-bottom: -4em;
}

.background-content_texte {
  background: #f7f1e7;
}

.background-content_court-metrage,
.background-content_court-metrage-2,
.background-content_cycle-conferences,
.background-content_outil-pedagogique {
  background: #d9e8ff;
}

.background-content_ressource {
  background: #00dab0;
}

.reader_texte {
  padding: 1em;
  background: white;
}
.reader_texte .header h1 {
  background: white;
  text-decoration-color: #00dab0 !important;
  top: 0;
  margin-top: 0;
}
.reader_texte .date,
.reader_texte span {
  color: #00dab0 !important;
  font-family: "Redaction-Regular";
  font-size: 0.8em;
  line-height: 1.6em;
}
.reader_texte .date:before,
.reader_texte span:before {
  -webkit-text-stroke: 1px #3e0a51;
  color: #00dab0;
  content: "•";
  font-family: "HKGrotesk-Medium";
  font-size: 2em;
  padding-right: 1vw;
  text-shadow: -2px 2px #3e0a51;
}
.reader_texte .content {
  font-family: "HKGrotesk-Medium";
  line-height: 1.265em;
}
.reader_texte .content h2 {
  font-family: "HKGrotesk-Bold";
  font-size: 1.725em;
  line-height: 1.15em;
  margin-bottom: 0.5em;
  margin-top: 1em;
}
.reader_texte .content p {
  font-family: "HKGrotesk-Medium";
  font-size: 1em;
  line-height: 1.15em;
  text-indent: 2em;
  width: 90%;
  margin: 0px;
}
.reader_texte .content p:nth-of-type(1) {
  text-indent: 0px;
}
.reader_texte .content p sup {
  vertical-align: super;
  color: #00dab0;
  font-size: 0.575em;
}
.reader_texte .content p sup a {
  color: #00dab0;
  text-decoration: none;
}
.reader_texte .content p em {
  font-family: "HKGrotesk-MediumItalic";
  font-style: normal;
}
.reader_texte .content blockquote {
  color: #00dab0;
  font-family: "Redaction-Italic";
  font-size: 1.725em;
  line-height: 1.15em;
  margin: 1em auto;
  text-align: center;
  width: 70%;
}
.reader_texte .content blockquote span {
  font-size: 0.5em;
  vertical-align: super;
}
.reader_texte .content blockquote span:before {
  content: "";
}
.reader_texte .content ul {
  border-radius: 5px;
  border: 1px solid #00dab0;
  box-shadow: -2px 2px #00dab0;
  color: #3e0a51;
  background: #f7f1e7;
  font-family: "Redaction-Regular";
  font-size: 0.9583333333em;
  line-height: 1.4em;
  margin: 2em 0 2em 2em;
  padding: 1em;
  width: 50%;
}
.reader_texte .content ul li {
  list-style: none;
}
.reader_texte .content .footnote hr {
  color: #3e0a51;
}
.reader_texte .content .footnote ol {
  margin-left: 2em;
  font-size: 0.7em;
}
.reader_texte .content .footnote ol li {
  list-style: decimal;
}
.reader_texte .content .footnote ol li::marker {
  color: #00dab0;
}
.reader_texte .content .footnote ol li a {
  color: #00dab0;
}
.reader_texte .content img {
  margin-bottom: 2vh;
  margin-top: 2vh;
  width: 95%;
}

.reader_documentaire-primaire {
  padding: 1em;
  background: #3e0a51;
  color: white;
  height: 50vh;
  top: 0;
  width: 100%;
  z-index: 2;
  overflow-y: scroll;
}
.reader_documentaire-primaire .header {
  width: 50%;
}
.reader_documentaire-primaire .date {
  display: none;
}
.reader_documentaire-primaire h1 {
  text-decoration-color: #00dab0 !important;
  position: sticky;
  display: inline-block;
  font-weight: normal;
  margin-top: 0;
}
.reader_documentaire-primaire h2 {
  font-family: "HKGrotesk-Medium";
  width: auto;
  margin-top: 2vh;
  padding-left: 2em;
  margin-bottom: 2vh;
  color: #00dab0;
  font-size: 1em;
  display: inline-block;
}
.reader_documentaire-primaire h3 {
  margin-bottom: 0.575em;
  margin-top: 0.575em;
  width: auto;
  font-family: "HKGrotesk-bold";
}
.reader_documentaire-primaire h3:before {
  -webkit-text-stroke: 1px #00dab0;
  color: white;
  content: "•";
  font-size: 2em;
  font-family: "HKGrotesk-Medium";
  float: left;
  padding-right: 1vw;
  text-shadow: -2px 2px #00dab0;
  transition: ease-in-out 0.2s;
}
.reader_documentaire-primaire .flex-box {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin-right: -17px;
  overflow-x: auto;
  padding-left: 17px;
  margin-top: 5%;
  width: 100vw;
}
.reader_documentaire-primaire .info-primaires {
  order: 1;
  color: white;
  height: 100%;
  width: 40vw;
}
.reader_documentaire-primaire .info-primaires details {
  font-family: "HKGrotesk-Medium";
  width: 90%;
  line-height: 1.15em;
  margin-top: 2vh;
}
.reader_documentaire-primaire .info-primaires details:nth-of-type(1) {
  color: white !important;
  background: #3e0a51 !important;
}
.reader_documentaire-primaire .info-primaires details:nth-of-type(1) summary {
  background: #3e0a51 !important;
  border-radius: 0px !important;
  border: 0px solid #3e0a51 !important;
  box-shadow: 0px 0px #3e0a51 !important;
  color: white !important;
  padding: 0em !important;
}
.reader_documentaire-primaire .info-primaires details:nth-of-type(1) summary:hover {
  text-decoration: underline;
}
.reader_documentaire-primaire .info-primaires details:nth-of-type(1)[open] {
  color: white !important;
  background: #3e0a51 !important;
  border-radius: 0px !important;
  border: 0px solid #3e0a51 !important;
  box-shadow: 0px 0px #3e0a51 !important;
  padding: 0em !important;
}
.reader_documentaire-primaire .info-primaires details summary {
  background: white;
  border-radius: 10px;
  border: 1px solid #00dab0;
  box-shadow: -2px 2px #00dab0;
  color: #3e0a51;
  padding: 0.5em;
  font-family: "HKGrotesk-Bold";
  width: 60%;
  cursor: pointer;
  list-style: none;
}
.reader_documentaire-primaire .info-primaires details summary:after {
  content: " ↓";
  color: #00dab0;
  font-size: 1.15em;
  font-family: "HKGrotesk-bold";
}
.reader_documentaire-primaire .info-primaires details summary:hover {
  color: white;
  background: #00dab0;
  border: 1px solid white;
  box-shadow: -2px 2px white;
}
.reader_documentaire-primaire .info-primaires details[open] {
  background: white;
  border-radius: 10px;
  border: 1px solid #00dab0;
  box-shadow: -2px 2px #00dab0;
  color: #3e0a51;
  padding: 1em;
}
.reader_documentaire-primaire .info-primaires details[open] a {
  color: #3e0a51;
}
.reader_documentaire-primaire .info-primaires details[open] summary {
  background: white;
  border-radius: 10px;
  border: 0 solid #3e0a51;
  box-shadow: 0 0 white;
  color: #3e0a51;
  padding: 0;
  margin-bottom: 1.5vh;
}
.reader_documentaire-primaire .info-primaires details[open] summary:after {
  content: " ↑";
}
.reader_documentaire-primaire .info-primaires details[open] summary:hover {
  color: #00dab0;
}
.reader_documentaire-primaire .info-primaires ul {
  list-style: none;
  font-family: "redaction-regular";
  margin-top: 2vh;
  line-height: 1.3em;
  font-size: 0.7666666667em;
  border-top: 1px solid #00dab0;
  color: #00dab0;
  padding-top: 2vh;
  padding-left: 0px;
  width: 50%;
  height: 100%;
}
.reader_documentaire-primaire .info-primaires ul li {
  display: inline;
}
.reader_documentaire-primaire .info-primaires ul li strong {
  font-family: "Redaction-Bold";
  font-variant: small-caps;
  text-transform: lowercase;
  color: white;
  letter-spacing: 0.02em;
}
.reader_documentaire-primaire .info-primaires ul li:after {
  content: " | ";
}
.reader_documentaire-primaire .info-primaires ul li:nth-last-of-type(1) {
  display: block;
  margin-top: 2vh;
}
.reader_documentaire-primaire .info-primaires ul li:nth-last-of-type(1) em {
  font-family: "HKGrotesk-BoldItalic";
  font-style: normal;
}
.reader_documentaire-primaire .info-primaires ul li:nth-last-of-type(1):after {
  content: "";
}
.reader_documentaire-primaire .info-primaires ul li:nth-last-of-type(1):after {
  content: " ";
}
.reader_documentaire-primaire .info-primaires ul li a {
  color: #00dab0;
  text-decoration: underline;
}
.reader_documentaire-primaire .info-primaires ul li a:hover {
  color: white;
  text-decoration: none;
}
.reader_documentaire-primaire .info-primaires p {
  padding-left: 0.575em;
  padding-right: 0.575em;
  margin-left: 0px;
  margin-top: 0;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-family: "HKGrotesk-Medium";
  font-size: 1em;
  line-height: 1.15em;
  text-indent: 2em;
}
.reader_documentaire-primaire .info-primaires p a {
  text-decoration: underline;
}
.reader_documentaire-primaire .info-primaires p a:hover {
  color: #00dab0;
}
.reader_documentaire-primaire .info-primaires p strong {
  font-family: "HKGrotesk-Bold";
  font-weight: normal;
  text-decoration: underline;
}
.reader_documentaire-primaire .info-primaires p em {
  font-family: "HKGrotesk-MediumItalic";
  color: #f0d4fd;
  font-style: normal;
}
.reader_documentaire-primaire iframe {
  position: fixed;
  order: 2;
  top: 0;
  right: 0;
}

.reader_cycle-conferences,
.reader_outil-pedagogique,
.reader_court-metrage,
.reader_court-metrage-2 {
  background: #f0d4fd;
  color: #3e0a51;
  padding: 1em;
  min-height: 100%;
  height: auto;
  z-index: 2;
}
.reader_cycle-conferences .header,
.reader_outil-pedagogique .header,
.reader_court-metrage .header,
.reader_court-metrage-2 .header {
  background: #f0d4fd;
}
.reader_cycle-conferences .header h1,
.reader_outil-pedagogique .header h1,
.reader_court-metrage .header h1,
.reader_court-metrage-2 .header h1 {
  color: #3e0a51;
  font-size: 1.4em;
  line-height: normal;
  -webkit-text-decoration: underline 0.07em white;
          text-decoration: underline 0.07em white;
  text-decoration-color: white !important;
  margin-bottom: 2vh;
  margin-top: 0;
  width: auto;
  display: inline-flex;
  font-weight: normal;
}
.reader_cycle-conferences .header h2,
.reader_outil-pedagogique .header h2,
.reader_court-metrage .header h2,
.reader_court-metrage-2 .header h2 {
  font-family: "HKGrotesk-Medium";
  width: auto;
  margin-top: 2vh;
  padding-left: 2em;
  margin-bottom: 2vh;
  padding-left: 2em;
  color: white;
  font-size: 1em;
  display: inline-flex;
}
.reader_cycle-conferences .date,
.reader_outil-pedagogique .date,
.reader_court-metrage .date,
.reader_court-metrage-2 .date {
  display: none;
}
.reader_cycle-conferences .info-primaires,
.reader_outil-pedagogique .info-primaires,
.reader_court-metrage .info-primaires,
.reader_court-metrage-2 .info-primaires {
  font-family: "HKGrotesk-Medium";
  margin-left: 1vw;
}
.reader_cycle-conferences .info-primaires strong,
.reader_outil-pedagogique .info-primaires strong,
.reader_court-metrage .info-primaires strong,
.reader_court-metrage-2 .info-primaires strong {
  font-family: "HKGrotesk-Bold";
  font-weight: normal;
}
.reader_cycle-conferences .info-primaires em,
.reader_outil-pedagogique .info-primaires em,
.reader_court-metrage .info-primaires em,
.reader_court-metrage-2 .info-primaires em {
  font-family: "HKGrotesk-MediumItalic";
  font-style: normal;
}
.reader_cycle-conferences .info-primaires h3 a,
.reader_cycle-conferences .info-primaires h4 a,
.reader_outil-pedagogique .info-primaires h3 a,
.reader_outil-pedagogique .info-primaires h4 a,
.reader_court-metrage .info-primaires h3 a,
.reader_court-metrage .info-primaires h4 a,
.reader_court-metrage-2 .info-primaires h3 a,
.reader_court-metrage-2 .info-primaires h4 a {
  color: #3e0a51;
}
.reader_cycle-conferences .info-primaires h3 a:hover,
.reader_cycle-conferences .info-primaires h4 a:hover,
.reader_outil-pedagogique .info-primaires h3 a:hover,
.reader_outil-pedagogique .info-primaires h4 a:hover,
.reader_court-metrage .info-primaires h3 a:hover,
.reader_court-metrage .info-primaires h4 a:hover,
.reader_court-metrage-2 .info-primaires h3 a:hover,
.reader_court-metrage-2 .info-primaires h4 a:hover {
  color: white;
}
.reader_cycle-conferences .info-primaires h3,
.reader_outil-pedagogique .info-primaires h3,
.reader_court-metrage .info-primaires h3,
.reader_court-metrage-2 .info-primaires h3 {
  font-family: "HKGrotesk-Bold";
  margin-bottom: 2vh;
  margin-top: 2vh;
  width: 90%;
  line-height: 1.15em;
}
.reader_cycle-conferences .info-primaires h4,
.reader_outil-pedagogique .info-primaires h4,
.reader_court-metrage .info-primaires h4,
.reader_court-metrage-2 .info-primaires h4 {
  font-weight: normal;
  width: 60%;
  margin-top: 1vh;
  border-top: 1px solid;
  padding-top: 2vh;
  line-height: 1.15em;
}
.reader_cycle-conferences .info-primaires h4:before,
.reader_outil-pedagogique .info-primaires h4:before,
.reader_court-metrage .info-primaires h4:before,
.reader_court-metrage-2 .info-primaires h4:before {
  content: "•";
  font-family: "HKGrotesk-Medium";
  color: white;
  -webkit-text-stroke: 1px #3e0a51;
  text-shadow: -2px 2px #3e0a51;
  float: left;
  font-size: 2em;
  padding-right: 0.5em;
}
.reader_cycle-conferences .info-primaires h4:nth-last-of-type(1),
.reader_outil-pedagogique .info-primaires h4:nth-last-of-type(1),
.reader_court-metrage .info-primaires h4:nth-last-of-type(1),
.reader_court-metrage-2 .info-primaires h4:nth-last-of-type(1) {
  border-bottom: 0px;
}
.reader_cycle-conferences .info-primaires h4 strong,
.reader_outil-pedagogique .info-primaires h4 strong,
.reader_court-metrage .info-primaires h4 strong,
.reader_court-metrage-2 .info-primaires h4 strong {
  font-family: "HKGrotesk-Bold";
  text-decoration: underline;
  text-decoration-color: white;
}
.reader_cycle-conferences .info-primaires ul,
.reader_outil-pedagogique .info-primaires ul,
.reader_court-metrage .info-primaires ul,
.reader_court-metrage-2 .info-primaires ul {
  list-style: none;
  font-family: "redaction-regular";
  margin-top: 2vh;
  line-height: 1.3em;
  font-size: 0.7666666667em;
  border-top: 1px solid white;
  color: #3e0a51;
  padding-top: 2vh;
  width: 60%;
  padding-left: 0;
}
.reader_cycle-conferences .info-primaires ul li,
.reader_outil-pedagogique .info-primaires ul li,
.reader_court-metrage .info-primaires ul li,
.reader_court-metrage-2 .info-primaires ul li {
  display: inline;
}
.reader_cycle-conferences .info-primaires ul li strong,
.reader_outil-pedagogique .info-primaires ul li strong,
.reader_court-metrage .info-primaires ul li strong,
.reader_court-metrage-2 .info-primaires ul li strong {
  font-family: "Redaction-Bold";
  font-variant: small-caps;
  text-transform: lowercase;
  color: #00dab0;
  letter-spacing: 0.02em;
}
.reader_cycle-conferences .info-primaires ul li:before,
.reader_outil-pedagogique .info-primaires ul li:before,
.reader_court-metrage .info-primaires ul li:before,
.reader_court-metrage-2 .info-primaires ul li:before {
  content: " | ";
}
.reader_cycle-conferences .info-primaires ul li:nth-last-of-type(1),
.reader_outil-pedagogique .info-primaires ul li:nth-last-of-type(1),
.reader_court-metrage .info-primaires ul li:nth-last-of-type(1),
.reader_court-metrage-2 .info-primaires ul li:nth-last-of-type(1) {
  display: block;
  margin-top: 2vh;
}
.reader_cycle-conferences .info-primaires ul li:nth-last-of-type(1) em,
.reader_outil-pedagogique .info-primaires ul li:nth-last-of-type(1) em,
.reader_court-metrage .info-primaires ul li:nth-last-of-type(1) em,
.reader_court-metrage-2 .info-primaires ul li:nth-last-of-type(1) em {
  font-family: "HKGrotesk-BoldItalic";
  font-style: normal;
}
.reader_cycle-conferences .info-primaires ul li:nth-last-of-type(1):after,
.reader_outil-pedagogique .info-primaires ul li:nth-last-of-type(1):after,
.reader_court-metrage .info-primaires ul li:nth-last-of-type(1):after,
.reader_court-metrage-2 .info-primaires ul li:nth-last-of-type(1):after {
  content: "";
}
.reader_cycle-conferences .info-primaires ul li:nth-last-of-type(1):after,
.reader_outil-pedagogique .info-primaires ul li:nth-last-of-type(1):after,
.reader_court-metrage .info-primaires ul li:nth-last-of-type(1):after,
.reader_court-metrage-2 .info-primaires ul li:nth-last-of-type(1):after {
  content: " ";
}
.reader_cycle-conferences .info-primaires p,
.reader_outil-pedagogique .info-primaires p,
.reader_court-metrage .info-primaires p,
.reader_court-metrage-2 .info-primaires p {
  font-family: "HKGrotesk-Medium";
  font-size: 1em;
  line-height: 1.15em;
  margin-bottom: 0em;
  margin-top: 0;
  text-indent: 2em;
  width: 90%;
}
.reader_cycle-conferences .info-primaires p:nth-of-type(1),
.reader_outil-pedagogique .info-primaires p:nth-of-type(1),
.reader_court-metrage .info-primaires p:nth-of-type(1),
.reader_court-metrage-2 .info-primaires p:nth-of-type(1) {
  margin-top: 3vh;
  text-indent: 0px;
}
.reader_cycle-conferences .info-primaires p a,
.reader_outil-pedagogique .info-primaires p a,
.reader_court-metrage .info-primaires p a,
.reader_court-metrage-2 .info-primaires p a {
  font-family: "HKGrotesk-MediumItalic";
  margin: 0;
  padding: 0;
  text-decoration: underline;
}
.reader_cycle-conferences .info-primaires p a:hover,
.reader_outil-pedagogique .info-primaires p a:hover,
.reader_court-metrage .info-primaires p a:hover,
.reader_court-metrage-2 .info-primaires p a:hover {
  background: #3e0a51;
  color: #f0d4fd;
  font-family: "HKGrotesk-Medium";
}
.reader_cycle-conferences .info-primaires p a em,
.reader_outil-pedagogique .info-primaires p a em,
.reader_court-metrage .info-primaires p a em,
.reader_court-metrage-2 .info-primaires p a em {
  color: #3e0a51 !important;
}
.reader_cycle-conferences .info-primaires p a em:hover,
.reader_outil-pedagogique .info-primaires p a em:hover,
.reader_court-metrage .info-primaires p a em:hover,
.reader_court-metrage-2 .info-primaires p a em:hover {
  color: white !important;
}
.reader_cycle-conferences .info-primaires p img,
.reader_outil-pedagogique .info-primaires p img,
.reader_court-metrage .info-primaires p img,
.reader_court-metrage-2 .info-primaires p img {
  border-radius: 10px;
  margin-top: 1vh;
  width: 75%;
}
.reader_cycle-conferences .info-primaires p .partenaires,
.reader_outil-pedagogique .info-primaires p .partenaires,
.reader_court-metrage .info-primaires p .partenaires,
.reader_court-metrage-2 .info-primaires p .partenaires {
  filter: grayscale(1);
}
.reader_cycle-conferences .info-primaires details,
.reader_outil-pedagogique .info-primaires details,
.reader_court-metrage .info-primaires details,
.reader_court-metrage-2 .info-primaires details {
  font-family: "HKGrotesk-Medium";
  width: 90%;
  line-height: 1.15em;
  margin-top: 2vh;
}
.reader_cycle-conferences .info-primaires details summary,
.reader_outil-pedagogique .info-primaires details summary,
.reader_court-metrage .info-primaires details summary,
.reader_court-metrage-2 .info-primaires details summary {
  background: white;
  border-radius: 10px;
  border: 1px solid #3e0a51;
  box-shadow: -2px 2px #3e0a51;
  color: #3e0a51;
  padding: 0.5em;
  font-family: "HKGrotesk-Bold";
  width: 50%;
  cursor: pointer;
  list-style: none;
}
.reader_cycle-conferences .info-primaires details summary:after,
.reader_outil-pedagogique .info-primaires details summary:after,
.reader_court-metrage .info-primaires details summary:after,
.reader_court-metrage-2 .info-primaires details summary:after {
  content: " ↓";
  color: #00dab0;
  font-size: 1.15em;
  font-family: "HKGrotesk-bold";
}
.reader_cycle-conferences .info-primaires details summary:hover,
.reader_outil-pedagogique .info-primaires details summary:hover,
.reader_court-metrage .info-primaires details summary:hover,
.reader_court-metrage-2 .info-primaires details summary:hover {
  color: white;
  background: #3e0a51;
  border: 1px solid white;
  box-shadow: -2px 2px white;
}
.reader_cycle-conferences .info-primaires details[open],
.reader_outil-pedagogique .info-primaires details[open],
.reader_court-metrage .info-primaires details[open],
.reader_court-metrage-2 .info-primaires details[open] {
  background: white;
  border-radius: 10px;
  border: 1px solid #3e0a51;
  box-shadow: -2px 2px #3e0a51;
  color: #3e0a51;
  padding: 1em;
}
.reader_cycle-conferences .info-primaires details[open] a,
.reader_outil-pedagogique .info-primaires details[open] a,
.reader_court-metrage .info-primaires details[open] a,
.reader_court-metrage-2 .info-primaires details[open] a {
  color: #3e0a51;
}
.reader_cycle-conferences .info-primaires details[open] a:hover,
.reader_outil-pedagogique .info-primaires details[open] a:hover,
.reader_court-metrage .info-primaires details[open] a:hover,
.reader_court-metrage-2 .info-primaires details[open] a:hover {
  color: #f0d4fd;
  background: white;
  text-decoration: none;
}
.reader_cycle-conferences .info-primaires details[open] summary,
.reader_outil-pedagogique .info-primaires details[open] summary,
.reader_court-metrage .info-primaires details[open] summary,
.reader_court-metrage-2 .info-primaires details[open] summary {
  background: white;
  border-radius: 10px;
  border: 0 solid #3e0a51;
  box-shadow: 0 0 white;
  color: #3e0a51;
  padding: 0;
  margin-bottom: 1.5vh;
}
.reader_cycle-conferences .info-primaires details[open] summary:after,
.reader_outil-pedagogique .info-primaires details[open] summary:after,
.reader_court-metrage .info-primaires details[open] summary:after,
.reader_court-metrage-2 .info-primaires details[open] summary:after {
  content: " ↑";
}
.reader_cycle-conferences .info-primaires details[open] summary:hover,
.reader_outil-pedagogique .info-primaires details[open] summary:hover,
.reader_court-metrage .info-primaires details[open] summary:hover,
.reader_court-metrage-2 .info-primaires details[open] summary:hover {
  color: #00dab0;
}
.reader_cycle-conferences .info-primaires .capsules,
.reader_outil-pedagogique .info-primaires .capsules,
.reader_court-metrage .info-primaires .capsules,
.reader_court-metrage-2 .info-primaires .capsules {
  margin-top: 2vh;
  margin-bottom: 2vh;
  border-radius: 15px;
  display: block;
}
.reader_cycle-conferences .info-primaires .capsules:nth-of-type(odd),
.reader_outil-pedagogique .info-primaires .capsules:nth-of-type(odd),
.reader_court-metrage .info-primaires .capsules:nth-of-type(odd),
.reader_court-metrage-2 .info-primaires .capsules:nth-of-type(odd) {
  right: 0;
}

.reader_episode-podcast .player_episode-podcast {
  margin: 0;
  width: 100%;
}
.reader_episode-podcast .shadow-box {
  position: fixed;
  margin-top: 60px;
  /* background: red; */
  width: 100%;
  height: 150px;
  z-index: 10;
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, #00dab0 90%);
}
.reader_episode-podcast #player_source {
  display: none;
}
.reader_episode-podcast .down {
  height: 5vh;
}
.reader_episode-podcast .date {
  display: none;
}
.reader_episode-podcast .info {
  overflow-y: scroll;
  width: 100%;
  height: calc(100% - 50px);
}
.reader_episode-podcast .info h1 {
  margin-bottom: 0.575em;
  margin-left: 1.15em;
  padding-left: 0.575em;
  margin-top: 0;
  top: -1vh;
  width: 100%;
  font-weight: normal;
  font-family: "HKGrotesk-Bold";
  font-size: 1.75em;
  -webkit-text-decoration: underline 0.07em;
          text-decoration: underline 0.07em;
  text-decoration-color: white !important;
  line-height: normal;
  top: 0;
}
.reader_episode-podcast .info h1 em {
  font-family: "HKGrotesk-MediumItalic";
  font-style: normal;
}
.reader_episode-podcast .info h1 em sup {
  vertical-align: super;
  font-size: 0.575em;
  padding-left: 0.5em;
}
.reader_episode-podcast .info .link-logo {
  margin-left: 1.15em;
  padding-left: 1.15em;
}
.reader_episode-podcast .info .link-logo img {
  height: 30px;
  margin-right: 10px;
}
.reader_episode-podcast .info .link-logo .deezer {
  width: 2.25%;
  height: 5.5%;
}
.reader_episode-podcast .info .link-logo .apple {
  width: 2%;
  height: 6%;
}
.reader_episode-podcast .info .link-logo .spoty, .reader_episode-podcast .info .link-logo .soundcloud, .reader_episode-podcast .info .link-logo .rss {
  width: 3%;
  height: auto;
}
.reader_episode-podcast .info .link-logo svg {
  fill: #3e0a51;
  padding-left: 0.575em;
}
.reader_episode-podcast .info .link-logo svg:hover {
  fill: white;
}
.reader_episode-podcast .info ul {
  list-style: none;
  font-family: "redaction-regular";
  margin-top: 2vh;
  line-height: 1.3em;
  font-size: 0.7666666667em;
  border-top: 1px solid #3e0a51;
  padding-top: 2vh;
  padding-left: 0px;
}
.reader_episode-podcast .info ul li {
  display: inline;
}
.reader_episode-podcast .info ul li strong {
  font-family: "Redaction-Bold";
  font-variant: small-caps;
  text-transform: lowercase;
  color: white;
  letter-spacing: 0.02em;
}
.reader_episode-podcast .info ul li:after {
  content: " | ";
}
.reader_episode-podcast .info ul li:nth-last-of-type(1) {
  display: block;
  margin-top: 2vh;
}
.reader_episode-podcast .info ul li:nth-last-of-type(1) em {
  font-family: "HKGrotesk-BoldItalic";
  font-style: normal;
}
.reader_episode-podcast .info ul li:nth-last-of-type(1) a {
  color: #3e0a51;
  text-decoration: underline;
}
.reader_episode-podcast .info ul li:nth-last-of-type(1) a:hover {
  color: white;
  text-decoration: none;
}
.reader_episode-podcast .info ul li:nth-last-of-type(1):after {
  content: "";
}
.reader_episode-podcast .info .texte h2 {
  font-family: "HKGrotesk-MediumItalic";
  width: auto;
  font-size: 1.2em;
}
.reader_episode-podcast .info .texte a,
.reader_episode-podcast .info .texte h3 {
  width: auto;
  font-family: "HKGrotesk-bold";
}
.reader_episode-podcast .info .texte a::before,
.reader_episode-podcast .info .texte h3::before {
  content: "•";
  font-family: "HKGrotesk-Medium";
  color: white;
  font-size: 2em;
  -webkit-text-stroke: 1px #3e0a51;
  text-shadow: -2px 2px #3e0a51;
  transition: ease-in-out 0.2s;
  float: left;
}
.reader_episode-podcast .info .texte h3::before {
  padding-right: 1vw;
}
.reader_episode-podcast .info .texte a::before {
  padding-right: 0;
}
.reader_episode-podcast .info .texte a:hover {
  -webkit-text-decoration: underline #3e0a51 0.05em;
          text-decoration: underline #3e0a51 0.05em;
  color: white;
  font-family: "HKGrotesk-Medium";
}
.reader_episode-podcast .info .texte p {
  font-family: "HKGrotesk-Medium";
  font-size: 1em;
  line-height: 1.15em;
  margin-bottom: 0px;
  margin-top: 0px;
  text-indent: 2em;
}
.reader_episode-podcast .info .texte p:nth-of-type(1) {
  text-indent: 0px;
}
.reader_episode-podcast .info .texte p em {
  font-family: "HKGrotesk-MediumItalic";
  font-style: normal;
}
.reader_episode-podcast .info .texte p strong {
  font-family: "HKGrotesk-Bold";
  font-weight: normal;
}
.reader_episode-podcast .info .texte details {
  font-family: "HKGrotesk-Medium";
  width: 50%;
  line-height: 1.15em;
  margin-top: 2vh;
}
.reader_episode-podcast .info .texte details summary {
  background: white;
  border-radius: 10px;
  border: 1px solid #3e0a51;
  box-shadow: -2px 2px #3e0a51;
  color: #3e0a51;
  padding: 0.5em;
  font-family: "HKGrotesk-Bold";
  width: 50%;
  cursor: pointer;
  list-style: none;
}
.reader_episode-podcast .info .texte details summary:after {
  content: " ↓";
  color: #00dab0;
  font-size: 1.15em;
  font-family: "HKGrotesk-bold";
}
.reader_episode-podcast .info .texte details summary:hover {
  color: white;
  background: #3e0a51;
  border: 1px solid white;
  box-shadow: -2px 2px white;
}
.reader_episode-podcast .info .texte details[open] {
  background: white;
  border-radius: 10px;
  border: 1px solid #3e0a51;
  box-shadow: -2px 2px #3e0a51;
  color: #3e0a51;
  padding: 1em;
}
.reader_episode-podcast .info .texte details[open] summary {
  background: white;
  border-radius: 10px;
  border: 0 solid #3e0a51;
  box-shadow: 0 0 white;
  color: #3e0a51;
  padding: 0;
  margin-bottom: 1.5vh;
}
.reader_episode-podcast .info .texte details[open] summary:after {
  content: " ↑";
}
.reader_episode-podcast .info .texte details[open] summary:hover {
  color: #00dab0;
}
.reader_episode-podcast .info .part-fat {
  width: 50%;
  padding-left: 4%;
  padding-right: 1.15em;
  height: 80%;
  padding-bottom: 20%;
}
.reader_episode-podcast .info .part-fat p {
  font-family: "HKGrotesk-Medium";
  width: 75%;
  height: auto;
}
.reader_episode-podcast .info .part-small {
  height: 79%;
  width: 19%;
  padding-left: 2%;
  line-height: 1.15em;
}
.reader_episode-podcast .info .part-small p {
  margin-top: 0px;
}
.reader_episode-podcast .info .part-small img {
  width: 100%;
  position: sticky;
  top: 0;
}

.videoDocument {
  color: white;
}
.videoDocument .date {
  display: none;
}
.videoDocument h1 {
  background: #3e0a51;
  color: white;
  font-family: "HKGrotesk-Bold";
  font-size: 1.15em;
  padding: 0.575em;
  position: sticky;
  font-weight: normal;
  top: -1vh;
}
.videoDocument h2 {
  font-family: "HKGrotesk-BoldItalic";
  font-size: 1.15em;
  line-height: 1.15em;
  padding-bottom: 0.575em;
}
.videoDocument iframe {
  height: 100%;
  margin-left: 2.3em;
  order: 2;
  width: 50%;
}
.videoDocument .info-primaires,
.videoDocument h1,
.videoDocument h2 {
  margin-left: 0.575em;
}
.videoDocument .info-primaires {
  color: white;
  height: 100%;
  order: 1;
  width: 35vw;
}
.videoDocument .info-primaires p {
  font-family: "HKGrotesk-Medium";
  font-size: 1.15em;
  line-height: 1.15em;
  padding: 0.575em;
}
.videoDocument .info-primaires p em {
  font-family: "HKGrotesk-MediumItalic";
  font-weight: normal;
}

.reader_lexique {
  right: 0;
  background: #00dab0;
  max-width: 700px;
  min-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.reader_lexique .box-mot {
  padding: 0 1em;
}
.reader_lexique h1 {
  font-family: "HKGrotesk-Bold";
  font-size: 1.2em;
  font-weight: normal;
  margin-top: 2vh;
  text-decoration: underline;
  text-decoration-color: white;
}
.reader_lexique h1 span {
  font-family: "HKGrotesk-BoldItalic";
}
.reader_lexique .header {
  display: none;
}
.reader_lexique .lexique {
  background: #00dab0;
}
.reader_lexique .content {
  overflow-y: hidden !important;
}
.reader_lexique .intro h3 {
  font-weight: normal;
  font-family: "HKGrotesk-BoldItalic";
  color: white;
  font-size: 1em;
  margin-bottom: 0;
  margin-top: 2vh;
}
.reader_lexique .intro p {
  font-family: "HKGrotesk-Medium";
  font-size: 1em;
  line-height: 1.15em;
  margin-bottom: 0em;
  margin-top: 0;
}
.reader_lexique .intro ul {
  list-style: none;
  font-family: "redaction-regular";
  margin-top: 2vh;
  line-height: 1.3em;
  font-size: 0.7666666667em;
  border-top: 1px solid white;
  color: #3e0a51;
  padding-top: 2vh;
  width: 100%;
  padding-left: 0;
}
.reader_lexique .intro ul li {
  display: inline;
}
.reader_lexique .intro ul li strong {
  font-family: "Redaction-Bold";
  font-variant: small-caps;
  text-transform: lowercase;
  color: white;
  letter-spacing: 0.02em;
}
.reader_lexique .intro ul li:after {
  content: " | ";
}
.reader_lexique .intro ul li:nth-last-of-type(1):after {
  content: " ";
}
.reader_lexique iframe {
  margin-top: 15px;
  padding-left: 0.5vw;
  width: 100%;
  height: 15vw;
}
.reader_lexique iframe:nth-of-type(1) {
  margin-top: 5vh;
}

.reader_ressource {
  background: #f7f1e7;
  z-index: 2;
  padding: 1.2em;
  line-height: 1.4em;
}
.reader_ressource .date {
  display: none;
}
.reader_ressource .header {
  background: #f7f1e7;
}
.reader_ressource .header h1 {
  color: #3e0a51;
  font-size: 2em;
  line-height: normal;
  -webkit-text-decoration: underline 0.07em #00dab0;
          text-decoration: underline 0.07em #00dab0;
  margin-bottom: 2vh;
  margin-top: 0;
  width: 100%;
  display: inline-flex;
  font-weight: normal;
}
.reader_ressource h2 {
  font-family: "Redaction-Bold";
  font-size: 1.15em;
  margin-top: 2vh;
  -webkit-text-decoration: underline #00dab0;
          text-decoration: underline #00dab0;
}
.reader_ressource h2:nth-of-type(1) {
  margin-top: 2vh;
}
.reader_ressource h3 {
  margin-top: 3vh;
  margin-bottom: 3vh;
  font-family: "Redaction-Regular";
  margin-left: 3vw;
  background: white;
  padding: 1em;
  box-shadow: -2px 2px #3e0a51;
  font-size: 0.9583333333em;
  line-height: 1.4em;
  border: 1px solid #3e0a51;
  border-radius: 5px;
  width: 80%;
}
.reader_ressource h4 {
  font-weight: normal;
  font-size: 0.9583333333em;
  font-family: "Redaction-Regular";
  margin-top: 1vh;
  padding: 0;
  margin-left: 2vw;
}
.reader_ressource h4::before {
  content: "†";
  font-family: "HKGrotesk-Medium";
  color: #f0d4fd;
  -webkit-text-stroke: 1px #3e0a51;
  text-shadow: -2px 2px #3e0a51;
  transition: ease-in-out 0.2s;
  float: left;
  padding-right: 1vw;
  font-size: 2em;
}
.reader_ressource h4:hover:before {
  content: "†";
  font-family: "HKGrotesk-Medium";
  color: #3e0a51;
  -webkit-text-stroke: 1px #f0d4fd;
  text-shadow: -2px 2px #f0d4fd;
  transition: ease-in-out 0.2s;
}
.reader_ressource h4 a {
  color: #3e0a51;
  font-family: "Redaction-Bold";
  text-decoration: underline;
}
.reader_ressource h4 a:hover {
  color: #f0d4fd;
  text-decoration: none;
}
.reader_ressource h4:nth-of-type(1) {
  margin-bottom: 0;
  margin-left: 0vw;
}
.reader_ressource ul {
  list-style: none;
  font-size: 0.9583333333em;
}
.reader_ressource ul li {
  font-family: "Redaction-Regular";
  margin-top: 1vh;
  padding: 0;
}
.reader_ressource ul li::before {
  content: "•";
  font-family: "HKGrotesk-Medium";
  color: #00dab0;
  -webkit-text-stroke: 1px #3e0a51;
  text-shadow: -2px 2px #3e0a51;
  transition: ease-in-out 0.2s;
  float: left;
  font-size: 2em;
  padding-right: 1vw;
}
.reader_ressource ul li:hover:before {
  content: "•";
  font-family: "HKGrotesk-Medium";
  color: #3e0a51;
  -webkit-text-stroke: 1px #00dab0;
  text-shadow: -2px 2px #00dab0;
  transition: ease-in-out 0.2s;
}
.reader_ressource ul li a {
  color: #3e0a51;
  font-family: "Redaction-Bold";
  text-decoration: underline;
}
.reader_ressource ul li a:hover {
  color: #00dab0;
  text-decoration: none;
}
.reader_ressource ul:nth-of-type(1) {
  padding-left: 0;
}

.player {
  font-family: "HKGrotesk-Bold";
}

.open {
  display: block !important;
}

.open_bottom .flexcentre {
  height: calc(100% - 200px);
}
.open_bottom.open_bottom_info .flexcentre {
  height: 50%;
}
.open_bottom.open_bottom_info .main .item {
  height: 50%;
}
.open_bottom.open_bottom_info .info {
  display: block;
}

.open_top .flexcentre {
  height: 50%;
}
.open_top .main .item {
  height: 50%;
}
.open_top.open_bottom .flexcentre {
  height: calc(50% - 50px);
}
.open_top.open_bottom .main .item {
  height: calc(50% - 50px);
}
.open_top #box-left:not(.box-fullscreen) > .content {
  height: 50vh;
}
.open_top #box-right:not(.box-fullscreen) {
  height: 50vh;
}
.open_top #box-right:not(.box-fullscreen) > .content {
  height: 100%;
}

.open_right .item {
  width: 70%;
}

.open_top .box-infos, .open_bottom .box-infos, .open_left .box-infos, .open_right .box-infos {
  filter: grayscale(1) blur(3px) opacity(0.3);
  transition: 0.2s ease-in-out;
}
.open_top .box-infos:hover, .open_bottom .box-infos:hover, .open_left .box-infos:hover, .open_right .box-infos:hover {
  filter: grayscale(1) blur(0px) opacity(1);
  transition: 0.2s ease-in-out;
}
.open_top .box-infos.lien-actif, .open_bottom .box-infos.lien-actif, .open_left .box-infos.lien-actif, .open_right .box-infos.lien-actif {
  filter: grayscale(0) blur(0px) opacity(1);
  z-index: 10;
}
.open_top .box-infos, .open_top .title, .open_bottom .box-infos, .open_bottom .title, .open_left .box-infos, .open_left .title, .open_right .box-infos, .open_right .title {
  transform: scale(0.7);
}
.open_top .box-infos.top_left, .open_top .title.top_left, .open_bottom .box-infos.top_left, .open_bottom .title.top_left, .open_left .box-infos.top_left, .open_left .title.top_left, .open_right .box-infos.top_left, .open_right .title.top_left {
  transform-origin: top left;
}
.open_top .box-infos.top_right, .open_top .title.top_right, .open_bottom .box-infos.top_right, .open_bottom .title.top_right, .open_left .box-infos.top_right, .open_left .title.top_right, .open_right .box-infos.top_right, .open_right .title.top_right {
  transform-origin: top right;
}
.open_top .box-infos.bottom_left, .open_top .title.bottom_left, .open_bottom .box-infos.bottom_left, .open_bottom .title.bottom_left, .open_left .box-infos.bottom_left, .open_left .title.bottom_left, .open_right .box-infos.bottom_left, .open_right .title.bottom_left {
  transform-origin: bottom left;
}
.open_top .box-infos.bottom_right, .open_top .title.bottom_right, .open_bottom .box-infos.bottom_right, .open_bottom .title.bottom_right, .open_left .box-infos.bottom_right, .open_left .title.bottom_right, .open_right .box-infos.bottom_right, .open_right .title.bottom_right {
  transform-origin: bottom right;
}
.open_top .box-infos.edito, .open_bottom .box-infos.edito, .open_left .box-infos.edito, .open_right .box-infos.edito {
  font-size: 0.7em;
}
.open_top .niveau_3, .open_bottom .niveau_3, .open_left .niveau_3, .open_right .niveau_3 {
  transform: scale(0.5) !important;
}
.open_top .niveau_4, .open_bottom .niveau_4, .open_left .niveau_4, .open_right .niveau_4 {
  transform: scale(0.8) !important;
}

.box-fullscreen {
  width: 100% !important;
  min-width: 100% !important;
  top: 0px;
  height: 100%;
  position: fixed;
  z-index: 5 !important;
  transition: height 0.5s ease-in-out;
}
.box-fullscreen#box-left .reader .header, .box-fullscreen#box-left .reader .content, .box-fullscreen#box-left .player {
  width: auto;
  max-width: 800px;
  margin: 0 auto;
}
.box-fullscreen#box-top {
  max-height: 100%;
}
.box-fullscreen#box-bottom > .content {
  overflow-y: hidden;
}
.box-fullscreen#box-bottom #btn_info #plusInfo {
  display: none;
}
.box-fullscreen#box-bottom #btn_info #moinsInfo {
  display: block;
}
.box-fullscreen#box-bottom .info {
  display: block;
}
.box-fullscreen .player {
  height: 100% !important;
}
.box-fullscreen .reader_texte,
.box-fullscreen .reader_court-metrage,
.box-fullscreen .reader_court-metrage-2,
.box-fullscreen .reader_cycle-conferences,
.box-fullscreen .reader_outil-pedagogique,
.box-fullscreen .reader_ressource {
  width: 40vw;
  margin-left: 30vw;
  overflow-y: scroll;
}
.box-fullscreen .shadow-box {
  display: none;
}

ol#nav_left {
  list-style: none;
  position: sticky;
  top: 50px;
  background: #f0d4fd;
  font-size: 0.6764705882em;
  border: 1px solid white;
  border-radius: 10px;
  padding: 5px;
  box-shadow: -2px 2px white;
  margin: 0px;
}
ol#nav_left li {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  line-height: 1.5em;
  margin-right: 1em;
  cursor: pointer;
}
ol#nav_left li:before {
  content: "•";
  font-family: "HKGrotesk-Medium";
  color: white;
  font-size: 2em;
  -webkit-text-stroke: 1px #3e0a51;
  text-shadow: -2px 2px #3e0a51;
}
ol#nav_left li:hover {
  color: white;
}
ol#nav_left li a {
  color: #3e0a51;
  text-decoration: none;
  cursor: pointer;
}

.player_podcast h1 {
  font-family: "HKGrotesk-Bold";
}

.btn_info:hover {
  color: white;
  cursor: pointer;
}

#next {
  opacity: 0.5;
  cursor: normal;
}

.audio-player {
  height: 50px;
  /* width: 100vw; */
  /* font-family: arial; */
  /* color: white; */
  font-size: 0.75em;
  /* overflow: hidden; */
  display: grid;
  /* grid-template-rows: 6px auto; */
  /* top: 95vh; */
  /* background: #00dab0; */
}
.audio-player sup {
  display: none;
}
.audio-player .timeline {
  background: white;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.audio-player .timeline .progress {
  background: #3e0a51;
  width: 0%;
  height: 100%;
  transition: 0.25s;
}
.audio-player .controls {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 20px;
  color: #3e0a51;
  width: 90vw;
}
.audio-player .controls > * {
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-player .controls .toggle-play.play {
  cursor: pointer;
  position: relative;
  left: 0;
  height: 0;
  width: 0;
  border: 7px solid rgba(0, 0, 0, 0);
  border-left: 13px solid #3e0a51;
}
.audio-player .controls .toggle-play.play:hover {
  transform: scale(1.1);
  border-left: 13px solid white;
}
.audio-player .controls .toggle-play.pause {
  height: 15px;
  width: 20px;
  cursor: pointer;
  position: relative;
}
.audio-player .controls .toggle-play.pause:before {
  position: absolute;
  top: 0;
  left: 0px;
  background: #3e0a51;
  content: "";
  height: 15px;
  width: 3px;
}
.audio-player .controls .toggle-play.pause:after {
  position: absolute;
  top: 0;
  right: 8px;
  background: #3e0a51;
  content: "";
  height: 15px;
  width: 3px;
}
.audio-player .controls .toggle-play.pause:hover {
  transform: scale(1.1);
}
.audio-player .controls .toggle-play.pause:hover:before, .audio-player .controls .toggle-play.pause:hover:after {
  background: white;
}
.audio-player .controls .time {
  display: flex;
}
.audio-player .controls .time > * {
  padding: 2px;
}
.audio-player .controls .name {
  font-weight: bold;
}
.audio-player .controls .volume-container {
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.audio-player .controls .volume-container .volume-button {
  height: 26px;
  display: flex;
  align-items: center;
}
.audio-player .controls .volume-container .volume-button .volume {
  transform: scale(0.7);
}
.audio-player .controls .volume-container .volume-slider {
  position: absolute;
  left: -3px;
  top: 18px;
  z-index: -1;
  width: 80px;
  height: 5px;
  background: white;
  transition: 0.25s;
}
.audio-player .controls .volume-container .volume-slider .volume-percentage {
  background: #3e0a51;
  height: 100%;
  width: 75%;
}
.audio-player #btn_info, .audio-player .next, .audio-player .prev {
  background: white;
  border-radius: 10px;
  border: 1px solid #3e0a51;
  box-shadow: -2px 2px #3e0a51;
  color: #3e0a51;
  height: 30%;
  padding: 0.5em;
  font-family: "HKGrotesk-Bold";
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
.audio-player #btn_info:hover, .audio-player .next:hover, .audio-player .prev:hover {
  transition: all ease-in-out 0.2s;
  box-shadow: 0px 0px #3e0a51;
  color: #00dab0;
}
.audio-player #btn_info {
  margin-top: 7px;
}
.audio-player #btn_prev_next {
  padding: 0em;
}
.audio-player #moinsInfo {
  display: none;
}

.mobile {
  font-size: 2rem;
  overflow: scroll;
  height: 100% !important;
  position: relative;
}
.mobile .open_bottom .box-infos,
.mobile .open_top .box-infos,
.mobile .open_right .box-infos,
.mobile .open_left .box-infos {
  display: none;
}
.mobile #box-edito {
  height: 100%;
  overflow: auto;
  font-size: 3rem;
}
.mobile #box-edito .head_close .close {
  margin-right: 0px;
  z-index: 6;
}
.mobile #box-edito .contener .content_edito .close {
  font-size: 1.5em;
  margin-left: 90%;
  position: sticky;
  top: 0%;
}
.mobile #box-edito .contener .content_edito .EditoNav {
  position: sticky;
  top: 0%;
}
.mobile #box-edito .contener .content_edito .text {
  padding-bottom: 45%;
}
.mobile #box-edito .contener .content_edito .text h2 {
  line-height: normal;
}
.mobile .background-content_ressource {
  background: transparent;
  padding-bottom: 20%;
}
.mobile #box-left, .mobile #box-right, .mobile #box-top, .mobile #box-bottom {
  max-width: 100% !important;
  z-index: 0;
  height: 100%;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
.mobile main .item .documentaire-primaire h1 {
  font-size: 2em;
  line-height: -2.2em;
  color: white;
  background: #3e0a51;
}
.mobile .reader_lexique {
  max-width: 100%;
}
.mobile .reader_lexique iframe {
  height: 50vw;
}
.mobile .flexdetout {
  display: block !important;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.mobile .head_close {
  position: fixed;
  top: 10%;
  right: 5% !important;
  font-size: 1.5rem !important;
  z-index: 10;
}
.mobile .head_close .close {
  font-size: 3rem;
}
.mobile .head_close .coda,
.mobile .head_close .fullscreen {
  display: none;
}
.mobile .reader_cycle-conferences .info-primaires p, .mobile .reader_outil-pedagogique .info-primaires p, .mobile .reader_court-metrage .info-primaires p {
  font-size: 1.15em;
  line-height: 1.25em;
}
.mobile .reader_texte .content p {
  font-size: 1.15em;
  line-height: 1.25em;
  text-indent: 2em;
  width: 95%;
}
.mobile .box-reader:not(#box-top) > .content {
  height: 100%;
}
.mobile #box-left.box-reader.reader-left, .mobile #box-top.box-reader.reader-top, .mobile #box-bottom.box-reader.reader-bottom, .mobile #box-right.box-reader.reader-right {
  animation: none;
  margin-top: -2vh;
  padding-bottom: 2vh;
}
.mobile #box-left, .mobile #box-right, .mobile #box-top, .mobile #box-bottom {
  position: absolute;
  width: 100%;
  max-width: 100%;
  font-size: 1.15em;
}
.mobile #box-left .header, .mobile #box-right .header, .mobile #box-top .header, .mobile #box-bottom .header {
  position: sticky;
  top: 0%;
}
.mobile #box-left h1, .mobile #box-right h1, .mobile #box-top h1, .mobile #box-bottom h1 {
  width: 100%;
  padding-top: 20%;
  width: 100%;
}
.mobile #box-left h2, .mobile #box-right h2, .mobile #box-top h2, .mobile #box-bottom h2 {
  padding-left: 0;
  padding-top: 0.56rem;
  margin: 0;
}
.mobile #box-right h1 {
  width: 100%;
  padding-top: 20%;
}
.mobile #box-right .reader_lexique h1 {
  background: #00dab0;
}
.mobile #box-right .reader_ressource h1 {
  background: #f7f1e7;
}
.mobile #box-right .header {
  top: 10%;
  position: sticky;
}
.mobile #box-left {
  overflow: auto;
  height: auto;
  margin-bottom: 20%;
}
.mobile #box-left .reader_outil-pedagogique .info-primaires .capsules {
  height: 450px;
  width: 750px;
}
.mobile #box-left .reader_cycle-conferences, .mobile #box-left .reader_outil-pedagogique, .mobile #box-left .reader_court-metrage {
  height: auto;
  padding-bottom: 25%;
}
.mobile #box-left .reader_cycle-conferences .info-primaires ul, .mobile #box-left .reader_outil-pedagogique .info-primaires ul, .mobile #box-left .reader_court-metrage .info-primaires ul {
  font-size: 0.95rem;
  width: 80%;
}
.mobile #box-top {
  max-height: 100% !important;
  height: auto;
  overflow-y: auto;
}
.mobile #box-top .head_close {
  width: auto;
  position: sticky;
}
.mobile #box-top .header {
  position: sticky;
  top: 11%;
  background: #3e0a51 !important;
}
.mobile #box-top h1 {
  padding-top: 20%;
  width: 96%;
  background: #3e0a51;
  padding-bottom: 0;
  height: 100%;
}
.mobile #box-top h2 {
  background: #3e0a51;
}
.mobile #box-top .reader_documentaire-primaire {
  height: auto !important;
  padding-bottom: 25%;
  padding-left: 1em;
  padding-right: 0;
  padding-top: 0;
}
.mobile #box-top .reader_documentaire-primaire iframe {
  position: relative;
  width: 88vw;
  height: 49vw;
  transform: scale(1) !important;
  transform-origin: 0 0 !important;
}
.mobile #box-top .reader_documentaire-primaire .flex-box {
  height: auto;
  flex-direction: column-reverse !important;
}
.mobile #box-top .reader_documentaire-primaire .flex-box .info-primaires {
  width: 90%;
  padding-top: 5%;
}
.mobile #box-top .reader_documentaire-primaire .flex-box .info-primaires details {
  width: 85%;
}
.mobile #box-top .reader_documentaire-primaire .flex-box .info-primaires ul {
  font-size: 0.95rem;
  width: 80%;
}
.mobile #box-bottom {
  position: absolute;
}
.mobile #box-bottom .link-logo {
  position: fixed;
  top: 23%;
  margin: 0;
  padding: 10% 0% 0% 10%;
  background: #00dab0;
  width: 100%;
  height: auto;
  z-index: 0;
}
.mobile #box-bottom .link-logo .deezer {
  width: 9.25%;
  height: 10%;
  margin-top: -10%;
}
.mobile #box-bottom .link-logo .apple {
  width: 11%;
  height: auto;
  margin-top: -15%;
}
.mobile #box-bottom .link-logo .spoty, .mobile #box-bottom .link-logo .soundcloud, .mobile #box-bottom .link-logo .rss {
  width: 15%;
  height: 6%;
}
.mobile #box-bottom .link-logo svg {
  fill: #3e0a51;
  padding-left: 0;
}
.mobile #box-bottom .link-logo svg:hover {
  fill: white;
}
.mobile #box-bottom .header {
  width: 100%;
  padding-top: 20%;
  position: relative !important;
  background: #00dab0;
}
.mobile #box-bottom h1 {
  position: fixed;
  top: 0%;
  margin-left: 0em;
  background: #00dab0;
  width: 100%;
  padding-bottom: 6%;
  z-index: 0;
  height: 11%;
}
.mobile #box-bottom .reader_episode-podcast .audio-player {
  width: 100%;
  top: 21%;
  background: #00dab0;
  position: fixed;
  font-size: 1em;
  height: auto;
  border-bottom: 6px solid white;
  z-index: 1;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls > * {
  align-items: normal;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls {
  display: flex;
  align-items: stretch;
  padding: 1rem 3rem;
  color: #3e0a51;
  width: auto;
  flex-wrap: wrap;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls .volume-container .volume-slider {
  display: none;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls #next {
  margin-right: 20px;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls .time {
  margin-left: -50px;
  margin-top: 5px;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls .toggle-play.play {
  border: 25px solid rgba(0, 0, 0, 0) !important;
  border-left-color: rgba(0, 0, 0, 0);
  border-left-style: solid;
  border-left-width: 12px;
  border-left: 45px solid white !important;
  width: auto;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls .toggle-play.pause:before, .mobile #box-bottom .reader_episode-podcast .audio-player .controls .toggle-play.pause:after {
  height: 45px !important;
  width: 10px !important;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls .toggle-play.pause:before {
  left: 14px;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls .toggle-play.pause:after {
  right: 18px;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls .name {
  display: none;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls #btn_info {
  display: none;
}
.mobile #box-bottom .reader_episode-podcast .audio-player .controls img {
  position: relative;
}
.mobile #box-bottom .reader_episode-podcast .flex-box {
  height: 100%;
  padding-left: 0;
  padding-top: 80%;
}
.mobile #box-bottom .reader_episode-podcast .info {
  display: block !important;
}
.mobile #box-bottom .reader_episode-podcast .info .part-fat {
  width: 100%;
}
.mobile #box-bottom .reader_episode-podcast .info .part-fat p {
  width: 85%;
}
.mobile #box-bottom .reader_episode-podcast .info .part-fat details {
  width: 85%;
}
.mobile #box-bottom .reader_episode-podcast .info .part-small {
  height: auto;
  width: 80%;
  padding: 1.15em;
  line-height: 1.15em;
  z-index: -1;
}
.mobile #box-edito .contener .content_edito {
  left: 0%;
  line-height: 1.4em;
  max-width: 100vw;
  width: 100%;
  padding-top: 35%;
  top: 0;
}
.mobile #box-edito .contener .content_edito .header {
  width: auto !important;
}
.mobile #box-edito .contener .content_edito ul li {
  padding-left: 0.15em;
  margin: 0.25em;
}
.mobile #box-edito .contener .content_edito .text h1 {
  font-size: 1.4em !important;
  margin-bottom: 0.5em !important;
  line-height: normal;
  margin-top: 0.5em;
}
.mobile #box-edito .contener .content_edito .close {
  margin-right: 2%;
  top: 0%;
  position: sticky;
}
.mobile #box-edito .contener .content_edito .EditoNav {
  position: sticky;
  top: 0%;
}
.mobile #box-edito .contener .content_edito .EditoNav li a {
  background: white;
}
.mobile #box-edito .contener .content_edito .reseau {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
  line-height: 1em;
}
.mobile #box-edito .contener .content_edito .reseau a {
  background: #00dab0;
  text-decoration: underline;
}
.mobile #box-edito .contener .content_edito .reseau a:hover {
  color: #00dab0;
  background: #3e0a51;
  text-decoration: none;
}
.mobile .menu {
  display: block !important;
  height: auto !important;
  font-size: 10rem;
  z-index: 10000 !important;
}
.mobile .menu-top, .mobile .menu-bottom {
  position: fixed;
  left: 0px;
  height: auto !important;
  z-index: 1;
}
.mobile .menu-top {
  top: 0 !important;
}
.mobile .menu-bottom {
  bottom: 0 !important;
}
.mobile main .item .lexique-video {
  display: none !important;
}
.mobile main .item .lexique {
  transition: all 3s ease-in-out;
  position: relative !important;
  color: #3e0a51;
  margin: 0 !important;
  transform: rotate(0deg) !important;
  font-size: 1.65em !important;
  align-content: center;
  width: 35vw !important;
  top: 0;
  left: 0;
  background: transparent;
  border: 1px solid white;
  height: auto;
}
.mobile main .item .lexique.box-infos {
  display: flex;
  flex-wrap: wrap;
}
.mobile main .item .lexique .box-content {
  width: 50%;
}
.mobile .here .forme #h1 {
  transform: scale(0.3) rotate(90deg);
  margin-top: -115px;
  transition: all 0.3s ease-in-out;
  transform-origin: center right;
}
.mobile .here:hover .forme #h1 {
  transform: scale(0.3);
  transition: all 0.3s ease-in-out;
  margin-top: -350px;
}
.mobile main .item .box-infos .forme {
  margin-top: -20px;
  transform: scale(0.6);
}
.mobile main .item .box-infos img.photo_cover {
  display: none;
}
.mobile .box-content {
  margin-top: 0 !important;
}
.mobile .box-content .header {
  padding: 2em;
  display: block !important;
  height: auto !important;
  width: auto !important;
  min-width: 80vw;
}
.mobile main .category .introduction {
  overflow-y: auto;
  width: 100vw;
  height: auto;
  margin-top: 0vh;
  margin-left: 0vw;
  border-left: 0px solid #3e0a51;
}
.mobile main .category .introduction h1 {
  display: none;
}
.mobile main .category .introduction .edito {
  padding-top: 10%;
  padding-bottom: 25%;
}
.mobile main .category .introduction .edito h2 {
  font-size: 1.3rem;
  padding-top: 0.56em;
}
.mobile main .category .introduction .edito p {
  font-size: 1.3em;
}
.mobile .item {
  padding-top: 10% !important;
  margin: 0;
  height: auto;
  display: flex;
  width: 100%;
  margin-left: 0;
  position: relative;
  flex-wrap: wrap;
}
.mobile .item .niveau_1 {
  order: 1;
}
.mobile .item .niveau_1 .box-content {
  padding-top: 12.5% !important;
}
.mobile .item .niveau_1 .box-content .header {
  margin-top: -12.5%;
  background: transparent;
}
.mobile .item .niveau_1 .box-content .type-media {
  font-size: 1.2em;
  margin-top: 38%;
  color: white;
  background: #3e0a51;
  line-height: 4.5rem;
}
.mobile .item .niveau_2 {
  order: 2;
  height: 15%;
  flex: 1 1 auto;
}
.mobile .item .niveau_2-1 {
  order: 3;
}
.mobile .item .niveau_3 {
  order: 4;
  height: 10%;
  flex: 1 2 auto;
}
.mobile .item .niveau_3-1 {
  order: 5;
}
.mobile .item .niveau_3-2 {
  order: 6;
}
.mobile .item .niveau_3-3 {
  order: 7;
}
.mobile .item .niveau_3-4 {
  order: 8;
}
.mobile .item .niveau_4 {
  order: 9;
  flex: 1 4 auto;
  align-self: stretch;
}
.mobile .item .niveau_4 .box-content {
  width: auto !important;
  max-width: auto !important;
}
.mobile .item .niveau_4 .box-content .header {
  padding: 0em !important;
  background-size: 100% 100%;
  font-size: 2rem;
}
.mobile .item .documentaire-primaire {
  background: #3e0a51;
}
.mobile .item .documentaire-primaire .forme {
  margin-top: 50px;
  transform: scale(0.8) !important;
  z-index: 1;
}
.mobile .item .podcast .header {
  background: transparent;
}
.mobile .item .podcast .box-content {
  font-size: 3rem;
  line-height: 5rem;
}
.mobile .item .cycle-conferences {
  background: #00dab0;
}
.mobile .item #conference-pointculture, .mobile .item #ressource, .mobile .item #deliveroo_nous, .mobile .item #le-travail-qui-vient {
  transform: scale(1);
  box-shadow: -0.4em 0.4em transparent;
}
.mobile .item #ressource:hover {
  transform: rotate(0deg) scale(0.95);
  box-shadow: 0em 0em transparent !important;
}
.mobile .item #le-travail-qui-vient {
  overflow-x: hidden;
  background: linear-gradient(90deg, #00dab0 30%, #f0d4fd 70%);
  transition: all 0.2s ease-in-out;
  width: 100%;
  display: flex !important;
  align-content: center;
}
.mobile .item #le-travail-qui-vient:hover {
  transform: rotate(0deg) scale(0.95);
  transition: all 0.2s ease-in-out;
  box-shadow: -0.4em 0.4em transparent;
  text-decoration: underline;
}
.mobile .item #le-travail-qui-vient h1 {
  background: transparent;
}
.mobile .item #edito_nf_mobile {
  display: block;
  overflow-x: hidden;
  background: #00dab0;
  transition: all 0.2s ease-in-out;
  display: flex !important;
  align-content: center;
  font-size: 1em;
  padding: -2em !important;
}
.mobile .item #edito_nf_mobile .header {
  padding: 1em;
}
.mobile .item #edito_nf_mobile h1 {
  text-align: center;
  font-family: "Redaction-Bold";
  line-height: 1em;
  text-decoration: underline;
}
.mobile .item #deliveroo_nous .box-content, .mobile .item #ressource.box-content {
  transform: rotate(0deg);
}
.mobile .item #deliveroo_nous .box-infos:hover .box-content {
  transform: scale(0.95);
  transition: all 0.2s ease-in-out;
  box-shadow: -0.4em 0.4em transparent;
}
.mobile .item .box-infos {
  width: 100%;
  height: auto;
  justify-content: center;
  align-self: auto;
  overflow: hidden;
}
.mobile .item .box-infos:hover .box-content {
  transform: rotate(0deg) scale(0.95);
  transition: all 0.2s ease-in-out;
  color: inherit;
  box-shadow: -0.4em 0.4em transparent;
}

/* jaune : ffe55dff */
/* bleu : 20d1eaff */
/* rouge : ff4033ff */
@font-face {
  font-family: "Redaction_10-Bold-CVB";
  src: url("../font/redaction/webfonts/Redaction35-Bold-CVB.ttf");
}
@font-face {
  font-family: "HKGrotesk-Medium";
  src: url("../font/HKGrotesk-Medium.ttf");
}
@font-face {
  font-family: "HKGrotesk-Bold";
  src: url("../font/HKGrotesk-Bold.otf");
}
body {
  margin: 0;
  --size: 1.15em;
}

.containerTemporaryHome {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: calc(var(--size) * 0.9);
  line-height: var(--size);
  flex-direction: row;
  position: fixed;
  font-family: "HKGrotesk-Medium";
}

body ::-moz-selection {
  background: white;
  color: #3e0a51 !important;
}

body ::selection {
  background: white;
  color: #3e0a51 !important;
}

.containerTemporaryHome #editoLeTravailQuiVient,
.containerTemporaryHome #editioNosFuturs,
.containerTemporaryHome #editoAutogestion {
  width: 33.33%;
  height: 100%;
}

.containerTemporaryHome #editoLeTravailQuiVient h1,
.containerTemporaryHome #editoAutogestion h1 {
  -webkit-text-stroke: 0.015em #3e0a51;
  text-shadow: -0.05em 0.05em #3e0a51;
  color: white;
}

.containerTemporaryHome h1 {
  font-family: "HKGrotesk-Bold";
  font-size: calc(var(--size) * 1.9);
  line-height: var(--size);
  padding-bottom: 1em;
  margin: -1em 0 0 0;
}

.containerTemporaryHome p {
  margin-top: 1em;
}

.containerTemporaryHome #editoLeTravailQuiVient {
  background: #f0d4fd;
}

.containerTemporaryHome #editoLeTravailQuiVient a {
  text-decoration: none;
  padding-top: 1em;
  color: #3e0a51;
  font-family: "HKGrotesk-Bold";
}

.containerTemporaryHome #editoLeTravailQuiVient a:hover {
  color: white;
}

.containerTemporaryHome #editoAutogestion h2 {
  color: white;
  font-family: "HKGrotesk-Bold";
  font-weight: normal;
}

.containerTemporaryHome #editoLeTravailQuiVient .textEdito a:before {
  content: "⟶ ";
}

.containerTemporaryHome #editoLeTravailQuiVient .textEdito,
.containerTemporaryHome #editoAutogestion .textEdito,
.containerTemporaryHome #editioNosFuturs .textEdito {
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 5%;
  padding-top: 10em;
  cursor: default;
}

.containerTemporaryHome #editoLeTravailQuiVient .textEdito p i,
.containerTemporaryHome #editoAutogestion .textEdito p i,
.containerTemporaryHome #editioNosFuturs .textEdito p i {
  font-style: normal;
  font-family: "Redaction-Italic";
}

.containerTemporaryHome #editoLeTravailQuiVient .imgLTQV {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 33.33%;
  position: fixed;
  /* z-index: -1; */
  mix-blend-mode: screen;
}

.containerTemporaryHome #editioNosFuturs {
  background: linear-gradient(0deg, #f0d4fd 0%, #ffe55d 100%);
  font-size: calc(var(--size) / 1.2);
  line-height: 1.15em;
  font-family: "Redaction-Regular";
}

.containerTemporaryHome #editioNosFuturs a {
  color: #3e0a51;
}

.containerTemporaryHome #editioNosFuturs a:hover {
  color: white;
}

.containerTemporaryHome #editioNosFuturs h1 {
  font-family: "Redaction-Italic";
  font-size: 2em;
}

.containerTemporaryHome #editoAutogestion {
  background: #ffe55d;
  color: #3e0a51;
}

.containerTemporaryHome #editoLeTravailQuiVient .textEdito,
.containerTemporaryHome #editoAutogestion .textEdito {
  display: none;
}

.containerTemporaryHome #editoAutogestion .imgAutoGestion {
  -o-object-fit: contain;
     object-fit: contain;
  /* object-position: 50% 50%; */
  height: 100%;
  mix-blend-mode: screen;
}

.containerTemporaryHome #editoLeTravailQuiVient:hover .imgLTQV {
  display: none;
}

.containerTemporaryHome #editoAutogestion:hover .imgAutoGestion {
  display: none;
}

.containerTemporaryHome #editoLeTravailQuiVient:hover .textEdito {
  display: block;
}

.containerTemporaryHome #editoAutogestion:hover .textEdito {
  display: block;
}

body .menu-temp {
  font-family: "Redaction_10-Bold-CVB";
  font-weight: normal;
  color: white;
  font-size: 5em;
  -webkit-text-stroke: 0.004em black;
  text-shadow: -0.05em 0.05em black;
  transition: all 0.25s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

body .menu-temp:hover {
  text-shadow: 0 0 black;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

body .menu-temp .nos,
body .menu-temp .futurs,
body .menu-temp .point,
body .menu-temp .net {
  position: fixed;
  z-index: 12;
}

body .menu-temp a {
  color: white;
  text-decoration: none;
  -webkit-text-stroke: 0.004em black;
  margin: 0;
}

body .menu-temp .nos {
  top: 0;
  left: 1.5vw;
}

body .menu-temp .futurs {
  top: 0;
  right: 1.5vw;
}

body .menu-temp .point {
  bottom: 0;
  left: 1.5vw;
}

body .menu-temp .net {
  bottom: 0;
  right: 1.5vw;
}

@media only screen and (max-width: 1200px) {
  .containerTemporaryHome {
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    line-height: calc(var(--size) * 1.5);
  }
  .containerTemporaryHome #editoLeTravailQuiVient,
  .containerTemporaryHome #editioNosFuturs,
  .containerTemporaryHome #editoAutogestion {
    width: 100%;
    height: auto;
    position: relative;
  }
  .containerTemporaryHome #editoLeTravailQuiVient .imgLTQV,
  .containerTemporaryHome #editoAutogestion .imgAutoGestion {
    display: none;
  }
  .containerTemporaryHome #editoLeTravailQuiVient .textEdito,
  .containerTemporaryHome #editoAutogestion .textEdito {
    display: block;
    order: 1;
    padding-top: 5em;
  }
  .containerTemporaryHome #editoAutogestion .textEdito p:nth-last-of-type(1) {
    padding-bottom: 10em;
  }
  .containerTemporaryHome #editioNosFuturs {
    order: -1;
    background: linear-gradient(0deg, #ffe55d 0%, #f0d4fd 100%);
    line-height: 2em;
  }
  .containerTemporaryHome #editioNosFuturs .textEdito {
    padding-top: 14em;
  }
  .containerTemporaryHome h1 {
    font-size: calc(var(--size) * 5.5);
    line-height: var(--size);
    padding: 0;
  }
  body .menu-temp {
    font-size: 10rem;
  }
}/*# sourceMappingURL=style.css.map */