html {
    scroll-behavior:smooth;
    font-size:clamp(14px, 1.5vw,18px);
}
@media all /* reprises du theme par défaut */ {
  font-face {
    font-family: 'open_sansregular';
      src: url('../fonts/OpenSans-Regular-webfont.eot');
      src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
      url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
      url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  body {
    font-family: 'open_sansregular', sans-serif;
  }   
  @media screen /* tag/size/color du theme par defaut en tailles reduites*/ {
    /* https://www.w3schools.com/colors/colors_trends.asp (The 10 Hottest Fall Colors for 2016) */

.tag-size-1 a {
	font-size: 0.8rem;
	/* Riverside  */
	color: #4C6A92;
}

.tag-size-2 a {
	font-size: 0.9rem;
	/* Airy Blue  */
	color: #92B6D5;
}

.tag-size-3 a {
	font-size: 1rem;
	/* Sharkskin  */
	color: #838487;
}

.tag-size-4 a {
	font-size: 1.1rem;
	/* Bodacious */
	color: #B76BA3;
}

.tag-size-5 a {
	color: #AF9483;
	/* Warm Taupe */
	font-size: 1.2rem;
}

.tag-size-6 a {
	color: #AD5D5D;
	/* Dusty Cedar */
	font-size: 1.3rem;
}

.tag-size-7 a {
	font-size: 1.4rem;
	/* Lush Meadow */
	color: #006E51;
}

.tag-size-8 a {
	font-size: 1.5rem;
	/* Spicy Mustard */
	color: #D8AE47;
}

.tag-size-9 a {
	font-size: 1.6rem;
	/* Potter's Clay */
	color: #9E4624;
}

.tag-size-10 a {
	font-size: 1.7rem;
	/* Aurora Red */
	color: #B93A32;
}

.tag-size-11 a {
	font-size: 1.8rem;
	/* Snorkel Blue */
	color: #034F84;
}
  }
}
@media all /*grid layout */ {
  @media all /* main Layout */ {
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(min-content, auto) 1fr;
      grid-template-rows: auto 1fr auto auto;
      grid-auto-flow: row dense;
    }
    body > aside {
      grid-column: 1;
      grid-row: 1 / -1;
      min-width: 200px;
      height: 100vh;
      align-self: start;
      overflow:auto;
    }
    body > header {
      grid-row: 1;
      grid-column: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    body > main {
      grid-row: 2;
      grid-column: 2;
      min-width:0;
    }
    body > div {
      grid-row: 3;
      grid-column: 2;
    }
    body > footer {
      grid-row: 4;
      grid-column: 2;
    }
  }
  @media all /* partial layouts / menus */ {
    body > * {
      padding: 1rem;
    }

    body > header,
    body > header > nav,
    body > footer {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 4rem;
    }
    body > header > nav {
      padding:0;
      margin: auto 0 0;
      min-height:auto;
    }
    body > header {
      padding-inline-start: 4rem;
      margin-block: 0;
      min-height:15vw;
    }
    body > header > h1 {
      margin-right: auto;
      padding-inline-end:1em;
    }
    body > header >h1  small {
      font-size:0.5em;
      color:gray;
    }    
    body > header > nav {

    }
    body > aside > ul {
      margin-bottom: 3em;
    }
    .repertory.menu.breadcrumb,
    .nav-menu ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      gap: 0.5em;
      font-weight: bold;
    }
    .pages.nav-menu > ul > li > span:before {
      content: "➤";
      display: inline-block;
      color:#4A83E2;
      transition: 0.25s;
    }
    .pages.nav-menu > ul > li > span,
    .pages.nav-menu > ul > li > ul{
      background:#92AFE0;
      padding:0 0.25em 0.25em;
      right:0.25em;
      min-width: calc(100% - 0.5em);
      border-radius: 0 0 3px 3px;
    }
    .pages.nav-menu > ul > li > span {
      padding-top:0.25em;
      /*! display: block; */
    }
    .pages li li:hover {
      background:white;
    }
    .pages.nav-menu > ul > li:hover > span:before {
      transform: rotate(90deg);
    }
    .pages.nav-menu li {
      position:relative;
      padding:0 0.25em;
    }
    body > aside ul ul,
    .nav-menu ul ul {
      display: none;
      position: absolute;
	  background:#D3D3D3;
	  line-height:1.6
    }
    body > aside ul li:hover ul,
    .nav-menu ul li:hover ul {
      display: block;
    }
  }
}
@media all /* responsive side bar */ {
  @media screen /* hide/show aside */ {
    body > aside {
      position: sticky;
      top:0;
      box-shadow:var(--aside-shadow,0);
    }
    body > aside #aside-logo {
      display:block;
      margin:3em auto;
      width:70%;
    }
    [id="respond-sidebar"] {
      display: none;
      grid-row: 1;
      grid-column: 1;
      position: absolute;
      right: 100vw;
    }
    label[for="respond-sidebar"] {
      grid-row: 1;
      grid-column: 2;
      font-size: 3rem;
      cursor: pointer;
      -webkit-text-stroke:var(--lrs-stroke, 0 transparent);
      text-shadow:var(--lrs-txt-shadow, 0 0 transparent);
      pointer-events: none;
      z-index: 1;
    }
    label[for="respond-sidebar"]::before {
      content: "\1F5D9";
      color:var(--lrs-b-color, #333);
      font-size: 2.5rem;
      line-height: 4rem;
      margin-left: -4rem;
      position: sticky;
      left: 1rem;
      right: 1rem;
      pointer-events: auto;
    }
    label[for="respond-sidebar"],
    nav {
      position: sticky;
      top: 0;
    }
    aside {
      overflow: hidden;
      width: 300px;
      transition: 0.5s;
    }
    input[id="respond-sidebar"]:checked ~ aside {
      margin-inline-start: -300px;
    }
    input[id="respond-sidebar"]:checked ~ label[for="respond-sidebar"]::before {
      content: "\2261";
      font-size: 3.5rem;
    }
  }
  @media screen and /*hide/show*/(max-width: 700px) {
    [id="respond-sidebar"]:not(:checked) ~ aside {
      margin-inline-start: -300px;
    }
    input[id="respond-sidebar"]:checked ~ aside {
      margin-inline-start: 0px;
      margin-inline-end: -300px;
    }
    [id="respond-sidebar"]:not(:checked)
      ~ label[for="respond-sidebar"]::before {
      content: "\2261";
      font-size: 3.5rem;
      transition: 0.5s;
    }
    input[id="respond-sidebar"]:checked ~ label[for="respond-sidebar"]::before {
      content: "\1F5D9";
      font-size: 2.5rem;
      margin-inline-start: calc(300px - 4rem);
      transition: 0.5s;
    }
  }
  @media screen /* aside menus */ {
    body > aside > ul {
      border-block-start:var(--as-ul-brd-top, 0);
      list-style: none;
      display: grid;
      grid-auto-rows: minmax(2.5rem, 1fr);
    }
    body > aside li {
      border-block-end:var(--as-ul-brd-top, 0);
      padding: 0 0.25em;
      display: grid;
      align-items: center;
    }
    body > aside li:hover ,
    body > aside li.active {
      box-shadow: var(--highlight-bg-li);
    }
  }
}
@media all /* font & colors / space & fonts*/ {
  @media screen /* bg */ {
    body {
      background:var(--bg-body,none);
    }
    body > header {
      font-weight:bold;
      background:var(--bg-header,none);
      text-shadow:1px 1px  2px white;
    }
    body > header{
      background:var(--fade-gradient), var(--bg-defaut) 0 0 / cover;
    }
    body > header > nav {
      flex-wrap: wrap;
    }
    body > aside {
      background: var(--bg-aside,#ccc);
    }
    body > main {
      border-top: var(--main-bdr-top,none);
    }
    body>div {
      background:var(--bg-div,none);
      position:sticky;
      bottom:0;
    }
    body > footer {
      background: var(--bg-footer,none);
    }
  }
  @media screen /*color & text*/ {
    body {
      color:var(--body-color,black);
    }
    body > header {
      color: var(--header-color,#333);
      font-variant: small-caps;
      letter-spacing: 0.2rem;
    }
    body > header > nav {
    }
    body > aside {
      color:var(--rgba-color);
      text-shadow:var(--aside-txt-shadow, 0 0 transparent);
    }
    body > header a,
    body > aside a {
      color: inherit;
      text-decoration: none;
    }
    body > header a:hover,
    body > header li.active a,
    body aside li.active a,
    body aside a:hover {
      color:var(--active-hover,inherit);
    }
    body > main {
    }
    body > div {
      text-align: center;
    }
    body > footer {
    }
  }
  @media screen /* aside */ {
    aside details {
      padding-bottom: 0.5em;
      border-bottom: solid;
	  margin-bottom:3em;
    }
    aside details summary {
      font-size: 1.25rem;
      font-weight: bold;
      direction: rtl;/* deplace l'icone derriere le texte*/
      text-align: end;
      cursor: pointer;
      border-radius: 3px 3px 0 0;
      padding: 0.05em 0.2em;
    }
    aside details summary:hover {
      box-shadow: var(--highlight-bg-li,none);
    }
    aside details[open] summary {
      box-shadow:  var(--highlight-bg-li,none);
      margin-bottom: 0.5em;
      border-bottom:var(--as-ul-brd-top);
    }
    aside details summary::before {
      content: " .";
    }
    aside details summary::marker {
      direction: ltr;
      color: var(--details-marker);
      font-size: 1.5rem;
    }
    aside details a {
      display: inline-block;
      margin: 0.2em;
      vertical-align: middle;
      padding: 0.1em 0.2em;
      border-radius: 3px;
    }
    aside details a:hover {
      background:var(--bg-details-a,none);
    }
  }
}
@media all /* forms &Cie*/ {
  body > aside  form {
    display: flex;
    height: 4.5rem;
    align-items: center;
    gap: 0.25em;
    margin-inline-end: 2rem;
    border-bottom: solid;
    margin-bottom: 3rem;
  }
  body > aside  form :is(div,p) {
    display:contents;
  }
  input, textarea {
    border-radius: 0.15em;
    background: var(--bg-form-el,initial);
  }
  body > aside input[type="text"] {
    border: none;
    outline: solid transparent;
    padding: 0.2em;
    background:var(--bg-aside-ipt,initial);
  }
  [type="submit"][value="🔎︎"] {
    all: unset;
    font-size: 2rem;
    vertical-align: middle;
    cursor: pointer;
	color:var(--active-hover,inherit);
  }
  body >aside form input[type="text"].searchfield {
      width:auto;
  }
  section h3 {
    max-width:700px;
    margin:3em 0 0 ;
    color:var(--lrs-b-color,black);
	border-bottom:var(--as-ul-brd-top);
  }
  section form {
    max-width:600px;
    margin:auto;
  }
  section form fieldset {
	border-color:transparent;
    display:grid;
    grid-template-columns:auto auto;
    justify-content:center;
    gap:1em;
	padding-top:1em;
  }
  section label{
	text-align:end;
	color:rgb(45, 100, 187);
  }
  #id_answer , 
  #no_spam, 
  #goCom,
  #com_message{
    grid-column:1/-1;
  }
  #id_answer:not(:empty) {
    padding:1em;
    border-radius:3px;
    background:white;
  }
  #id_answer a[rel="nofollow"] {
    float:right;
  }
  #goCom  {
	  margin:1em auto;
	  background:rgb(45, 100, 187);
	  color:ivory;
	  padding:0.5em;
	  border-radius:6px;
    grid-column:1/-1;
	  box-shadow: 0 0 2px black;
  }
}
@media all /* articles */ {
  article {
    text-align:justify;
    max-width:1200px;
    margin:1em auto;
  }
  .repertory.menu.breadcrumb {
    max-width:1200px;
    margin:auto;
  }
  .repertory.menu.breadcrumb li + li::before {
    content:' / ';
  }
  article header {
    margin:1em 2em;
  }
  article header small{
    display:inline-flex;
    flex-wrap:wrap;
    gap:0 1rem;
  }
  section {
    max-width:3000px;
    margin:auto;
  }
  article p.date, 
  article div.author {
    text-align:end;
  }
  body  :is(h2,h3,h4,h5,h6) {
    margin-block:1rem;
  }
  :is(header,article) :is(h1 :not(a),h2,h3,h4,h5,h6), 
  article :is(h1,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a), 
  p.more a,
  li::marker {
    color:var(--lrs-b-color,black);
    width:max-content;
    max-width:100%;
    text-decoration:none;
  }
   
  article :is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a) {
      border:none;
  }
  article p.more {
    margin-block: 1em 2em;
    text-align: end;
    padding-inline-end: 5em;
}
  article img {
    display:block;
    margin:0.25em auto;    
  }
  article img.art_thumbnail {
    width:100%;
    height:20vh;
    object-fit:scale-down;
    background:#B8A9A4 ;
    transition:0.5s;     
  }
  article img.art_thumbnail:hover {
    object-fit:contain;
    object-position: 0 0 ;
  }
  article + hr {
    width:35%;
    margin:auto;
    color:white
  } 
  .search_results p:not(:empty) {
    background:rgba(255,255,255,0.1);
    margin:3rem 6rem 0  2rem;
    border-bottom: var(--bg-details-a) solid 1px;
    color:#555;
    text-indent:0.25em;
  }
  /* comment */
  .comment.level-1 {
    margin-inline-start:2rem;
    background:rgba(255,255,255,0.15)
  }
  article dl,
  article ol, 
  article ul,
  article form,
  article blockquote,
  article table  {
    width:max-content;
    margin:1em auto;
    max-width:80%;
    min-width:65%;
    display:block;
  }
  article dd{
    margin-inline-start:1em;
    font-style:italic;
  }
  pre {
    background:var(--bg-aside-ipt);
    margin:0.25em;
    padding:0.25em;
    border:solid var(--bg-details-a) 1px;
    white-space:pre-wrap;
  }
  body table {
      display:table;
  }
  
  table, th, td {
    border-collapse:collapse; 
  }
  
  th,td{
    padding:0.25em;
  }
  th {
   box-shadow: var(--highlight-bg-li);
  }
}
@media all /* footer */ {
  body > footer ul {
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    gap:1em;
    justify-content: space-around;
    min-width:90%;
  }
  body > footer ul li:last-child{
    margin-inline-start:auto;
  }
  
  footer a[href$="#top"] {
    font-size:0;
    text-decoration:none;
  }
  footer a[href$="#top"]::before {
    content:'\25B2';
    font-size:2.5rem;
    -webkit-text-stroke:1px white;
  }
}