:root {
  --lgray:#d8dee2;
  --mgray:#7f8e9b;
  --light:#746ac0;
  --mid:#413882;
  --dark:#1b1927;

  --header-height:2.5em;
  --site-width: 1000px;
  --border-radius:3px;
}

* {
    box-sizing: border-box;
}


body{
  font-family: 'Zarathustra';
  margin: 0 ;
  background:var(--dark);
  color:var(--lgray);
  height:100vh;
  font-size: 13pt;
  display: flex;
  flex-direction: column;
  
  
}

body:after {
  position: absolute;
  top:0;
  left:0;
  content:' ';
  background: transparent;
  width:100vw;
  height: 100vh;
  z-index:-1;
  background-image: url('/assets/img/dirty-bg.png');
  background-repeat: repeat;
  
}
body>*{
  margin:auto;
}



/****************************************

MAIN   

****************************************/

body>main {
  max-width:var(--site-width);
  flex-grow: 1;
  padding-top: var(--header-height);
  width:100%;
}

@media screen and (max-width: 1000px) {

  body>main {   
    margin: 10px;
    width:auto;
  }
  
}


body>main>header{
  text-align: center;
  margin:2em 0;
  
}

body>main>header #breadcrumbs {
  color: var(--mid);
    margin-bottom:.5em;

}

body>main>header #breadcrumbs a:hover{
    color:var(--light);

}

body>main>header #page-description {
 font-style: italic;
  margin:0;
}
body>main>header h1{
  margin:0;
    background-color: transparent;

}

body>main>header a{
  color:inherit
}

body>main>article{
    border-radius: var(--border-radius);
  color:black;
  background: var(--lgray);
  margin: 1em auto;
  box-shadow: 0 0 50px -10px black;
}


body>main>article>section {
    padding: .5em 2em;

}
body>main>article>section{
      border-radius: inherit;

    box-shadow: 0 -75px 70px 5px rgba(20,0,40,0.15);
}

body>main #page-excerpt {
  font-size:1.2em;
  padding: 2em;
}


body>main #directory-index {
  padding: 2em;
}


body>main #directory-index  .page-list ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap:1em;
  padding: 0;
  margin: 0;
}


body>main #directory-index  .page-list  li {
  display: flex;
  flex-direction: column;
}


body>main #directory-index  .page-list a {
    font-size:1.2em;
}

body>main>article a {
  color:var(--mid);
  font-weight:bold;
}

body>main>article a:hover {
  color:var(--light);
}

body>main>article img{
  max-width:100%;
  display: block;
  margin:auto;
    
}

body>main>article section.page-preview {
  border:1px solid;

}


body>main>article>section>form  {
  text-align:center
}

body>main>article>section>form>*  {
  margin:.2em;
}

body>main>article>section>form input {
  font-size: 1em;
}

body>main>article>section>form button {
    font-size: 1.2em;

}


body>main>.tool-menu{
  background: var(--mgray);
  color: black;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  overflow: hidden;
}

body>main>.tool-menu form{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:1px;
  align-content: stretch;
  
}

body>main>.tool-menu legend {
    color:var(--light);
  float:left;
    width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom:.2em;
}

body>main>.tool-menu fieldset {

  display: block;
  background: var(--lgray);
  border:none;
  padding: .2em .5em;
  margin:0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  text-align: center;
    flex-grow:1;

}

body>main>.tool-menu fieldset:first-child {
  flex-grow:2;
}

body>main>.cards{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 0 0 var(--border-radius) var(--border-radius);

  gap:10px;
  background: var(--mgray);
  padding: 10px;
}


body>main>.cards .card:hover {
  transform: scale(110%);
  box-shadow: 0 0 50px  black;
  z-index: 10;
  transition:100ms;
}



body>main>article section.page-preview {
  border:1px solid var(--mid);
  border-radius:var(--border-radius);
  overflow: hidden;
  margin : 2em 0;
}

body>main>article section.page-preview h2,
body>main>article section.page-preview a {
  display: block;
  background: var(--mid);
  text-align:center;
  color:var(--lgray);
  font-size:inherit;
  margin:0;
  padding: .1em .5em;
}

body>main>article section.page-preview a {
    background: var(--lgray);
  color:var(--mid);
    border-top: 1px solid 
}

body>main>article section.page-preview p {
  margin: .5em;
}

body>main>article section.page-preview p,
body>main>article section.page-preview h2 {
    font-size:1.2em;

}
body>main>article section.page-preview a:hover {
  background:var(--light);

}

body>main .basic-tech {
  display: flex;
  justify-content: center;
  gap:1em;
  flex-wrap: wrap;
  margin:1em 0;
}

/* Galery */

body>main .image-gallery {
  
  display: flex;
  flex-wrap: wrap;
}

body>main .image-gallery .image-thumb {
  background: white;
  width: 300px;
  height: 300px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body>main .image-gallery .image-thumb img {
  max-height: 50%;
  max-width:100%;
  flex-grow: 1;
}
body>main .image-gallery .image-thumb a {
  font-size : .8em;
  
}

/* Print pages */

body>main #print-pages {
  background: var(--light);
  padding:10px;
}

/* Glossaire */

h3:has(.step) {
    font-size: 8pt;
  margin-top: 3em;
  

}
h3 .step {
  transform-origin: center left;
  scale:170%;
}

