html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
   font-family: sans-serif;
   /* font-size: clamp(14px, 1.2vw, 16px); */
}
article {
   padding: 0 1em 0 1em;
}
.container {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  max-width: 1300px;
  margin: 0 auto;
}

.top {
   height: 60px;
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
   padding: 1rem 0;
   border-radius: 15px 15px 0 0;
}
.logo {
   height: 60px;
   padding: 0px 0 0 20px;
}
.domosys-org {
    display: block;
    align: center;
    height: 70px;
    width: auto;
}
#theme-toggle {
   align-self: flex-start;
   border: none;
   font-size: 1.2rem;
   cursor: pointer;
   margin-right: 1em;
}

.footer {
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    border-radius: 0 0 15px 15px;
}

.middle {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}
.contact,
.menu {
   display: none;
  width: 250px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: transform 0.3s ease;
}

.contact {
  flex: 0 0 250px;
  overflow-y: auto;
}

.menu {
  flex: 0 0 250px;
  overflow-y: auto;
}

.content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1rem;
  min-width: 0;
  min-height: 0;
  display: block;
}
#toggle-contact,
#toggle-menu {
  display: none;
}

#contact-tab,
#menu-tab {
   position: absolute;
   padding: 0 10px 2px 10px ;
   font-size: .8em;
   height: 15px;
   color: var(--cl-links);
   background-color: var(--bg-top-end);
   border: dotted black 1px;
   cursor: pointer;
   z-index: 1000;
   display: none;
     transform-origin: center center;
  transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;

}
#contact-tab {
   top: 92px;
   left: 0;
   border-radius: 0 6px 0 0;
   transform: rotate(90deg) translateY(-100%);
   transform-origin: left top;
   transition: transform 0.3s ease, left 0.3s ease;
}
#menu-tab {
   top: 90px;
   right: 0;
   border-radius: 6px 0 0 0;
   transform: rotate(-90deg) translateY(-100%);
   transform-origin: right top;
   transition: transform 0.3s ease, right 0.3s ease;
}
.menu-block ul {
   list-style: none;
}
.menu-block, .contact-block {
   outline: solid var(--cl-links) 1px;
   border-radius: 6px;
   margin: 0 .5em 1em .5em;
   padding: 0 1em .5em 1em;
}
.contact-block {
   margin: .5em;
   padding: .5em;

}
.contact-block > p {
    margin-left: 1rem;
}
.contact-title, .menu-title {
   display: block;
   position: relative;
   border-bottom: solid var(--cl-links) 1px;
   width: 100%;
   margin: 0;
   padding: .5em 0 .5em 0;
   z-index: 10;
}
/*.vcard,
.legal {
   display: inline-block;
   width: 22px;
   height: 22px;
   margin: 6px;
   margin-left:1rem;
   vertical-align: middle;
   background-color: var(--cl-icon); 
}*/
.home::before,
.menu-title::before,
.mail::before,
.tel::before,
.chat::before,
.contact-title::before,
.vcard::before,
.legal::before {
   content: "";
   display: inline-block;
   width: 16px;
   height: 16px;
   margin-right: 6px;
   margin-left: 1em;
   vertical-align: middle;
   background-color: var(--cl-icon); 
}
.vcard::before,
.legal::before {
   width: 24px;
   height: 24px;
}
.vcard::before {
    mask: url("/theme/images/printer2.svg") no-repeat center;
   -webkit-mask: url("/theme/images/printer2.svg") no-repeat center;
}
.legal::before { 
   -webkit-mask: url("/theme/images/legal.svg") no-repeat center;
    mask: url("/theme/images/legal.svg") no-repeat center;
}

