* {margin:0; padding:0; font-size:1em; box-sizing:border-box;}
a img {border:0;}
body {font-family:"Linux Libertine O", serif; font-size: 110%; color:#202020; margin:0; padding:0 10px 0 10px; height:100%; overflow:auto;}

h1 { 
  margin-left:0;
  text-indent:0pt;
  font-size:300%;
  font-weight:bold;
  text-shadow:2px 2px 5px #666666;
  padding-top:40px;
  padding-bottom:30px;
  text-align:center;
}
h2 {
  margin-left:0;
  margin-top:40px;
  margin-bottom:30px;
  text-indent:0pt;
  font-size:xx-large;
  font-weight:bold;
  text-shadow:0.5px 0.5px 2px #666666;
  
}
h3 {
  margin-left:0;
  margin-top:20px;
  margin-bottom:15px;
  text-indent:0pt;
  font-size:x-large;
  font-weight:bold;
  text-shadow:0.5px 0.5px 2px #666666;
  
}
h4 {
  margin-left:0;
  margin-top:18px;
  margin-bottom:6px;
  text-indent:0pt;
  font-size:large;
  font-weight:bold;
  text-shadow:0.5px 0.5px 2px #666666;
}

blockquote {
  margin-right:0;
  margin-left:80px;
  margin-top:8px;
  margin-bottom:8px;
  font-size:90%;
}

ul, ol {
  top: 0px;
  text-align:justify;
  /*margin-right:4%;*/
  margin-left:35px;
  white-space:normal;
  text-indent:0px;
  padding-bottom:20px;
}
caption {
  padding-top:20px;
  text-align:left;
  caption-side:bottom;
}

pre {font-family:"Linux Libertine Mono", monospace; font-size:80%;}

.fnote {
  font-size:small;
  width:100%;
}

div.damier{
  display:table;
  max-width:640px;
  width:100%;
}  
div.case{
  height: auto;
  width:320px;
  display:table-cell;
  float:left;
}

div.intercase {
  width:100%;
  height:12px;
  display: inline-block;
  float: left;
}  

table {
  border-collapse:collapse;
}

td, th {
  border:1px solid black;
  padding:8px;
}
.bordn {border: 1px solid black;}
.bordnpt {border: 1px solid black; font-size:small; }
.sansbord {border: 0px solid black;}
.bordr {border-right: 1px solid black;}
 


.table100 {
  width:100%; 
}
.table100 td {
  vertical-align:top;
}  
.table80 {
  width:80%;
}
.table50 {
  width:50%; 
}

.algoverif {
  width:50%; 
}  

.algoverif td {
  text-align:right;
  padding-left:10px;
  padding-right:10px;
  padding-top:6px;
  padding-bottom:6px; 
  border-left:0px solid black;
  border-right:0px solid black;
  border-top:0px solid black;
  border-bottom:0px solid black;
}

.algoverif th {
  text-align:right;
  padding-left:10px;
  padding-right:10px;
  padding-top:6px;
  padding-bottom:6px; 
  border-left:0px solid black;
  border-right:0px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
}  

.algoverif tr>:nth-child(1){
  text-align:left; 
}  

.mielfran td {
   font-family: "Monotype"; 
   font-size:small;
   padding-left:10px;
   padding-bottom:2px;
   padding-top:2px;
   border-top: 0px solid black;
   border-bottom: 0px solid black;
   border-left:0px solid black;
   border-right:0px solid black;
}  

.octosyl td {
  padding-left:10px;
  padding-right:10px;
  padding-top:6px;
  padding-bottom:6px;
  border-left:0px solid black;
  border-right:0px solid black;
  border-top:0px solid black;
  border-bottom:0px solid black;
}

.octosyl th {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left:0px solid black;
  border-right:0px solid black;
}

.reveci td {
  border-top: 0px solid black;
  border-bottom: 0px solid black;
  border-left:0px solid black;
  border-right:0px solid black;
}  

#nature {
  width:66%;
}

#nature td {
  font-size:90%;
  text-align:left;
  padding-left:10px;
  padding-right:10px;
  padding-top:2px;
  padding-bottom:2px;
  border-left:0px solid black;
  border-right:0px solid black;
  border-top:0px solid black;
  border-bottom:0px solid black;
}

.legende {
  text-align:left;
  margin: 0 auto;
  padding-bottom:10px;
}  

.legende100 {
  width:100%;
  text-align:left;
  margin: 0 auto;
  padding-bottom:10px;
}  

.legende33 {
  width:33%;
  margin: 0 auto;
  text-align:left;
  padding-bottom:10px;
}  

.legende40 {
  width:40%;
  text-align:left;
  margin: 0 auto;
  padding-bottom:10px;
}  

.legende50 {
  width:50%;
  text-align:left;
  margin: 0 auto;
  padding-bottom:10px;
}

.legende66 {
  width:66%;
  text-align:left;
  margin: 0 auto;
  padding-bottom:10px;
}

.legende80 {
  width:80%;
  text-align:left;
  margin: 0 auto;
  padding-bottom:10px;
}  

