:root {
  --orange: #f34900;
  --noir: #0B0B0B;
  --bleu: #0067ff;
  --blanc: #fffffc;
}



@font-face {
  font-family: "ProzaLibreReg";
  src: url("../../assets/files/fonts/ProzaLibre-Regular.eot");
  src: url("../../assets/files/fonts/ProzaLibre-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ProzaLibreIt";
  src: url("../../assets/files/fonts/ProzaLibre-Italic.eot");
  src: url("../../assets/files/fonts/ProzaLibre-Italic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ProzaLibreBold";
  src: url("../../assets/files/fonts/ProzaLibre-Bold.eot");
  src: url("../../assets/files/fonts/ProzaLibre-Bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ProzaLibreBoldIt";
  src: url("../../assets/files/fonts/ProzaLibre-BoldItalic.eot");
  src: url("../../assets/files/fonts/ProzaLibre-BoldItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}




/* GENERAL */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}
/* 1.0rem vaut alors 10px 
pas mal de mettre les tailles typos en rem (avec en tête des proportions en px)
*/

body {
  font-family: "ProzaLibreReg";
  font-size: 1.4rem;
  background: var(--blanc);
}

h1, h2, h3, strong, em {
  font-style: normal;
  font-weight: 300;
}
article, .content li {
  font-size: 1.5rem;
}
.big_menu h2 {
  font-family: "ProzaLibreReg";
}
h2, h3, strong {
  font-family: "ProzaLibreBold";
}
em {
  font-family: "ProzaLibreIt";
}
strong em, em strong {
  font-family: "ProzaLibreBoldIt";
}

img {
  width: 100%;
}
a {
  color: var(--noir);
  text-decoration: none;
}
p a, ul li a {
  color: var(--bleu);
  text-decoration: underline;
}
ul.child_lists li a {
  color: var(--noir);
  text-decoration: none;
}

main {
  max-width: 1300px;
  width: 100%;
  margin: auto;
}


/* HEADER */
header {
  max-width: 1200px;
  margin: auto;
  padding: 10px 10px 0px 10px;
}
header div {
  display: flex;
  align-items: center;
  color: var(--orange);
}
#logo {
  width: 200px;
  margin-right: 40px;
}
header nav {
  padding: 0px 10px 0px 10px;

  border-bottom: 4px solid var(--orange);
}
header nav ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  font-size: 1.2rem;
}
header nav li {
  display: flex;
  text-align: center;
  align-items: flex-end;
  justify-content: center;

  max-width: 165px;
  position: relative;
}
/* animation on hover */
header nav li:not(.current)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;

  background: var(--orange);
  z-index: -1;
  transition: height 0.35s;
}
header nav li:hover::after {
  height: 100%;
}
header nav li a {
  transition: color 0.4s;

  padding: 10px;
}
header nav li:hover a {
  color: var(--blanc);
}
header nav ul, header nav li {
  list-style: none;
}

/* le fond orange lorsqu'on est sur la page */
.current {
  background: var(--orange);
}
.current a {
  color: var(--blanc) !important;
}


/* SLIDER */
.outer-wrapper {
  clear: both;

  position: relative;
  margin-bottom: 20px;
}
.slide figure {
  display: flex;
  justify-content: center;
}
.slide, .slick-list, .slide figure {
  position: relative;
  max-height: 80vh;
}
.slide img {
  width: auto;
  max-height: 80vh;
  max-width: 100%;

  cursor: pointer;
}

.slick-slide {
  margin: 0px 10px;
}
.slick-prev, .slick-next {
  z-index: 10;
}
.slick-prev::before, .slick-next::before {
  color: var(--orange);

  font-size: 40px;
}
.slick-prev {
  left: -45px;
}
.slick-next {
  right: -27px;
}
.slide_caption {
  position: absolute;
  left: 0px;
  bottom: 0px;

  margin-top: 10px;
  width: 100%;
  padding: 7px;

  background: rgba(255,255,255,.75);

  text-align: center;
  font-size: 1.3rem;
}
.slick-lightbox-slick-caption {
  position: fixed;
  z-index: 20;
  bottom: 20px;

  width: 100vh;

  background: rgba(255,255,255,.75);
}

.slick-lightbox-slick-caption span {
  color: black;
}


/* LIGHTBOX */


.slick-lightbox-slick-item {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.slick-lightbox-slick-item::before {
  display: none;
}
.slick-lightbox-slick, .slick-lightbox-slick .slick-list {
  min-height: 100vh;
}
.slick-lightbox-slick-item-inner {
  margin: 20px auto 20px auto;
  position: relative;
  z-index: 12;
  height: calc(100vh - 40px);
  max-width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slick-lightbox-slick-img {
  display: block;

  max-height: calc(100vh - 40px);
  max-width: calc(100% - 40px);
  width: auto;
}
.slick-lightbox .slick-next {
  right: 20px;
}
.slick-lightbox .slick-prev {
  left: 3px;
}



/* FOOTER */
footer {
  display: none;
}



/* DIV CONTENT */
.content {
  width: 600px;
  margin: auto;
  margin-bottom: 100px;
}
.content article {
  clear: both;
  margin-bottom: 20px;
}
.content article p {
  text-indent: 20px;
}

.content article ul {
  margin-left: 38px;
}

/* DIV INTRO DANS CONTENT */

.intro .title {
  display: flex;
  align-items: center;
}
.intro .title figure {
  width: 130px;
}
.intro ul {
  font-family: "ProzaLibreBold";
  list-style: none;
  margin: 20px 0px 20px 20px;
}
.intro ul:not(.child_lists) {
  list-style: inside;
}
.intro ul li {
  margin-bottom: 10px;
}



/* BIG MENU */

.big_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  width: 600px;
  margin: 50px auto;
}
.big_menu a {
  width: calc(50% - 10px);
  text-align: center;
}
.big_menu a:nth-child(1), .big_menu a:nth-child(2) {
  margin-bottom: 40px;
}

.big_menu h2 {
  margin: 10px 0px 10px 0px;
  
  font-size: 1.8rem;
}

div.preview, .preview .background_img, .big_menu .picto {
  height: 200px;
}
.color {
  position: absolute;
  height: 200px;
  z-index: 5;
  width: 100%;
  opacity: .8;
}
div.preview {
  position: relative;
}
.preview .background_img {
  position: absolute;
  
  overflow: hidden;
}
.preview .background_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  transition: all .4s;
}
.picto {
  position: relative;
  z-index: 10;

  padding: 30px;
}
.picto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.big_menu hr {
  width: 25%;
  margin: auto;

  height: 1px;
  border: 1px;
  background: #f34900;
  
  transition: all 0.4s;
}
.big_menu a:hover hr {
  width: 50%;
}
.big_menu a:hover .background_img img {
  height: 110%;
}



/* BIG MENU TEL */

.big_menu_tel {
  display: none;
}


/* VIDEOS */



/* PRIX */

.list_prices {
  display: flex;
  flex-wrap: wrap;

  margin-bottom: 20px;
}
.list_prices a {
  width: 33%;
  text-align: center;
}
.list_prices a h2 {
  margin-bottom: 10px;
}
.list_prices hr {
  width: 25%;
  margin: auto;

  height: 1px;
  border: 1px;
  background: var(--orange);
  
  transition: all 0.4s;
}
.list_prices a:hover hr {
  width: 50%;
}

/* CANDIDATES */
.list_candidates {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  margin-top: 20px;
}
.list_candidates article {
  width: calc(50% - 10px);
}



/* ACCORDEON */
.uk-accordion {
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.uk-accordion-title {
  border-bottom: 1px solid $noir;
}
.uk-accordion a {
  color: var(--noir);
  text-decoration: none;
}
.uk-accordion-content div {
  display: flex;
  margin-top: 20px;
}
.uk-accordion-content div figure {
  width: 33%;
  flex-shrink: 0;
  margin-right: 40px;
}
.uk-accordion-title::before {
  color: var(--orange);
  font-size: 2.5rem;
  margin-right: 10px;
  width: auto;
}
.uk-accordion-title::before {
  content: "+";
  background-image: none;
}
.uk-open > .uk-accordion-title::before {
  content: "-";
  background-image: none;
}




/* IMAGES INLINE CKEDITOR */
p > img {
  display: block;
}
.align_left {
  display: block;

  width: 50%;
  float: left;
  margin-right: 10px;
}
.align_right {
  display: block;

  width: 50%;
  float: right;
  margin-left: 10px;
}
.align_center {
  display: block;

  width: 50%;
  margin: auto;
}



/* RESPONSIVE pour desktop sans specifications de device */

@media only screen and (min-width : 0px) and (max-width : 480px) {
  main {
    width: 100%;
  }
  /* HEADER */
  header {
    padding: 20px;
  }
  header div {
    flex-direction: column;
    align-items: flex-start; 
  }
  #logo {
    width: 100%;
  }
  header nav {
    display: none;
  }
  .content {
    width: 100%;
    padding: 20px;
  }

  /* INTRO */
  .intro .text {
    order: 2;
  }
  .intro h1 {
    width: 100%;
    border-left: 4px solid var(--orange);
    padding-left: 10px;
    margin-bottom: 10px;
  }
  .intro figure {
    display: none;
  }

  /* BIG MENU */
  .big_menu {
    margin-top: 0px;
    margin-bottom: 10px;
    width: 100%;
  }
  div.preview, .preview .background_img, .big_menu .picto, .big_menu .color {
    height: 120px;
    width: 100%;
  }
  .big_menu a {
    position: relative;

    height: 120px;
    width: 100%;
    margin: 0px !important;
  }
  .picto {
    padding: 25px;
  }
  .big_menu a:nth-child(even) .picto img {
    object-position: left;
  }
  .big_menu a:nth-child(odd) .picto img {
    object-position: right;
  }

  .big_menu h2 {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translate(0, -50%);
    left: 50%;

    width: 50%;
    margin: 0;

    color: var(--blanc);
  }
  .big_menu a:nth-child(odd) h2 {
    left: 0%;
  }
  .big_menu hr {
    display: none;
  }


  /* BIG MENU TEL */
  .big_menu_tel {
    position: sticky;
    top: 0px;
    z-index: 100;

    display: flex;
  }
  .big_menu_tel a {
    width: 25%;
    height: 60px;
    padding: 7px;
  }
  .big_menu_tel a.current {
    height: 70px;
    margin-top: -5px;
  }
  .big_menu_tel a figure {
    height: 100%;
  }
  .big_menu_tel a figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* SLIDER */
  .slick-prev::before, .slick-next::before {
    font-size: 35px;
  }
  .slick-prev {
    left: -16px;
  }
  .slick-next {
    right: 0px;
  }
  .slide, .slick-list, .slide figure {    
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: auto;
  }
  .slick-lightbox-slick-caption {
    max-width: 300px;
  }

  /* PRIX */
  .list_prices a {
    width: 50%;
  }
  .list_prices hr {
    display: none;
  }
  /* LAUREATS */
  .list_candidates article {
    width: 100%;
  }


  /* ACCORDEON */

  .uk-accordion-content div {
    display: block;
  }
  .uk-accordion-content div figure {
    margin: 0px auto 20px auto;
    width: 40%;
  }

  /* FOOTER */
  footer {
    display: block;
    margin: 0px 20px 0px 20px;
    padding: 10px 0px 10px 0px;
    border-top: 4px solid var(--orange);
  }
  footer a {
    display: block;
    text-align: center;
  }



  /* IMAGES INLINE CKEDITOR */

  .align_left {
    width: 100%;
    float: none;
    margin-right: 0px;
  }
  .align_right {
    width: 100%;
    float: none;
    margin-left: 0px;
  }
  .align_center {
    width: 100%;
    margin: auto;
    display: block;
  }



}



@media only screen and (min-width : 481px) and (max-width : 768px) {
  main {
    width: 100%;
  }
  header {
    padding: 20px 50px 20px 50px;
  }
  header nav {
    display: none;
  }

  .content {
    width: 100%;
    padding: 20px 60px 20px 60px;
  }

  #logo {
    margin-right: 15px;
  }
  
  /* BIG MENU */
  .big_menu {
    margin-top: 0px;
    width: 90%;
  }

  /* BIG MENU TEL */
  .big_menu_tel {
    position: sticky;
    top: 0px;
    z-index: 100;

    display: flex;
    padding: 0px 50px 0px 50px;
  }
  .big_menu_tel a {
    width: 25%;
    height: 60px;
    padding: 7px;
  }
  .big_menu_tel a.current {
    height: 70px;
    margin-top: -5px;
  }
  .big_menu_tel a figure {
    height: 100%;
  }
  .big_menu_tel a figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* SLIDER */ 
  .slick-prev::before, .slick-next::before {
  }
  .slick-prev {
    left: -30px;
  }
  .slick-next {
    right: -10px;
  }


  /* FOOTER */
  footer {
    display: block;

    margin: 0px 60px 0px 60px;
    padding: 10px 0px 10px 0px;
    border-top: 4px solid var(--orange);
  }
  footer a {
    display: block;
    text-align: center;
  }

  /* IMAGES INLINE CKEDITOR */

  .align_left {
    width: 100%;
    float: none;
    margin-right: 0px;
  }
  .align_right {
    width: 100%;
    float: none;
    margin-left: 0px;
  }
  .align_center {
    width: 100%;
    margin: auto;
    display: block;
  }

  .slick-lightbox-slick-caption {
    max-width: 700px;
  }
}