.home {
   margin-left: 1.5em;
   padding-bottom: 0.5em;
}
.home::before {
  margin-right: 6px;
}
.home::before {
   mask: url("/theme/images/home.svg") no-repeat center / contain;
}
.menu-title::before {
   mask: url("/theme/images/menu.svg") no-repeat center / contain;
}
.mail::before {
   mask: url("/theme/images/mail.svg") no-repeat center / contain;
   /*-webkit-mask-image: url("../images/mail.svg");*/
}
.tel::before {
   mask: url("/theme/images/phone.svg") no-repeat center / contain;
   /*-webkit-mask-image: url("../images/phone.svg");*/
}
.chat::before {
   mask: url("/theme/images/chat.svg") no-repeat center / contain;
   /*-webkit-mask-image: url("../images/chat.svg");*/
}
.contact-title::before{
   mask: url("/theme/images/vcard.svg") no-repeat center / contain;
/*-webkit-mask: url("/theme/images/vcard.svg") no-repeat center / contain;*/
}
ul.raisons,
ul.realisations,
ul.articles {
  list-style: none;
  padding-left: 0;
  margin: .7em 0 .5em 0;
}
ul.raisons li,
ul.realisations li,
ul.articles li { 
  position: relative;
}
ul.raisons li {
   padding: 5px 0px 5px 30px;
}
ul.realisations li,
ul.articles li {
  padding-left: 0px;
}
ul.raisons li::before,
ul.realisations li::before,
ul.articles li::before,
a[target="_blank"][href^="http"]::after {
   content: "";
   display: inline-block;
   width: 20px;
   height: 20px;
   margin-right: 6px;
   vertical-align: middle;
   background-color: var(--cl-icon);
}
ul.raisons li::before {
   mask: url("/theme/images/next.svg") no-repeat center / contain;
   -webkit-mask-image: url("/theme/images/next.svg") no-repeat center / contain;
}
ul.realisations li::before {
   mask: url("/theme/images/tools.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/writing.svg") no-repeat center / contain;
}
ul.realisations li.tag-impression3d::before {
   mask: url("/theme/images/3Dprinter.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/3Dprinter.svg") no-repeat center / contain;
}
ul.articles li.tag-securite::before {
   mask: url("/theme/images/keys.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/keys.svg") no-repeat center / contain;
}

ul.articles li::before {
   mask: url("/theme/images/writing2.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/writing2.svg") no-repeat center / contain;
}
ul.articles li.tag-terminal::before {
   mask: url("/theme/images/terminal.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/terminal.svg") no-repeat center / contain;
}
ul.articles li.tag-histoire::before {
   mask: url("/theme/images/scroll2.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/scroll2.svg") no-repeat center / contain;
}

ul.articles li.tag-code::before {
   mask: url("/theme/images/terminal.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/terminal.svg") no-repeat center / contain;
}
ul.realisations li.tag-code::before {
   mask: url("/theme/images/terminal.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/terminal.svg") no-repeat center / contain;
}
ul.realisations li.tag-construction::before {
   mask: url("/theme/images/construction.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/construction.svg") no-repeat center / contain;
}
ul.articles li.tag-admin::before {
   mask: url("/theme/images/params.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/params.svg") no-repeat center / contain;
}
ul.articles li.tag-python::before {
   mask: url("/theme/images/python.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/python.svg") no-repeat center / contain;
}
ul.articles li.tag-router::before {
   mask: url("/theme/images/router.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/router.svg") no-repeat center / contain;
}
a[target="_blank"][href^="http"]::after {
   width: 10px;
   height: 10px;
   margin-bottom: 8px;
   margin-left: 2px;
   background-color: currentColor;
   mask: url("/theme/images/external.svg") no-repeat center / contain;
   -webkit-mask: url("/theme/images/external.svg") no-repeat center / contain;
}
.more {
    font-size: 0.8em;
    text-align: right;
    display: block;
    text-decoration: none;
}
.article-list li {
   margin-bottom: 1em;
    border-bottom: 1px dashed var(--bd-summary);
    padding-bottom: 1em;
}
.article-list li:last-child {
    border-bottom: none;
}
.summary {
   background-color: var(--bg-summary);
   padding: .2em .5em;
   margin-top: 20px;
   border-radius: 0.5em;
   overflow: hidden;
   font-size: 0.8em;
   filter: grayscale(30%);
   border: var(--bd-summary) dotted 1px;
}
@media (max-width: 920px) {
   #contact-tab {
      display: block;
      position: fixed;
      top: 86px;
      left: 0;
   }
   .contact {
      position: fixed;
      top: 88px;
      bottom: 20px;
      left: 0;
      width: 250px;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 20;
   }
   #toggle-contact:checked ~ .container .contact {
      transform: translateX(0);
   }
   #toggle-contact:checked ~ #contact-tab {
      left: 278px;
   }
}
@media (max-width: 1200px) {
   #menu-tab {
      display: block;
      position: fixed;
      top: 86px;
      right: 0;
   }
   .menu {
      position: fixed;
      top: 88px;
      bottom: 20px;
      right: 0;
      width: 250px;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 20;
   }
   #toggle-menu:checked ~ #menu-tab {
      right: 278px;
   }
   #toggle-menu:checked ~ .container .menu {
      transform: translateX(0);
   }
}
.maj {
   font-style: italic;
   font-size: .8rem;
}