.legende100 {
  width:100%;
  text-align:left;
  margin: 0 auto;
  padding-bottom:10px;
}  

.table33 {
  width:33%;
}  


.ptbordvert{
  font-size: small;
  border-bottom: 0px solid black;
  border-top: 0px solid black;
  padding-top:2px;
  padding-bottom:2px;
}
.ptbordhoriz{
  font-size: small;
  border-left: 0px solid black;
  border-right: 0px solid black;
  padding-top:2px;
  padding-bottom:2px;
}  

.ptbordgauche{
  font-size: small;
  border-right: 0px solid black;
  padding-top:2px;
  padding-bottom:2px;
}
.ptbordvertnord{
  font-size: small;
  border-bottom: 0px solid black;
  padding-top:2px;
  padding-bottom:2px;
} 
.ptborddroit{
  font-size: small;
  border-left: 0px solid black;
  padding-top:2px;
  padding-bottom:2px;
}  

.ptbordvertret{
  font-size: small;
  border-bottom: 0px solid black;
  border-top: 0px solid black;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:20px;
} 


 
.miniret{
  padding-left:10px;
  border: 0px solid black;
}

.defil {
  width:100%; 
}
.exergue {
  margin-left:60%;
}

.fig100 {
  width: 100%; margin: 0 auto; 
}
.fig80 {
  width: 80%; margin: 0 auto; padding-bottom: 15px; padding-top: 0;
}  

.fig66 {
  width: 66%; margin: 0 auto; padding-bottom: 15px; padding-top: 0; 
}  

.fig50 {
  width: 50%; margin-left: 20px; margin-bottom: 15px; margin-top: 0px; 
}  

.fig33 {
  width: 33%; margin-left: 20px; margin-bottom: 15px; margin-top: 0px; 
}  
#textnotes{display:block;width:100%}
#text{ display:block; margin-left:130px; margin-right:30px; text-align:justify; max-width:1000px; min-width:700px;}
#text.visible{ animation:.5s slideTextRight ease-in forwards; transition-delay:0;}
#text.invisible{ animation: .8s slideTextLeft ease-in forwards; transition-delay:0;}
#text.permanent{ margin-left:270px; }
#bandeau {width:462px}
#barrenav{display:flex;width:400px;position:fixed;top:6px;left:47px;z-index:9999;}
#barrenavBas{display:none;}
#chevrono{width:28px;}
#chevronf{width:28px;}
#navirga{width:26px;margin-top:-8px;}
/*
#footer {background:#2c3e50; padding:1.5em; text-align:center; color:#F1F1F1; font-size:.85em;}
*/

/*================================*/
/*=== Partie sur le Swipe Menu ===*/
/*================================*/
/* Menu burger */
#menu-burger {position:fixed; width:125px; height:42px; top:0px; left:5px; display:inline-block; padding-left:4px;cursor:pointer; z-index:9998;background:#85bbd7;border-radius:0 4px 4px 0}

