// Variable des couleurs. Basé sur Gruvbox (https://github.com/morhetz/gruvbox) $bg0: #282828; $bg0_h: #1D2021; $bg0_s: #32302F; $bg1: #3C3836; $bg2: #504945; $bg3: #665C54; $bg4: #7C6F64; $fg0: #FBF1C7; $fg1: #EBDBB2; $fg2: #D5C4A1; $fg3: #BDAE93; $fg4: #A89984; $bg: $bg0_h; // Dark hard variation. $gray: #928374; $red: #CC241D; $lighred: #FB4934; $green: #98971A; $lightgreen: #B8BB26; $yellow: #D79921; $lightyellow: #FABD2F; $blue: #458488; $lightblue: #84A598; $purple: #B16286; $lightpurple: #D3869B; $aqua: #689D6A; $lightaqua: #8EC07C; $orange: #D65D0E; $lightorange: #FE8019; $lightgray: #A89984; $fg: $fg1; // Firefox a tendance à proposer sa propre fonte à taille fixe sur

, donc
// on la force ici pour être homogène avec .
body, code {
  font-family: "Iosevka", "monospace";
  font-size: 1.2rem;
}

// HTML doit faire la totalité de la hauteur de la page, avec une couleur plus
// claire que le contenu.
html {
  // Taille et marges.
  min-height: 100vh;
  margin: 0;

  // Couleur du fond.
  background-color: $bg0;
}

// Body, permet de définir 
body {
  // Définition de l'espace d'affichage.
  display: grid;
  justify-content: center;
  width: fit-content;
  min-height: 100vh;

  // Définition des marges.
  padding: 0;
  margin: 0 auto;
}

.monitor {
  // Couleurs
  color: $fg;
  background-color: $bg;

  // Taille et marges.
  margin-top: 2rem;
  margin-bottom: 0;
  padding: 1rem;
  // Évidemment, terminal à 80 colones.
  width: 80ch;

  // Bordure en haut et sur les côtés
  border-width: 1px;
  border-color: $fg;
  border-style: solid solid none;

  // Arrondi en haut uniquement.
  border-radius: 0.5rem 0.5rem 0 0;

  // Ombre.
  box-shadow: $fg 0 0 2rem 0.1rem;
}

// Style des liens.
a {
    outline: none;
    text-decoration: none;
    padding: 0;
}

a:link {
    color: $yellow;
}

a:visited {
    color: $lightyellow
}

a:focus {
    color: $green;
}

a:hover {
    color: $green;
}

a:active {
    color: $lightgreen;
}

// Colorisation du code en ligne.
code:not([class]) {
  color: $green;
}

// Espace après l'entête.
header {
  padding-bottom: 1em;
}

// Soulignement des titres
h1 {
  font-size: 1em;
  color: $fg0;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 1em;
  position: relative;

  // Permet de n'avoir la ligne que sur la largeur du texte et non du
  // conteneur.
  width: fit-content;
}

h1::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 35.71%,
    $fg0 35.71% 42.85%,
    transparent 42.85% 49.99%,
    $fg0 49.99% 57.13%,
    transparent 57.13%
  );
}

h2 {
  font-size: 1em;
  text-transform: uppercase;
  color: $fg0;
  margin: 0;
  padding-bottom: 1em;
  position: relative;

  // Permet de n'avoir la ligne que sur la largeur du texte et non du
  // conteneur.
  width: fit-content;
}

h2::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 49.99%,
    $fg0 49.99% 57.13%,
    transparent 57.13%
  );
}

// Séparation des articles.
article {
  padding-top: 1em;
}

article:not(:last-of-type) {
  margin: 0;
  padding-bottom: 1em;
  position: relative;
}

article:not(:last-of-type)::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 49.99%,
    $fg 49.99% 57.13%,
    transparent 57.13%
  );
}

// Séparation du pied de page
footer {
  margin: 0;
  padding-top: 1em;
  position: relative;
  color: $bg2;
}

footer::before {
  content: "";
  position: absolute;

  left: 0;
  top: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 49.99%,
    $fg 49.99% 57.13%,
    transparent 57.13%
  );
}

// Prompt and command line.
// ========================
.cmdblock {
  border: 0;

  p, ol, ul {
    margin: 0;
  }

  p.prompt:before {
    content: "$ ";
  }
}

// Breadcrumb.
// ===========
.breadcrumb {
    //display: inline;

    ol {
      display: flex;
      padding: 0;
    }

    li {
      display: flex;
    }

    li:not(:first-child)::before {
      content: "/";
    }

    li.file {
      opacity: 0;
    }
}

ul.lsresult {
  padding: 0;
  display: table;

  li {
    display: table-row;
  }

  li span {
    display: table-cell;
  }

  li span:not(:first-child) {
    padding-left: 1ch;
  }
}

// Arbres de type ANSI
main, footer {
  /* base */
  ul {
    list-style: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 1em;
    padding-left: 0ch;
  }

  /* branches ASCII */
  ul li {
    position: relative;
    padding-left: 4ch;
  }

  /* branche intermédiaires*/
  ul li::before {
    content: "├──";
    position: absolute;
    left: 0;
  }

  /* dernière branche */
  ul li:last-child::before {
    content: "└──";
    position: absolute;
    left: 0;
  }

  /* ligne verticale devant les sous-arbres. */
  ul li:not(:last-child):has(ul) {
    background-image: linear-gradient($fg);
    background-size: 0.25ch 100%;
    background-repeat: no-repeat;
    background-position: 0.375ch 1em;
  }

  /* sous-arbres */
  ul ul {
    list-style: none;
    margin: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
}

// Suppression de l'espace entre un paragraphe et la liste qui le suit.
*:has(+ ul), *:has(+ * ul) {
  margin-bottom: 0;
}

// Menus.
// ======
.menu {
    ul.tree {
        margin: 0;
        padding: 0;
        list-style: none;

    }

    /*ul.tree-child {
      border-left: solid 2px;
    }*/

    // 
    ul.tree ul {
     list-style: none;
      margin: 0;
      padding: 0;
    }
    ul.tree ul {
      margin-left: 0.5ch;
    }
    ul.tree ul ul {
      margin-left: 4ch;
    }

    ul.tree ul li {
      margin: 0;
      padding: 0 0.3ch;
      //line-height: 20px;
      //color: #369;
      //font-weight: bold;
      border-left:0.1ch solid $fg;

    }
    ul.tree ul li:last-child {
        border-left:none;
        display: inline;
    }
    ul.tree ul li:before {
       position:relative;
       top:-0.3em;
       height:0.5em;
       width:2ch;
       //color:white;
       border-bottom:0.1em solid $fg;
       content:"";
       display:inline-block;
       left:-0.3ch;
    }//*/
    ul.tree ul li:last-child:before {
       border-left:0.1ch solid $fg;
    }

    /*li {
        //display: inline-block;
    }*/

    /*li:not(:last-child)::after {
      content: "|";
    }*/

    a {
        //display: block;
        //padding: 6px 12px;
        //text-decoration: none;
    }
}