* {
  box-sizing: border-box;
}

:root{
  --white:      rgb(229, 233, 236);
  --light-gray: rgb(190, 194, 197);
  --gray:       rgb(154, 161, 168);
  --dark-gray:  rgb(117, 127, 136);
  --black:      rgb(46,  62,  76);
  
  

  --shadow-0: none;
  --shadow-1: var(--black) 1px 1px 0;
  --shadow-2: var(--shadow-1), var(--black) 2px 2px 0;
  --shadow-3: var(--shadow-2), var(--black) 3px 3px 0;
  --shadow-4: var(--shadow-3), var(--black) 4px 4px 0;
  --shadow-5: var(--shadow-4), var(--black) 5px 5px 0;
  --shadow-6: var(--shadow-5), var(--black) 6px 6px 0;

  --inset-shadow-0: none;
  --inset-shadow-1: inset var(--black) 1px 1px 0;
  --inset-shadow-2: var(--inset-shadow-1), inset var(--black) 2px 2px 0;
  --inset-shadow-3: var(--inset-shadow-2), inset var(--black) 3px 3px 0;
  --inset-shadow-4: var(--inset-shadow-3), inset var(--black) 4px 4px 0;
  --inset-shadow-5: var(--inset-shadow-4), inset var(--black) 5px 5px 0;
  --inset-shadow-6: var(--inset-shadow-5), inset var(--black) 6px 6px 0;

  --translate-0: 0 0;
  --translate-1: -1px -1px;
  --translate-2: -2px -2px;
  --translate-3: -3px -3px;
  --translate-4: -4px -4px;
  --translate-5: -5px -5px;
  --translate-6: -6px -6px;

  --dashed-border: 1px dashed var(--black);
  --border-radius: 5px;
}

@keyframes text-shadow-anim {
  0%{
    text-shadow: var(--shadow-2);
    translate: var(--translate-2);
  }
  25% {
    text-shadow: var(--shadow-3);
    translate: var(--translate-3);
  }
  50% {
    text-shadow: var(--shadow-4);
    translate: var(--translate-4);
  }
  75% {
    text-shadow: var(--shadow-5);
    translate: var(--translate-5);
  }
  100% {
    text-shadow: var(--shadow-6);
    translate: var(--translate-6);
  }
}

@keyframes box-shadow-anim {
  0%   {box-shadow: var(--shadow-0)}
  25%  {box-shadow: var(--shadow-1)}
  50%  {box-shadow: var(--shadow-2)}
  75%  {box-shadow: var(--shadow-3)}
  100% {box-shadow: var(--shadow-4)}
}

html,
body {
  margin: 0;
  padding:0;
}

body {
  height:100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  background: var(--light-gray);
  font-family: 'Amiamie';
  color:  var(--black);
  
  font-size:11pt;
}

a {
  text-decoration-style: solid;
  color: var(--black)
}

a:hover,
a:active {
  text-decoration-style: wavy;
  text-decoration-skip-ink: none;
}

p {
  margin: 0;
}

ul {
  margin-left:0;
  list-style-type: circle;
}


img {
  display: block;
  margin: auto;
}

pre, code {
  color:var(--dark-gray);
  font-family: inherit;
  text-wrap: wrap;
}

figure {
  --border : 1px solid var(--gray);
  border-spacing:0;
  border : var(--border) ;
  border-radius: var(--border-radius);
  width:340px;
  margin: 1em auto;
}

figure {
  background: var(--light-gray);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items:center;
  overflow: hidden;
    max-width: 100%;
  

}

figure table {
  
  border-collapse: collapse;
  margin:0;
  width: 100%;
  border-left:none;
}


figure div{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  gap:.5em;
}

figure>* {
  margin: 5px;
}
figure img{
}

table td {
  padding: 1em;
  border: var(--border);
  text-align: center; 
  vertical-align: middle;  
}

table tr:first-child td {
  border-top: none;
}

table tr:last-child td {
  border-bottom: none;
}

table td:first-child{
  border-left: none;
}

table td:last-child{
  border-right: none;
}

figure figcaption {
  width:100%;
  margin:0;
  caption-side: bottom;
  text-transform: uppercase;
  text-align: center;
  font-size: small;
  border-top:  var(--border);
  background: var(--white);
  padding: .2em 0;
  color: var(--dark-gray);
}


