@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;1,300');
/* important de placer les "weights" à utiliser */


* {
  box-sizing: border-box;}
  /* permet que tout ce que l'on ajoute soit bord à bord et ne sorte pas du bloc. Utile pour le responsive/adaptatif */

html, body {
  background-color: var(--bglight);
  height: 100%;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family: "IBM Plex Sans", sans-serif;
  scroll-behavior: smooth; }

:root {
  --bg: #fff;
  --bglight: #f5f5f5;
  --main: #000;
  --second: #888;
  --border: #ccc; }

:root[data-theme='dark'] {
  --bg: #000;
  --bglight: #181818;
  --main: #fff;
  --second: #999;
  --border: #666; }

:root[data-theme='light'] {
  --bg: #fff;
  --bglight: #f5f5f5;
  --main: #000;
  --second: #888;
  --border: #ccc; }

[data-theme='dark'] .social-icons2, [data-theme='dark'] .nightmode {
  opacity: 1;  }


[class*="col-"] {
  float: left;  }
/* détermine la façon dont les blocs calés sur des colonnes s'enchaîneront */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* détermine la largeur des div qui seront callées sur des colonnes */

.ligne {
  border-bottom: solid 1px var(--border);  }

.ligne::after {
  content: "";
  clear: both;
  display: table; }

.menu {
  position: fixed;
  z-index: 1;
  display: block;
  background-color: var(--bglight);
  border-right: 1px solid var(--border);
  height: 100%;
  width: 280px;
  font-family: "source sans pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 400;
  text-align: center;  }

.menu-mobile {
  display: none;  }

  header {
    font-size: 18px;
    border-bottom: 1px solid var(--border);
    padding: 24px 18px;  }
    .subheader {
      text-transform: none;
      letter-spacing: normal;
      font-family: "IBM Plex Sans", sans-serif;
      font-size: 14px;
      line-height: 1.3;
      margin-bottom: 0;  }

      .menu ul, .menu-mobile ul{
        list-style-type: none;
        text-align: left;
        font-size: 15px;
        padding: 0;
        margin: 32px 0;  }

      .menu li, .menu-mobile li{
        margin: 16px 56px; /* margin : marge à l'extérieur */
        width: auto;  }

      .menuindex-scrollhidder {
         overflow-x: hidden;
         position: relative;  }

          .menu-index {
             position: relative;
             font-size: 14px;
             line-height: 1.3;
             font-weight: 300;
             text-transform: none;
             letter-spacing: normal;
             font-family: "IBM Plex Sans", sans-serif;
             border-left: 1px solid var(--border);
             margin-top: 8px;
             max-height: 180px;
             overflow-y: scroll;
             padding: 0 10% 0px 12px;
             width: 110%;
             /*  animation: show 0.75s;
                 animation-timing-function: ease-in-out; }
             @keyframes show {
                 0% { max-height: 0px; }
                 100% { max-height: 180px; }   */  }

      .social {
          position: absolute;
          bottom: 0px;
          width: 100%;
          text-align: center;
          padding: 24px;
          border-top: 1px solid var(--border);
                  height: 66px;
                  overflow: hidden;
                  transition: height 0.5s; }
      .social p {
          position: relative;
          text-align: center;
          font-size: 12px;
          width: 200px;
          margin: 20px auto;
          padding-top: 8px;
          border-top: 1px solid var(--border); }

      /* 2 ajouté à la fin du nom de classe parce qu'un bug incompréhensible faisait disparaitre la classe originale sur safari */
      .social-icons2 {
          height: 18px;
          display: inline;
          margin: 0 10px;
          cursor: pointer;
          fill: var(--second);
          opacity: 0.8; }
      .social-icons2:hover {
          fill: var(--main);  }

      .nightmode {
        fill: var(--second);
        float: left;
        margin-left: 56px;
        height: 18px;
        width: 35px;
        opacity: 0.8; }

      .nightmode:hover {
        fill: var(--main);
        cursor: pointer; }

      .nightmode-1 {
        fill: var(--bglight); }
      .nightmode-1:hover {
        fill: var(--bg); }

      .nightmode-toggle {
        transition: cx 0.5s; }

      [data-theme='dark'] .nightmode-toggle {
        cx: 26; }
      [data-theme='light'] .nightmode-toggle {
        cx: 9; }

container {
  position: relative;
  color: var(--main);
  background-color: var(--bglight);
  display: block;
  float: left;
  width: 100%;
  padding-left: 280px;
  margin: 0;
  text-align: center;  }

  .content {
    position: relative;
    background-color: var(--bg);
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1800px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: left;  }
    @media (max-width: 1800px) { .content {border-right: 0;} }

    /* Idée de semi dark mode
    .content:hover {
      --bg: #000;
      --bglight: #181818;
      --main: #fff;
      --second: #999;
      --border: #666; }
     */

        .monochrom {
        margin: 0;
        max-width: 100%;
        max-height:100%;
        display: block;
        background-color: var(--bg); }

        .cartel {
        position: relative;
        /*border-left: 1px solid var(--border);
        padding-left: 12px;*/
        margin: 12px 0 16px 16px;  }

        .slideshow-area{
        position: relative;
        background-color: var(--bg);
        margin: 0;
        height: auto;
        /* border: 1px solid var(--border); */  }

          .cycle-slideshow div{
            width: 100%;  }

          .cycle-slideshow img{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            outline: 0;
            width: 100%;
            height: auto;
            overflow-y: hidden;  }

          .cycle-next, .cycle-prev{
            position: absolute;
            opacity: 0;
            z-index:999 ;
            height: 100%;
            width: 50%;  }

          .cycle-prev{
            background: url() 50% 50% no-repeat;
            cursor: url(medias/icons/left-arrow.svg), url(medias/icons/left-arrow.png), w-resize;  }

          .cycle-next{
            background: url() 50% 50% no-repeat;
            right: 0;
            cursor: url(medias/icons/right-arrow.svg), url(medias/icons/right-arrow.png), e-resize;  }

          .cycle-caption {
            font-size: 14px;
            font-weight: 100;
            position: absolute;
            right: 20px;
            bottom: 0;
            z-index: 1000; }

          .cycle-caption-fonts {
            width: auto;
            bottom: 16px;
            text-align: right;
            color: var(--main);
            text-shadow: 1px 0 0 var(--bg), -1px 0 0 var(--bg), 0 1px 0 var(--bg), 0 -1px 0 var(--bg); }

          .cycle-caption-state {
            color: var(--second);
            font-size: 14px;
            font-weight: 100;
            position: absolute;
            left: 20px;
            z-index: 1000;
            text-align: left; }

          @media (max-width: 900px) {
            .cycle-caption-state {
              display: none; }
          }


            @keyframes fadeinout {
              0%, 100% { opacity: 0 }
              20%, 80% { opacity: 1 }
            }
            .fadeinout {
              opacity:0;
              -webkit-animation: fadeinout 4s linear forwards;
              animation: fadeinout 4s linear forwards;
              animation-delay: 0.5s; }


      .preloader {
        margin: auto;
        position: absolute;
        bottom: 50%;
        z-index: 1000;
      }



  .about {
    position: relative;
    text-align: center;  }

      .about h1 {
        padding: 4px 0;  }
      .about p {
        color: var(--second); }

      .about a {
         color: var(--main); }
      .about a:hover{
         color: var(--second);  }
      .about a:active{
         color: var(--second);  }

          .about-div {
            width: 100%;
            padding: 40px;
            position: relative;
            border-bottom: 1px solid var(--border);
            text-align: left;   }
          .about-cartel {
            border-left: 1px solid var(--border);
            margin: 0 auto;
            padding: 0px 0 1px 12px;
            max-width: 680px;  }

          .about img {
            margin: 0 auto;
            width: 100%;
            margin-bottom: 16px;
            max-width: 680px;   }
            .mobile-img {
              display: none;  }
            .laptop-img {
              display: block; }



          .about-right {
            float: left;
            width: 58.33%;
            background-color: var(--bg);
            border-right: 1px solid var(--border);  }
          .about-left {
            float: left;
            background-color: var(--bg);
            width: 41.66%;  }


  .footer {
    position: relative;
    display: block;
    background-color: var(--bglight);
    padding: 20px 20px 20px 20px;
    margin: 0;
    text-align: center;
    width: 100%;
    /* max-width: 1100px; */
    height: 65px;
    font-family: "source sans pro", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.10em;  }

  .footer-mobile {display: none;}

    .backtotop-footer {
      position: absolute;
      right: 0px;
      margin: -2px 30px -2px 0;
      font-size: 20px;  }

    .backtotop {
      display: none;  }




a {
   text-decoration: none;
   color: var(--main); }
a:hover{
   color: var(--second);  }
a:active{
   color: var(--second);  }

.menu a, .menu-mobile a, .container-index a {
   text-decoration: none;
   color: var(--second); }
.menu a:hover, .menu-mobile a:hover, .container-index a:hover{
   color: var(--main);  }
.menu a:active, .menu-mobile a:active, .container-index a:active{
   color: var(--main);  }

h1 {
  color: var(--main);
  font-family: "source sans pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 8px 0;
  line-height: 1; }

small {
  color: var(--second);
  font-weight: 100;
  font-family: "IBM Plex Sans", sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;  } /* Eventuellement à enlever si trop petit pour autres styles */

p {
  -webkit-text-size-adjust: 100%;
  color: var(--second);
  font-size: 14px;
  font-weight: 100;
  margin: 0 0 8px 0;  }




  /* index.html, page d'accueil */

.container-index {
background-color: var(--bg);
font-family: "source sans pro", sans-serif;
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 400;
font-size: calc(14px + 0.390625vw);
height: 100%; }

.welcome {
position: relative;
width: 100%;
margin: auto;
text-align: center; }

.welcome img {
/* height: 40%; */
max-height: 40vh;
width: 100%;
margin: auto; }

.welcome a {
  cursor: url(medias/icons/reload.svg), url(medias/icons/reload.png), crosshair; }

.menu-welcome {
position: absolute;
bottom: 0;
display: block;
height: 50%;
width: 100%;
text-align: center; }
@media (orientation: portrait) { .menu-welcome {height: 60%;} }

.links-welcome {
position: relative;
display: block;
background-color: var(--bglight);
border-top: 1px solid var(--border);
height: 20%;
width: 100%; }

#bottomlink {border-bottom: 1px solid var(--border); }

.vertical-center {
width: 100%;
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%); }

.footer-welcome {
border: none;
position: absolute;
bottom: 0;
min-height: 60px; }
.footer-welcome .social-icons2 {
float: left; height: calc(18px + 0.15vw);}

.footer-welcome-mobile {display: none;}

#random-mobile {display: none;}


@media (max-height: 360px) {
    .container-index {
      font-size: calc(10px + 0.390625vw); }
    .links-welcome { height: 22%; }
    .footer-welcome { display: none; }
    #bottomlink {border-bottom: none; }
    .menu-welcome { background-color: var(--bglight); }
    @media (orientation: portrait) {
      .footer-welcome-mobile { display: none; } }
}



@media (max-width: 1000px) {

@media (orientation: portrait) and (min-height: 360px) {
  .footer-welcome {display: none;}

  .footer-welcome-mobile {
  position: relative;
  display: block;
  height: 20%;
  width: 100%; }

  .welcome {height: auto; }
  .welcome img {
  max-height: 55%; }

  #random {display: none;}
  #random-mobile {display: block;}

}


.menu {
  display: none;  }

.menu-mobile {
  position: relative;
  z-index: 10000;
  display: block;
  background-color: var(--bglight);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  width: 100%;
  font-family: "source sans pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 400;
  text-align: center;
                  height: 74px;
                  overflow: hidden;
                  transition: height 0.5s;
                  transition-timing-function: ease-in-out;  }

  header {
    text-align: left;
    padding: 16px;
    height: 74px;
      }

  .menu-toggle {
    position: absolute;
    border-left: 1px solid var(--border);
    line-height: 0;
    right: 0;
    top: 0;  }

  .burger-close {
  display: none; }

  .burger-icons {
    height: 74px;
    fill: var(--main); }

      .menu-mobile ul{
        margin: 32px auto 32px auto;
        width: 280px;  }

      .social-mobile2 {
          position: relative;
          width: 100%;
          text-align: center;
          padding: 24px;
          padding-bottom: 0; }
      .social-mobile2 p {
          position: relative;
          text-align: center;
          font-size: 12px;
          width: 200px;
          margin: 20px auto;
          padding-top: 8px;
          padding-bottom: 0;
          border-top: 1px solid var(--border); }


container {
  padding-left: 0;  }

  .container-pdf {
    padding-bottom: 74px;
    overflow-y: hidden;  }

  .slideshow-area{
  margin: 0;  }

  .cartel {
    position: relative;
    margin: 16px;  }
    .cartel h1 {
      max-width: 80%;  }

  .about {
    height: auto;  }

      .about h1 {
        border-left: 1px solid var(--border);
        padding: 4px 0 4px 12px;
        margin: 0 0 8px 0;  }

      .about-left {
        width: 100%;
        border-right: none;  }
      .about-right {
        width: 100%;  }

      .about-cartel {
        border: none;  }

          .about-div {
            padding: 24px 24px 24px 12px;  }

          .about img{
            margin: 0;
            padding-bottom: 16px;
            max-width: 680px;   }
            .mobile-img {
              display: none;
              width: 100%;  }
            .laptop-img {
              display: none;  }


  .footer {display: none;}

  .footer-mobile {
    position: relative;
    display: block;
    background-color: var(--bglight);
    padding: 20px 20px 20px 20px;
    margin: 0;
    text-align: center;
    width: 100%;
    height: 62px;
    font-family: "source sans pro", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.10em;  }

  .backtotop-footer {
    display: none;  }

  .backtotop {
    display: block;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 5000;
    background-color: var(--bg);
    width: 25px;
    border: 0 solid var(--border);
    border-radius: 100%;
    margin: 20px;
    font-size: 20px;  }