body>main strong.wip {
  color: var(--light);
  border : 1px dashed;
  padding: .1em 1em; 
}



/****************************************

HEADER   

****************************************/


body>header{
      position: fixed;
  height: var(--header-height);
  font-size:1.15em;
    top: 0;
    z-index: 10;
  background: black;
  width: 100vw;
    border-bottom: 1px solid var(--light);

}

body>header #menu-bar{
  max-width:var(--site-width);
  margin: auto;
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
    gap:1em;
  padding: .5em 1em;

}

body>header nav ul{
  list-style: none;
  display: flex;  
  flex-wrap: wrap;
  gap:1em;
  margin:0;
  padding: 0;
}

body>header nav a {
  font-weight:bold;
}

body>header a:hover {
  color:var(--light);
}


body>header a {
  color:inherit;
  text-decoration: none;
}

body>header h1 {
  font-size:inherit;
  color: var(--light);
  margin:0;
}

body>header h1 a:hover {
    color:var(--lgray);

}

body>header #logo {
  height: 1em;
}

body>header #logo:hover {
  filter:drop-shadow(0 0 5px var(--light));
}

body>header  #menu-toggle {
  opacity: 0;
  display:none;
}

body>header #menu-button {
  display:none;
}



@media screen and (max-width: 800px) {


  body>header h1 {
        z-index: 1;
  }
  body>header nav ul {
    flex-direction: column;
    text-align:right;
 }
  
  body>header #menu-toggle ~ ul {
    position:fixed;
    width:100%;
    top: -300px;
    transition: 1000ms;
    right:0;
    background: black;
    border-bottom:1px solid gray;
    padding:1em;
    padding-top:60px;
  }
  
  body>header #menu-toggle:checked ~ ul {
    top: 0 !important;
  }
  
  body>header #menu-button {
    --size:24px;
    display:block;
    width: var(--size);
    height: var(--size);
    right:20px;
    position: absolute;
    cursor: pointer;
    z-index: 1;
  }
  
 body>header #menu-button > span{
     display:block;
     width: var(--size);
    height: var(--size);
    background-image:url('/assets/img/burger.svg');
       background-repeat: no-repeat;
   background-position: center;


 }
  
  body>header #menu-toggle:checked + #menu-button > span {
    background-image:url('/assets/img/quitter.svg');  
    } 
}


/****************************************

FOOTER   

****************************************/

body>footer {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:black;
  width:100%;
  padding: 1em;
}

body>footer:after{
  content: ' ';
  width: 100%;
  position: absolute;
  top:0;
  height: 50px;
  box-shadow: 0 0 50px 50px black;
  z-index: -1;
}
body>footer>:not(:first-child){
    font-size: .7em;

}

body>footer nav {
  display: inline-block;
  border-bottom: 1px solid var(--light);
  padding-bottom: 1em;
  margin-bottom: 1em;
}
body>footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  gap:2em;
}

body>footer nav a {
  font-weight:bold;
  text-decoration: none;
}

body>footer a:hover {
  color:var(--light);
}


body>footer p {
  margin: .2em;
}

body>footer a {
  color:inherit;
}

/*************************************
divers
**************************************/

a.button, button {
  background: var(--light);
  border-radius:50px;
  border:1px solid var(--mid);
  border-color: var(--mgray);
  padding: 5px 15px;
  color:var(--lgray);
  text-align: center;
  background: linear-gradient(0deg,var(--mid) 10%,var(--light));
  cursor:pointer;
  text-decoration: none;
}
a.button:hover, button:hover {
    background: var(--light);
  color:var(--lgray);
}

a.button:active, button:active {
  background: linear-gradient(0deg,var(--light) 10%,var(--mid));
}

button:disabled {
  background: linear-gradient(0deg,var(--mgray) 0%,var(--lgray) 150%);
  cursor:not-allowed;
}


ul {
  padding-left:1em;

}


figure {
     margin: 1.5em 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap:.7em;
}

figure img {
  width:200px;
}

figure figcaption {
 font-size:.7em;  
}

h1 {
  text-align: center;
  font-size:3em;
  
}



h2 {
    color:var(--mid);

  text-align: center;
  border-bottom:1px solid;
  margin-top:2em;
}



pre {
  border:1px solid gray;
  background: white;
  padding: 1em;
  white-space: pre-wrap;
    width:100%;
  
}

table {
  border-collapse: collapse;
  overflow:hidden;
}

table th {
  background: var(--light);
  color:var(--lgray);
} 

table td,
table th {
  border : 1px solid var(--mid);

  padding: .1em .5em;
}

ol {
  counter-reset: item;
  padding: 0;
}
ol li { display: block }
ol li:before {
  background:#9c709e;
  display: inline-block;
  border:1px solid black;
  margin:.2em .5em;
  height:1.2em;
  width:1.2em;
  border-radius:1.2em;
  text-align: center;
  line-height: 1.2em;
  content: counter(item);
  counter-increment: item;
}

code {
  font-size: .8em;
  background: var(--mgray);
  border-radius:var(--border-radius);
  padding: 0 .2em
}

section:has(.half-w){
  columns:2;
  column-gap: 2em;
  
}


.half-w {
  break-inside: avoid;
}