figure .pile {
  flex-direction: column;
  rotate: 180deg;
}

figure .pile object {
  rotate: 90deg;
  margin: -20%;
  
}
body>footer,
body>header {
  width:100%;
  background: var(--light-gray);
  padding: 6px;
}

body>footer {
  border-top: var(--dashed-border);
  font-size: x-small;
}

body>header {
  position: relative;
  border-bottom: var(--dashed-border);
  font-size: medium;
  display:flex;
  flex-direction: row;
}

body>header h1{
  display:inline-block;
  font-size: inherit;
  margin:0;
  flex-grow: 1;
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:row;
  align-items:center;
}

body>header nav {
  position:relative;


}

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

.menu-button {
  display:none;
}




nav ul {

  padding: 0;
  margin:0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 2em;
}


nav li {
  display: block;   
}

main {
  flex: 0 1 100%;
  padding: 6px;
  width: 100%;
  max-width: 800px;  
}

article header {
  margin:4em auto;
}
article header h1 {
  margin: 0;
  margin-bottom:.15em;
  font-weight: normal;
  font-family: 'Avara_Bold';
  font-size: 36pt;
  text-align: center;

  color: var(--white);
}
article header h1 a {
  text-decoration:none;
  color: inherit;
}

article header h1 img {
  width:200px;
  max-width:100%;
  margin-bottom: .5em;
}

article header h1:has(img){
  animation:none;
    translate: var(--translate-0);
}

article header h1:has(a):has(img):hover {
  animation: none;
  text-shadow: var(--shadow-0);
  translate: var(--translate-0);
}

article header h1 {

  text-shadow: var(--shadow-5);
  translate: var(--translate-5);

  animation-name: text-shadow-anim;
  animation-duration: 200ms;
  animation-fill-mode: both;
  animation-direction : normal;
}

article header h1:has(a):hover {
  animation: none;
  text-shadow: var(--shadow-2);
  translate: var(--translate-2);
}


article header h1:has(a):active {
  animation:none;
  text-shadow: var(--shadow-0);
  translate: var(--translate-0);
}

article header .descriptioncourte {
  text-align: center;
  margin:0;
}

section {
    /*! margin:2em 0; */
}
article>section.descriptionlongue {
  background: var(--white);
  padding: .3em 1em;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-3);
}
section.specifications {
  --icon-width : 35px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
}

section.specifications .spec {
  flex-grow: 1;
  flex-basis: 1;
  display: flex;
  align-items: center;
  gap : 1em;
}

section.specifications .spec .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-width);
}

section.specifications .spec .contenu {
  flex-grow: 1;
  min-height: 25px;
  display: flex;
  align-items: left;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - var(--icon-width));

}

section.specifications .spec .contenu .label {
  font-size: x-small;
}
section.descriptionlongue {
  margin: 2em 0;
}

section.descriptionlongue h1 {
  font-size: x-large;
}

section.descriptionlongue h2 {
  font-size: large;
  margin-bottom: 0;
}

section.descriptionlongue h3,
section.descriptionlongue h4,
section.descriptionlongue h5 {
  font-size: normal;
  margin-bottom: 0;
}

section.descriptionlongue p {
  margin: .6em 0;
}


*.descriptioncourte {
  font-style: italic;
}

main label {
  display: block;
  margin-top: 1em;
  margin-bottom: .2em;
  text-transform: uppercase;
  font-size: normal;
}

fieldset {
  margin: 2em 0;
}


/* bddlist*/

ul.bddlist {
  list-style: none;
  padding: 0;
}

ul.bddlist li:before {
  content: ">";
  font-family: 'Avara_Bold';
  font-size: 15pt;
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

ul.bddlist li{
  width:auto;
  margin:15px;
}

ul.bddlist li a {
  display: block;
  font-size: normal;
  padding-bottom: 5px;
}

.CodeMirror {
  background: white;
}

/* OUTILS */

.liste-outils {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:10px;
}

.liste-outils li {
  display: block;
  list-style: none;
    width: calc(100% - 20px);
}
.liste-outils .outil>a {
  background: var(--white);
    height: 150px;
  margin:.5em 0;

}
.liste-outils .outil .titre {
  font-weight:bold;
}

div.prereglages:not(:has(li)){
  display: none;
}

article.outil #description header h1 {
  color:var(--light-gray);
}
article.outil {
  --tab-height: 28px;
  position: relative;
  height:100%;
  margin:0;
}

