/* -----------=============== GENERAL ===============------------ */

html{
    scroll-behavior: smooth;
}

/* -----===== BODY =====----- */

body{
  /*positionnement*/
  margin: 0px;
  margin-left: 50px;
  padding: 0;
  /*police*/
  font-family: Bebas, arial, verdana, sans-serif;
  font-size: 1.2em;
  color : #616161;
  /*backgroud*/
  background-image: url(img/cross.png);
  background-color: #f7f7f7;
  /*deffilement*/

}

.active{
  color: #8058BC;
}

#acceuil hr{
  margin-top: 0;
}

/* --- Grand titre --- */
h1, h2, h3, h4{
  color: #000080;
}
dt{
  color: #000080;
}


/* Lien HyperText */

a{
  color: #441E7C; /*viollet*/
  text-decoration: none;
}

/*survollement*/
a:hover{
  color: #8058BC; /*viollet clair*/
}

/* tableaux */
table{
  border-collapse: collapse;
}
table, th, td{
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}

img {
  padding: 10px 0;
}

span{
  color: #333333;
}

hr{
  clear: right;
}


/* -----===== navigation =====----- */

nav {
  /*positionnement*/
	width: 25%;
  height: 100%;

  top: 0px;
  left: 0px;
  padding-left: 5px;
	position: fixed;
  /*backgroud*/
  background-color: #2b2b2b;
  background-image: url(img/plates.png);
  background-image: 100%;
  /*police*/
  color: white;
}

nav hr{
  margin: 0;
  width: 60%;
}

nav ul {
  margin-top: 5px;
  padding-left: 5px;
  list-style: none;
  text-align: left;
  font-size: 1.5em;
}

nav footer{

  text-align: right;
  /*positionnement*/
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding-right: 1em;
}

nav a{
  color: white;
}

nav h1{
  color : #003D80;
}

.right {
	width: 75%;
	float: right;
}

/* ----=== Menu hamburger ===---- */
.bar1, .bar2, .bar3 {
  display: none;
}


/* -----------=============== SPECIFIQUE ===============------------ */

/* -------======== Index ========------- */
#presentation hr{
  margin-top: 0;
}

.link{
  margin-bottom: 20px;
}
.link img{
  padding: 0;
}

.print{
  padding: 10px;
  background-color: #2b2b2b;
  border-radius: 15px;
  color : #D9D9D9;
  display: inline-block;
}

.print:hover{
  opacity: 85%;
}

/* Portfolio */
.projet img{
  height: 250px;
  width: 250px;
  padding: 0;
  border-radius: 0 5px 5px 0;
}

.projet video{
  height: 250px;
  width: 250px;
  padding: 0;
  border-radius: 0 5px 5px 0;
}

#portfolio a{
  margin: auto;
  padding: 10px;
  background-color: #2b2b2b;
  border-radius: 15px;
  color : #D9D9D9;
}

#portfolio a:hover{
  opacity: 85%;
}

.projets{
  display: flex;
  flex-wrap: wrap;
}

.projet{
  width: 530px;
  height: 250px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px 20px 20px;
  border-radius: 10px;
  border : 4px solid #616161;
}

.text{
  padding-left: 5px;
  width: 275px;
  height: 200px;
}

.text h4{
  text-align: center;
}

.boutons{
  display: flex;
  width: 275px;
  height: 50px;
}

.projet h4{
  margin-top: 0;
}
.projet p{
  margin-right: 5px;
}

.competencebox{
  display: flex;
}
/* -------================== MINI-PROJET ==================------- */
.capteurs img{
  width: 95%;
}
/* -------================== PROJET ==================------- */

#general img {
  width: 45%;
}


.piliers img{
  float: right;
}

iframe{
  width : 560px;
  height : 315px;
  margin-left: 10%;
}

/* --=== Arduino ===-- */
.electronique img{

  width: 95%
}

.capteur{
    float: right;
    padding:  0 10px 10px 10px;
    width: 200px;
    height: 200px;
}

.shema-electrique-hall{
  width: 200px;
  height:172px;
  padding:10px;
}

.algo_affichage{
  float: right;
}
.ecran{
  width: 250px;
  height: 250px;
  margin: 0 15%;
}

/* -----========== inscertion code ==========-----*/

/* atom one dark */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #abb2bf;
  background: #282c34;
}

.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}

.hljs-literal {
  color: #56b6c2;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #98c379;
}

.hljs-built_in,
.hljs-class .hljs-title {
  color: #e6c07b;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-link {
  text-decoration: underline;
}

.Arduino{
  border: 1px solid #f7f7f7;
  height: 300px;
  width: 90%;
}

#Code_complet {
  height: 500px;
}



/* -----========== Adaptatif ==========-----*/

 /* styles pour des largeurs de fenêtre de navigateur  "moyennes*/
  @media screen and (max-width:820px) {
    body{
      margin: 0px;
      font-size: 1em;
    }
    article{
      margin: 0 10px;
    }
    #presentation hr{
      display: none;
    }

    #acceuil hr{
      display: none;
    }


    nav{
      /*enlève la navigation*/
      position: sticky;

      width: 100%;
      height: auto;

      padding: 0;
    }

    nav footer{
      display: none;
    }

    nav .menu{
      margin: 0;
      /* padding: 5px 0px 5px 10px; */
    }

    .container {
      display: inline-block;
      cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
      width: 35px;
      height: 5px;
      background-color: #DDD;
      margin: 6px 0 6px 10px;
      transition: 0.15s;
      display: block;
    }

    .menu{
      display: none
    }
    .change .menu{
      display: block;
    }
    .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-9px, 6px);
      transform: rotate(-45deg) translate(-9px, 6px);
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
    }


    .right{
      /*right en plein ecran*/
      float: inherit;
      width: 100%;
      margin: 0px;
    }

    /* -----===== Header =====----- */
    header{
      display: none;
    }
    header ul{
      display: flex;
      flex-direction: column;
      list-style: none;
    }
    /* -----===== Specifique =====----- */

    iframe{
      width : 280px;
      height : 157.5px;
      margin: 0px;
    }

    .projet{
      width: 100%;
      height: auto;
      margin-bottom: 10px;
      border-radius: 10px;
      border : 2px solid #616161;
    }

    .projet img{
      width: 100%;
      height: auto;
    }
    .projet video{
      width: 100%;
      height: auto;
    }
    
    .corp{
      width: 100%;
      margin: 10px;
    }
    .boutons{
      width: 100%;
    }

    .text{
      width: 100%;
      height: auto;
    }

    .algo_affichage{
      float: none;
    }
    .capteur{
      float: none;
    }
    #general img{
      width: 100%;
    }
    .ecran{
      margin: 0;
    }

    .competencebox{
      display: block;
      margin-bottom: 16px;
    }
    .competencebox dl{
      margin: 0;
    }
    /* -----===== Header =====----- */
    /*header{
      display: inline;
    }
    header ul{
      display: flex;
      flex-direction: column;

      list-style: none;

      padding: 0;
    }
    header li{
      padding: 5px;

      background-color: black;
    }
    header a{
      color : white;
    }*/
  }




/* -----===== Header =====----- */
/*header{
  display: none;
}
header ul{
  display: flex;
  flex-direction: column;
  list-style: none;
}
header li{
  padding: 0px 5px;
}*/