#menu-burger .bar1,
#menu-burger .bar2,
#menu-burger .bar3 {width:32px; height:5px; background-color:#010101; margin:6px 0; border-radius: 2px 2px 2px 2px; transition:0.4s;}
#menu-burger:hover {opacity:.5; transition:.5s;}
#chevrono:hover, #chevronf:hover, #navirga:hover {opacity:.5; transition: .5s}
#menu-burger.clicked {background-color: rgba(255, 255, 255, 0);}
#menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-6px, -8px); transform:rotate(-45deg) translate(-8px, 7px);}
#menu-burger.clicked .bar2 {opacity: 0;}
#menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-6px, -8px); transform:rotate(45deg) translate(-8px, -8px);}
#menu-burger.permanent {background-color:rgba(255, 255, 255, 0);}
#menu-burger.permanent .bar1 {rotate:-45deg;position:fixed;top:9.5px}
#menu-burger.permanent .bar3 {rotate: 45deg;position:fixed;top:9.5px}
#menu-burger.permanent .bar2 {opacity: 0;}
/* Main menu (slide) */
#menu {
  position:fixed;
  z-index:9997;
  left:-245px;
  top:auto;
  padding:4em 2em;
  width:250px;
  min-height:100%;
  box-shadow:2px 0 1px #aaaaaa;
  background: linear-gradient(to right, #b4dff6, #85bbd7);}
#menu ul li {list-style:none;}
#menu ul li a {display:block; color:#fff; text-decoration:none; font-weight:700; background:#2c3e50; transition:background .5s; padding:1em; text-align:center; margin-bottom:.5em; box-shadow:1px 1px 0 #666}
#menu ul li a:hover {background:#f1c40f; transition:background .5s;}
#menu.visible {animation:.5s slideRight ease-in forwards; transition-delay:0;}
#menu.invisible {animation:1s slideLeft ease-out forwards; transition-delay:0;}
#menu.permanent{left:0px;}
#cadreChevron{left:230px;}
#chevron.invisible{display:none;}
#chevron.visible{display:block;left:230px;}

/* Animations pour le menu slide */
@keyframes slideTextRight {
   from {margin-left: 135px;}
   to {margin-left: 270px;}
}
@-webkit-keyframes slideTextRight {
   from {margin-left: 1200px;}
   to {margin-left: 135px;}
}  
@keyframes slideTextLeft {
   from {margin-left: 270px;}
   to {margin-left: 135px;}
}
@-webkit-keyframes slideTextLeft {
   from {margin-left: 270px;}
   to {margin-left: 135px;}
}



@keyframes slideRight {
	from {left:-245px;}
	to {left:0%;}
}
@-webkit-keyframes slideRight {
	from {left:-245px;}
	to {left:0%;}
}
@keyframes slideLeft {
	from {left:0%;}
	to {left:-245px;}
}
@-webkit-keyframes slideLeft {
	from {left:0%;}
	to {left:-245px;}
}

/* Responsive design */

@media (max-width:1024px) {
  h1 {
    margin-left: -10px;
    margin-right: 10px;
    font-size: 175%;
    text-align:center;
    
  }
  h2 {font-size:150%}
  h3 {font-size:120%}
  #textnotes {
    font-size:250%;
    padding:30px;
  }
  #textnotes ul {
    margin-left:20px;
  }
  
  #menu {left:-228px; width:230px;}
  #menu.invisible {animation:1s slideLeft ease-out forwards; transition-delay:0;}
  
  #menu-burger.clicked {position:fixed;}
  #menu-burger {top:1em; left:0; width:36px; height:36px; right:2em; position:fixed z-index:9999; background:#85bbd7;}
  #menu-burger .bar1,
  #menu-burger .bar2,
  #menu-burger .bar3 {width:26px; height:3px; background-color:#010101; margin:6px 0; border-radius: 2px 2px 2px 2px; transition:0.4s;}
  #menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-7px, 6px); transform:rotate(-45deg) translate(-7px, 6px);}
  #menu-burger.clicked .bar2 {opacity: 0;}
  #menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-7px, -8px); transform:rotate(45deg) translate(-7px, -5px);}
  /*#menu {display:none}*/
  #barrenav {display:none;}
  #barrenavBas{display:block;margin-left:auto;margin-right:auto;width:100px;border-collapse:collapse;}
  #text {max-width: 600px; min-width: 300px; text-align:left; margin-left:40px; margin-right:8px;}
  #text.visible{margin-left:40px;}
  #text.invisible{margin-left:40px;}
  #text.permanent{margin-left:40px;}
  #bandeau {width:80%}
  #cadreChevron{left:210px;}
  #chevron.invisible{display:none;}
  #chevron.visible{display:block;}
  blockquote {
    margin-left:8%;
  }  
  
  ol, ul {
    text-align:left;
    padding-left:15px;
    margin-left:0;
  }  
  
  
  td, th {
    border:1px solid black;
    padding:4px;
  }
  
  pre {font-size:70%;}
  
  div.case{
  max-width:100%;
  display:block;
  
}
  
  .fnote {
    width:100%;
    font-size:50%;
  }
  
  .table80 {
    width:100%;
  }  
  .table50 {
    width:100%;
  }
  
  #nature {
    width:700px;
  }
  
  .algoverif {
    width:100%; 
}  
  .octosyl {
    width:100%;
  }
  
  .legende33 {
    width:100%;
  }  
  .legende40 {
    width:100%;
  }  
  .legende50 {
    width:100%;
    text-align:left;
    padding-bottom:10px;
  }  
  .legende66{
    width:100%;
    text-align:left;
    padding-bottom:10px;
  }  
 .legende80 {
    width: 100%;
    text-align:left;
    padding-bottom:10px;
 }
 
 .table33 {
    width:100%; 
  }  
 
  .defil {
    width:100%;
    overflow:scroll;
  }  
  .exergue {
    margin-left:20%;
  }
  
  .fig33 {
    width: 100%; margin: 0; 
  }
  
  .fig50 {
    width: 100%; margin: 0; 
  }
  
  .fig66 {
    width: 100%; margin: 0; 
  }
  
  .fig80 {
    width:100%; margin: 0;
  }
  
  @keyframes slideTextRight {
    from {margin-left: 50px;}
    to {margin-left: 50px;}
  }
  @-webkit-keyframes slideTextRight {
    from {margin-left: 50px;}
    to {margin-left: 50px;}
  }  
  @keyframes slideTextLeft {
     from {margin-left: 50px;}
     to {margin-left: 50px;}
  }
  @-webkit-keyframes slideTextLeft {
     from {margin-left: 50px;}
     to {margin-left: 50px;}
  }
  
  /* Animations pour le menu slide */
  @keyframes slideRight {
    from {left:-228px;}
    to {left:0;}
  }
  @-webkit-keyframes slideRight {
    from {left:-228px;}
    to {left:0}
  }
  @keyframes slideLeft {
    from {left:0}
    to {left:-228px;}
  }
  @-webkit-keyframes slideLeft {
    from {left:0;}
    to {left:-228px;}
  }
}