#outil {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap : 1.5em;
}
/* TABS */

[role="tablist"] {
  display: flex;
  justify-content: space-between;
  gap:5px;
}


[role="tablist"] [role="button"][aria-controls="pleinecran"].plein-ecran{
  position: fixed;
  z-index: 101;
  top:2px;
  right: 2px;
  border-radius: var(--border-radius);
  background-color: var(--light-gray);
}

[role="tab"],
[role="tablist"] [role="button"] {
  position: relative;
  height: var(--tab-height);
  z-index: 1;
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: 0;
  padding: .4em ;
  padding-bottom:1em;
}

[role="tab"] {
  flex-grow:1;
}

[role="tab"][aria-selected="false"],
[role="tablist"] [role="button"][aria-selected="false"]{
  top:2px;
  background: var(--gray);
}

[role="tab"][aria-selected="true"] {
}

section[hidden] {
    visibility: hidden;
}

section[role="tabpanel"] {
  height: calc(100% - var(--tab-height));
  position: absolute;
  width: 100%;
  margin-top:0;
  padding: 1em;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  background: var(--white);
  z-index:2;
  overflow: scroll;
}


/** CARTES  ETIQUETTES **/

ul.liste-cartes,
ul.liste-outils {
  
  list-style:none;
    margin:2em 0;
  padding: 0;
display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  gap:10px;
  justify-content: center;
  
}
ul.liste-cartes li,
ul.liste-cartes li {
  list-style: none;
  margin:0;
  padding: 0;
}
.item-carte .titre {
   font-weight: bold;
}

.item-carte img {
}

.item-carte .description {
  font-size:small;
}

.liste-cartes.cartes-index .item-carte{
  width: 75px;
  height: 75px;
    justify-content: center;

      background:var(--light-gray);
  padding: 0;

}

.liste-cartes.cartes-index strong {
  font-size:small;
  display:block;
  text-align:center;
  margin-top:.5em;
}
.item-carte.etiquette{
    width:150px;
  height:200px;
    background:var(--white);

  
}

.item-carte,
.liste-outils .outil>a {
  
  
  

  display: flex;
  flex-direction:column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  
  text-decoration: none;
  
  border:none;
  padding: .5em 1em ;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-5);
  translate: var(--translate-5);

}

.item-carte:hover,
.liste-outils .outil>a:hover,
.jeu-navigation a:hover{
  box-shadow: var(--shadow-4);
  translate: var(--translate-4);
}

.item-carte:active,
.liste-outils .outil>a:active,
.jeu-navigation a:active{
  box-shadow: var(--shadow-0);
  translate: var(--translate-0);
}

/* JEU NAVIGGATION */

.jeu-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

}
.jeu-navigation a {
  background: var(--white);
  font-size: x-small;
  padding: .2em .6em;
  margin:6px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-5);
  translate: var(--translate-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  min-width: 8em;
}

.jeu-navigation a:beforeg{
  font-family:'Avara_Bold';
  content:'>>';
}

.jeu-navigation a[role="prev"]:beforeg{
  content:'<<';
}
/* ADAPTATION */
@media screen and (max-width: 380px) {
  
  figure{
    width:100%;
    font-size:.8em;
  }
  
  figure img {
    max-width:100%;
  }
  
}
@media screen and (max-width: 800px) {
  main header h1 {
    font-size: 24pt;
  }

  body > header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding:1em;
  }

  header nav ul {
    flex-direction: column;
    align-items: end;
    text-align:right;
    gap: .1em;
  }
  header nav ul li {
    margin:.8em 0;
  }
  #menu-toggle ~ ul {
    position:fixed;
    width:100%;
    top: -100%;
    right:0;

    background: var(--light-gray);
    border-bottom: var(--dashed-border);
    padding:1em;
    padding-top:2.5em;
    margin:0;
  }
  #menu-toggle:checked ~ ul {
    top: 0 !important;
  }
  
  .menu-button {
    --size: 1.2em;
    display:block;
    width: var(--size);
    height: var(--size);

    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 11;
  }
 .menu-button > span{
     display:block;
     width: var(--size);
    height: var(--size);
    background-image:url('../assets/img/burger.svg');
       background-repeat: no-repeat;


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